"use client";

import { useEffect, useState } from "react";
import { useCurrentUser } from "@/lib/hooks/useCurrentUser";
import { apiFetch, ApiClientError } from "@/lib/api/client";
import { Card, CardHeader, CardBody } from "@/components/ui/Card";
import { Table, Thead, Th, Tbody, Tr, Td } from "@/components/ui/Table";
import { StatusBadge } from "@/components/ui/Badge";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import { EmptyState } from "@/components/ui/EmptyState";

interface StaffMember {
  membershipId: string;
  status: string;
  role: { id: string; name: string };
  user: { id: string; fullName: string; email: string; status: string };
}

interface RoleOption {
  id: string;
  name: string;
}

export default function StaffPage() {
  const { currentOrg } = useCurrentUser();
  const [staff, setStaff] = useState<StaffMember[] | null>(null);
  const [roles, setRoles] = useState<RoleOption[]>([]);
  const [form, setForm] = useState({ fullName: "", email: "", roleId: "" });
  const [inviting, setInviting] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [tempPassword, setTempPassword] = useState<string | null>(null);

  async function loadStaff(orgId: string) {
    const res = await apiFetch<{ staff: StaffMember[] }>(`/api/v1/organizations/${orgId}/staff`);
    setStaff(res.staff);
  }

  useEffect(() => {
    if (!currentOrg) return;
    loadStaff(currentOrg.id);
    apiFetch<{ roles: Array<{ id: string; name: string }> }>(`/api/v1/roles?organizationId=${currentOrg.id}`).then((res) => {
      setRoles(res.roles);
      setForm((f) => ({ ...f, roleId: f.roleId || res.roles[0]?.id || "" }));
    });
  }, [currentOrg]);

  async function handleInvite(e: React.FormEvent) {
    e.preventDefault();
    if (!currentOrg) return;
    setInviting(true);
    setMessage(null);
    setTempPassword(null);
    try {
      const res = await apiFetch<{ temporaryPassword: string | null; user: { fullName: string } }>(
        `/api/v1/organizations/${currentOrg.id}/staff`,
        { method: "POST", body: JSON.stringify(form) }
      );
      setMessage({ type: "success", text: `${res.user.fullName} added.` });
      if (res.temporaryPassword) setTempPassword(res.temporaryPassword);
      setForm((f) => ({ ...f, fullName: "", email: "" }));
      await loadStaff(currentOrg.id);
    } catch (err) {
      setMessage({ type: "error", text: err instanceof ApiClientError ? err.message : "Could not invite staff member." });
    } finally {
      setInviting(false);
    }
  }

  async function handleStatusToggle(member: StaffMember) {
    if (!currentOrg) return;
    const nextStatus = member.status === "ACTIVE" ? "SUSPENDED" : "ACTIVE";
    await apiFetch(`/api/v1/organizations/${currentOrg.id}/staff/${member.membershipId}`, {
      method: "PATCH",
      body: JSON.stringify({ status: nextStatus }),
    });
    await loadStaff(currentOrg.id);
  }

  if (!currentOrg) return <p className="text-sm text-ink-muted">Loading…</p>;

  return (
    <div className="flex flex-col gap-6">
      <h1 className="text-lg font-semibold text-ink">Staff & roles</h1>

      <Card>
        <CardHeader title="Add a staff member" />
        <CardBody>
          <form onSubmit={handleInvite} className="grid grid-cols-1 gap-4 sm:grid-cols-4 sm:items-end">
            <Input
              label="Full name"
              required
              value={form.fullName}
              onChange={(e) => setForm({ ...form, fullName: e.target.value })}
            />
            <Input
              label="Email"
              type="email"
              required
              value={form.email}
              onChange={(e) => setForm({ ...form, email: e.target.value })}
            />
            <div className="flex flex-col gap-1.5">
              <label className="text-sm font-medium text-ink">Role</label>
              <select
                className="h-10 rounded border border-border px-3 text-sm"
                value={form.roleId}
                onChange={(e) => setForm({ ...form, roleId: e.target.value })}
              >
                {roles.map((r) => (
                  <option key={r.id} value={r.id}>
                    {r.name}
                  </option>
                ))}
              </select>
            </div>
            <Button type="submit" disabled={inviting || !form.roleId}>
              {inviting ? "Adding…" : "Add staff member"}
            </Button>
          </form>

          {message && (
            <p className={`mt-3 text-sm ${message.type === "success" ? "text-status-online" : "text-status-offline"}`}>
              {message.text}
            </p>
          )}
          {tempPassword && (
            <p className="mt-2 rounded bg-status-warning-bg px-3 py-2 text-sm text-status-warning">
              Temporary password for the new account: <span className="font-mono">{tempPassword}</span> — share it with
              them directly; it won't be shown again.
            </p>
          )}
        </CardBody>
      </Card>

      <Card>
        <CardHeader title="Team" />
        {staff && staff.length === 0 ? (
          <EmptyState title="No staff yet" description="Add your first team member above." />
        ) : (
          <Table>
            <Thead>
              <tr>
                <Th>Name</Th>
                <Th>Email</Th>
                <Th>Role</Th>
                <Th>Status</Th>
                <Th>Action</Th>
              </tr>
            </Thead>
            <Tbody>
              {staff?.map((member) => (
                <Tr key={member.membershipId}>
                  <Td>{member.user.fullName}</Td>
                  <Td mono>{member.user.email}</Td>
                  <Td>{member.role.name}</Td>
                  <Td>
                    <StatusBadge status={member.status} />
                  </Td>
                  <Td>
                    <Button variant="ghost" size="sm" onClick={() => handleStatusToggle(member)}>
                      {member.status === "ACTIVE" ? "Suspend" : "Reactivate"}
                    </Button>
                  </Td>
                </Tr>
              ))}
            </Tbody>
          </Table>
        )}
      </Card>
    </div>
  );
}