"use client";

import { useActionState, useEffect, useState } from "react";
import { useFormStatus } from "react-dom";
import { useRouter } from "next/navigation";
import { Building2, Pencil, Plus } from "lucide-react";
import { saveProgramAction } from "@/app/actions/programs";
import type { ActionResult } from "@/app/actions/shared";
import {
  Badge,
  buttonClass,
  Callout,
  Card,
  CardHeader,
  EmptyState,
  Field,
  inputClass,
  TableShell,
  Td,
  Th,
} from "@/components/ui";
import { useToast } from "@/components/toast";

const initial: ActionResult = { ok: false, message: null };

export interface ProgramView {
  id: string;
  code: string;
  name: string;
  active: boolean;
  notes: string | null;
  studentCount: number;
  curriculumCount: number;
  userCount: number;
}

function Submit({ editing }: { editing: boolean }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" className={buttonClass("primary", "sm")} disabled={pending}>
      <Building2 className="h-3.5 w-3.5" aria-hidden />
      {pending ? "Saving…" : editing ? "Save program" : "Create program"}
    </button>
  );
}

export function ProgramsManager({ programs }: { programs: ProgramView[] }) {
  const router = useRouter();
  const { toast } = useToast();
  const [state, action] = useActionState<ActionResult, FormData>(saveProgramAction, initial);
  const [editing, setEditing] = useState<ProgramView | null>(null);
  const [showForm, setShowForm] = useState(false);

  useEffect(() => {
    if (!state.message) return;
    toast({ tone: state.ok ? "success" : "error", title: state.message });
    if (state.ok) {
      setShowForm(false);
      setEditing(null);
      router.refresh();
    }
  }, [state, toast, router]);

  return (
    <div className="space-y-5">
      <Card>
        <CardHeader
          title="Programs"
          description={`${programs.length} program(s). ${programs.filter((p) => p.active).length} active.`}
          actions={
            <button
              type="button"
              onClick={() => {
                setEditing(null);
                setShowForm(true);
              }}
              className={buttonClass("primary", "sm")}
            >
              <Plus className="h-3.5 w-3.5" aria-hidden />
              Add program
            </button>
          }
        />
        {programs.length === 0 ? (
          <EmptyState
            icon={<Building2 className="h-8 w-8" />}
            title="No programs yet"
            description="Create one program per college. Every curriculum and student belongs to exactly one."
          />
        ) : (
          <TableShell>
            <thead>
              <tr>
                <Th>Code</Th>
                <Th>Program</Th>
                <Th>Status</Th>
                <Th align="right">Curricula</Th>
                <Th align="right">Students</Th>
                <Th align="right">Users</Th>
                <Th>Actions</Th>
              </tr>
            </thead>
            <tbody>
              {programs.map((program) => (
                <tr key={program.id} className={program.active ? "hover:bg-ink-50" : "opacity-60 hover:bg-ink-50"}>
                  <Td className="font-medium text-ink-900">{program.code}</Td>
                  <Td className="text-[13px]">
                    {program.name}
                    {program.notes ? (
                      <span className="block max-w-md text-[11px] leading-snug text-ink-500">{program.notes}</span>
                    ) : null}
                  </Td>
                  <Td>
                    {program.active ? <Badge tone="success">Active</Badge> : <Badge tone="neutral">Inactive</Badge>}
                  </Td>
                  <Td align="right" className="tabular">
                    {program.curriculumCount}
                  </Td>
                  <Td align="right" className="tabular">
                    {program.studentCount}
                  </Td>
                  <Td align="right" className="tabular">
                    {program.userCount}
                  </Td>
                  <Td>
                    <button
                      type="button"
                      onClick={() => {
                        setEditing(program);
                        setShowForm(true);
                      }}
                      className={buttonClass("ghost", "sm")}
                    >
                      <Pencil className="h-3.5 w-3.5" aria-hidden />
                      Edit
                    </button>
                  </Td>
                </tr>
              ))}
            </tbody>
          </TableShell>
        )}
      </Card>

      {showForm ? (
        <Card>
          <CardHeader title={editing ? `Edit program — ${editing.code}` : "New program"} />
          <form action={action} className="space-y-4 p-5">
            {editing ? <input type="hidden" name="program_id" value={editing.id} /> : null}

            <div className="grid gap-4 sm:grid-cols-[10rem_minmax(0,1fr)]">
              <Field
                label="Code"
                htmlFor="code"
                required
                error={state.fieldErrors?.code}
                hint="Short, e.g. MED"
              >
                <input
                  id="code"
                  name="code"
                  defaultValue={editing?.code ?? ""}
                  className={`${inputClass} uppercase`}
                  required
                  maxLength={20}
                />
              </Field>
              <Field label="Program name" htmlFor="name" required error={state.fieldErrors?.name}>
                <input
                  id="name"
                  name="name"
                  defaultValue={editing?.name ?? ""}
                  className={inputClass}
                  required
                  placeholder="e.g. College of Medicine"
                />
              </Field>
            </div>

            <Field label="Notes" htmlFor="notes" error={state.fieldErrors?.notes}>
              <input id="notes" name="notes" defaultValue={editing?.notes ?? ""} className={inputClass} />
            </Field>

            <label className="flex items-center gap-2 text-[13px] text-ink-700">
              <input
                type="checkbox"
                name="active"
                defaultChecked={editing ? editing.active : true}
                className="h-4 w-4 rounded border-ink-300 text-brand-600 focus:ring-brand-500"
              />
              Program is active
            </label>

            {editing && (editing.studentCount > 0 || editing.userCount > 0) ? (
              <Callout tone="warning">
                {editing.studentCount} active student(s) and {editing.userCount} user account(s) belong to this
                program. It cannot be deactivated until they are reassigned.
              </Callout>
            ) : null}

            <div className="flex gap-2 border-t border-ink-200 pt-4">
              <Submit editing={!!editing} />
              <button
                type="button"
                onClick={() => {
                  setShowForm(false);
                  setEditing(null);
                }}
                className={buttonClass("ghost", "sm")}
              >
                Cancel
              </button>
            </div>
          </form>
        </Card>
      ) : null}
    </div>
  );
}