"use client";

/**
 * app/portal/checkin/[programId]/page.tsx
 *
 * Volunteer lands here after scanning the admin's attendance QR code.
 * Automatically attempts to record attendance for the logged-in volunteer
 * against this program, then shows a clear success / already-checked-in /
 * not-approved / error state.
 *
 * Place this file at: src/app/portal/checkin/[programId]/page.tsx
 */

import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { createClient } from "@/lib/supabase/client";
import Spinner from "@/components/ui/Spinner";
import Button from "@/components/ui/Button";
import { CheckCircle2, XCircle, AlertCircle, CalendarCheck } from "lucide-react";

type Status = "loading" | "success" | "already" | "not_approved" | "error" | "not_found";

type ProgramInfo = { title: string; start_at: string; venue: string | null };

export default function CheckinPage() {
  const params = useParams<{ programId: string }>();
  const router = useRouter();
  const supabase = createClient();

  const [status, setStatus] = useState<Status>("loading");
  const [program, setProgram] = useState<ProgramInfo | null>(null);
  const [checkedInAt, setCheckedInAt] = useState<string | null>(null);

  useEffect(() => {
    (async () => {
      const programId = params.programId;
      if (!programId) {
        setStatus("not_found");
        return;
      }

      // 1) Must be logged in
      const { data: userRes } = await supabase.auth.getUser();
      if (!userRes.user) {
        // Preserve the destination so they land back here after login.
        router.push(`/login?next=/portal/checkin/${programId}`);
        return;
      }

      // 2) Load program info for display
      const { data: prog, error: progError } = await supabase
        .from("programs")
        .select("title, start_at, venue")
        .eq("id", programId)
        .single();

      if (progError || !prog) {
        setStatus("not_found");
        return;
      }
      setProgram(prog as ProgramInfo);

      // 3) Must have an approved application for this program
      const { data: application } = await supabase
        .from("applications")
        .select("status")
        .eq("program_id", programId)
        .eq("volunteer_id", userRes.user.id)
        .maybeSingle();

      if (!application || application.status !== "approved") {
        setStatus("not_approved");
        return;
      }

      // 4) Already checked in?
      const { data: existing } = await supabase
        .from("attendance")
        .select("checked_in_at")
        .eq("program_id", programId)
        .eq("volunteer_id", userRes.user.id)
        .maybeSingle();

      if (existing) {
        setCheckedInAt(existing.checked_in_at);
        setStatus("already");
        return;
      }

      // 5) Record attendance
      const { data: inserted, error: insertError } = await supabase
        .from("attendance")
        .insert({ program_id: programId, volunteer_id: userRes.user.id })
        .select("checked_in_at")
        .single();

      if (insertError) {
        console.error("Check-in failed:", insertError.message);
        setStatus("error");
        return;
      }

      setCheckedInAt(inserted.checked_in_at);
      setStatus("success");
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [params.programId]);

  if (status === "loading") {
    return <Spinner label="Checking you in…" />;
  }

  const card = (icon: React.ReactNode, color: string, title: string, body: string) => (
    <main className="flex min-h-screen items-center justify-center bg-sand px-4 py-10">
      <div className="w-full max-w-md rounded-card border border-sand-dark/60 bg-white p-8 text-center shadow-card">
        <div className={`mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full ${color}`}>
          {icon}
        </div>
        <h1 className="text-xl font-extrabold text-ink">{title}</h1>
        <p className="mt-2 text-sm text-muted">{body}</p>
        {program && (
          <div className="mt-5 rounded-card bg-sand/50 px-4 py-3 text-left text-sm">
            <p className="font-semibold text-ink">{program.title}</p>
            {program.venue && <p className="text-xs text-muted mt-0.5">{program.venue}</p>}
          </div>
        )}
        <Button className="mt-6 w-full" onClick={() => router.push("/portal")}>
          Go to Portal
        </Button>
      </div>
    </main>
  );

  switch (status) {
    case "success":
      return card(
        <CheckCircle2 size={32} className="text-white" />,
        "bg-emerald",
        "Attendance recorded!",
        `You're checked in${checkedInAt ? ` at ${new Date(checkedInAt).toLocaleTimeString()}` : ""}. Thank you for participating.`
      );
    case "already":
      return card(
        <CalendarCheck size={32} className="text-white" />,
        "bg-teal",
        "Already checked in",
        `You checked in to this program${checkedInAt ? ` at ${new Date(checkedInAt).toLocaleTimeString()}` : ""}. No further action needed.`
      );
    case "not_approved":
      return card(
        <XCircle size={32} className="text-white" />,
        "bg-warning",
        "Not approved for this program",
        "You don't have an approved application for this program, so attendance can't be recorded. Please contact the admin if you believe this is a mistake."
      );
    case "not_found":
      return card(
        <AlertCircle size={32} className="text-white" />,
        "bg-muted",
        "Program not found",
        "This check-in link doesn't match any program. Please ask the admin for a valid QR code."
      );
    default:
      return card(
        <AlertCircle size={32} className="text-white" />,
        "bg-error",
        "Something went wrong",
        "We couldn't record your attendance right now. Please try scanning again or contact the admin."
      );
  }
}