"use client";

import { useEffect, useState, useCallback, useMemo } from "react";
import { createClient } from "@/lib/supabase/client";
import Card, { CardHeader } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import Badge, { statusTone } from "@/components/ui/Badge";
import Spinner from "@/components/ui/Spinner";
import { Input } from "@/components/ui/Input";
import { Select } from "@/components/ui/Select";
import { Table, Td, EmptyRow } from "@/components/ui/Table";
import { useToast } from "@/components/ui/Toast";
import { formatDate } from "@/lib/format";
import { Check, X, Search } from "lucide-react";

type Volunteer = {
  id: string;
  full_name: string;
  matric_no: string | null;
  email: string;
  total_merit: number;
  skills: string[];
};
type PendingApp = {
  id: string;
  applied_at: string;
  volunteer: string;
  program: string;
};

export default function VolunteersPage() {
  const supabase = createClient();
  const { notify } = useToast();
  const [loading, setLoading] = useState(true);
  const [volunteers, setVolunteers] = useState<Volunteer[]>([]);
  const [pending, setPending] = useState<PendingApp[]>([]);
  const [skills, setSkills] = useState<string[]>([]);
  const [search, setSearch] = useState("");
  const [skillFilter, setSkillFilter] = useState("");

  const load = useCallback(async () => {
    const [{ data: profs }, { data: vSkills }, { data: pend }, { data: sk }] = await Promise.all([
      supabase
        .from("profiles")
        .select("id, full_name, matric_no, email, total_merit")
        .eq("role", "volunteer")
        .order("full_name"),
      supabase.from("volunteer_skills").select("volunteer_id, skills(name)"),
      supabase
        .from("applications")
        .select("id, applied_at, profiles!volunteer_id(full_name), programs(title)")
        .eq("status", "pending")
        .order("applied_at", { ascending: false }),
      supabase.from("skills").select("name").order("name"),
    ]);

    const skillMap = new Map<string, string[]>();
    (vSkills ?? []).forEach((row: any) => {
      const name = row.skills?.name;
      if (!name) return;
      const arr = skillMap.get(row.volunteer_id) ?? [];
      arr.push(name);
      skillMap.set(row.volunteer_id, arr);
    });

    setVolunteers(
      (profs ?? []).map((p: any) => ({ ...p, skills: skillMap.get(p.id) ?? [] }))
    );
    setPending(
      (pend ?? []).map((a: any) => ({
        id: a.id,
        applied_at: a.applied_at,
        volunteer: a.profiles?.full_name ?? "Unknown",
        program: a.programs?.title ?? "Unknown program",
      }))
    );
    setSkills((sk ?? []).map((s: any) => s.name));
    setLoading(false);
  }, [supabase]);

  useEffect(() => {
    load();
  }, [load]);

  async function review(id: string, status: "approved" | "rejected") {
    const { data: userRes } = await supabase.auth.getUser();
    const { error } = await supabase
      .from("applications")
      .update({ status, reviewed_by: userRes.user?.id, reviewed_at: new Date().toISOString() })
      .eq("id", id);
    if (error) return notify(error.message, "error");
    notify(status === "approved" ? "Application approved." : "Application rejected.");
    setPending((p) => p.filter((a) => a.id !== id));
  }

  const filtered = useMemo(() => {
    const q = search.trim().toLowerCase();
    return volunteers.filter((v) => {
      const matchesSearch =
        !q ||
        v.full_name.toLowerCase().includes(q) ||
        v.email.toLowerCase().includes(q) ||
        (v.matric_no ?? "").toLowerCase().includes(q);
      const matchesSkill = !skillFilter || v.skills.includes(skillFilter);
      return matchesSearch && matchesSkill;
    });
  }, [volunteers, search, skillFilter]);

  if (loading) return <Spinner label="Loading volunteers…" />;

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-extrabold text-ink">Manage Volunteers</h1>
        <p className="text-sm text-muted">Review applications and browse volunteers by skill.</p>
      </div>

      <Card>
        <CardHeader
          title={`Pending applications (${pending.length})`}
        />
        <Table headers={["Volunteer", "Program", "Applied", "Decision"]}>
          {pending.length ? (
            pending.map((a) => (
              <tr key={a.id} className="hover:bg-sand/40">
                <Td className="font-semibold">{a.volunteer}</Td>
                <Td>{a.program}</Td>
                <Td>{formatDate(a.applied_at)}</Td>
                <Td>
                  <div className="flex gap-2">
                    <Button size="sm" onClick={() => review(a.id, "approved")}>
                      <Check size={14} /> Approve
                    </Button>
                    <Button size="sm" variant="danger" onClick={() => review(a.id, "rejected")}>
                      <X size={14} /> Reject
                    </Button>
                  </div>
                </Td>
              </tr>
            ))
          ) : (
            <EmptyRow colSpan={4} message="No pending applications." />
          )}
        </Table>
      </Card>

      <Card>
        <div className="flex flex-col gap-3 border-b border-sand-dark/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
          <h2 className="text-base font-bold text-ink">All volunteers ({filtered.length})</h2>
          <div className="flex gap-2">
            <div className="relative">
              <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted" />
              <Input
                className="pl-9"
                placeholder="Search name, email, matric"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
            <Select value={skillFilter} onChange={(e) => setSkillFilter(e.target.value)} className="w-40">
              <option value="">All skills</option>
              {skills.map((s) => (
                <option key={s} value={s}>
                  {s}
                </option>
              ))}
            </Select>
          </div>
        </div>
        <Table headers={["Name", "Matric No.", "Email", "Skills", "Merit"]}>
          {filtered.length ? (
            filtered.map((v) => (
              <tr key={v.id} className="hover:bg-sand/40">
                <Td className="font-semibold">{v.full_name}</Td>
                <Td>{v.matric_no ?? "—"}</Td>
                <Td className="text-muted">{v.email}</Td>
                <Td>
                  <div className="flex flex-wrap gap-1">
                    {v.skills.length ? (
                      v.skills.map((s) => <Badge key={s} tone="teal">{s}</Badge>)
                    ) : (
                      <span className="text-xs text-muted">—</span>
                    )}
                  </div>
                </Td>
                <Td>
                  <Badge tone="emerald">{v.total_merit} pts</Badge>
                </Td>
              </tr>
            ))
          ) : (
            <EmptyRow colSpan={5} message="No volunteers match your filters." />
          )}
        </Table>
      </Card>
    </div>
  );
}