import { useState, type ReactNode } from "react";
import { toast } from "sonner";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { logSeatAccess, type CapstoneSeat } from "@/lib/server/api-hub";
import { seatDossierFromRoles } from "@/lib/rbac";
import { StaffEditField } from "@/components/staff-edit";
import { useRoleStore } from "@/lib/role-store";

export function SeatPerson({
  seat,
  trailing,
}: {
  seat: CapstoneSeat;
  trailing?: ReactNode;
}) {
  const [open, setOpen] = useState(false);
  const role = useRoleStore((s) => s.role);
  const operatorRole = useRoleStore((s) => s.operatorRole);
  const email = useRoleStore((s) => s.email);
  const access = seatDossierFromRoles(operatorRole, role);
  const filled = seat.filled && seat.person_name !== "Open";

  function onNameClick() {
    if (!filled) return;
    if (!access.open) {
      void logSeatAccess({
        data: { seatId: seat.id, email, role, action: "denied", granted: false, name: seat.person_name },
      });
      toast.error("This seat is not open for your role.");
      return;
    }
    void logSeatAccess({
      data: {
        seatId: seat.id,
        email,
        role,
        action: access.resume ? "resume" : "open",
        granted: true,
        name: seat.person_name,
      },
    });
    setOpen(true);
  }

  return (
    <>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="text-sm font-medium text-navy">{seat.seat}</p>
          {filled && access.open ? (
            <button
              type="button"
              className="mt-0.5 text-left text-sm font-semibold text-primary hover:underline"
              onClick={onNameClick}
            >
              {seat.person_name}
            </button>
          ) : (
            <p className="text-xs text-navy">{seat.person_name}</p>
          )}
        </div>
        {trailing}
      </div>
      <Dialog open={open} onOpenChange={setOpen}>
        {open ? (
          <DialogContent
            title={seat.person_name}
            description={seat.headline ?? seat.seat}
            className="max-h-[85vh] overflow-y-auto"
          >
            <p className="text-xs font-semibold tracking-wide text-navy uppercase">
              Viewing as {access.label}
            </p>
            <div className="mt-2 flex flex-wrap gap-2">
              <Badge>{seat.seat}</Badge>
              {seat.school ? <Badge variant="outline">{seat.school}</Badge> : null}
            </div>
            {access.bio && seat.bio ? (
              <p className="mt-3 text-sm leading-relaxed text-navy">{seat.bio}</p>
            ) : (
              <p className="mt-3 text-sm text-navy">No published bio on this seat yet.</p>
            )}
            <div className="mt-2">
              <StaffEditField table="capstone_seats" id={seat.id} field="bio" value={seat.bio} label="bio" />
            </div>
            {access.resume && seat.resume ? (
              <div className="mt-4 rounded-lg bg-muted/70 px-3 py-3">
                <p className="text-[11px] font-semibold tracking-[0.16em] text-gold-ink uppercase">
                  Résumé · {access.label}
                </p>
                <pre className="mt-2 whitespace-pre-wrap font-sans text-sm text-navy">{seat.resume}</pre>
                <div className="mt-2">
                  <StaffEditField table="capstone_seats" id={seat.id} field="resume" value={seat.resume} label="résumé" />
                </div>
              </div>
            ) : (
              <p className="mt-3 text-xs text-navy">{access.reason}</p>
            )}
            <p className="mt-3 text-xs text-navy">CFL takes no equity in this person’s venture. Education only.</p>
            <Button className="mt-4" variant="outline" onClick={() => setOpen(false)}>
              Close
            </Button>
          </DialogContent>
        ) : null}
      </Dialog>
    </>
  );
}