"use client";

import * as React from "react";
import {
  UserCheck,
  Plus,
  Search,
  Pencil,
  Trash2,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Loading } from "@/components/ui/loading";
import { NoDataFound } from "@/components/ui/no-data-found";
import { toast } from "sonner";
import {
  useGetTeamSupportMembersQuery,
  useDeleteTeamSupportMemberMutation,
  type TeamSupportMember,
} from "@/api/rtk/teams-api";
import { SupportMemberModal } from "./support-member-modal";
import { DeleteDialog } from "@/components/ui/delete-dialog";

function formatSupportSlot(value?: string | null): string {
  if (!value) return "—";
  if (value === "FRONT") return "Front";
  if (value === "SUPPORT") return "BDR";
  return value;
}

export default function SupportMembersPage() {
  const [search, setSearch] = React.useState("");
  const [modalOpen, setModalOpen] = React.useState(false);
  const [editItem, setEditItem] = React.useState<TeamSupportMember | null>(null);
  const [deleteItem, setDeleteItem] = React.useState<TeamSupportMember | null>(null);

  const { data: supportMembers = [], isLoading, refetch } = useGetTeamSupportMembersQuery(undefined);
  const [deleteMutation, { isLoading: isDeleting }] = useDeleteTeamSupportMemberMutation();

  const filtered = React.useMemo(() => {
    const q = search.toLowerCase().trim();
    if (!q) return supportMembers;

    return supportMembers.filter((m) => {
      const memberName = m.supportMember?.name?.toLowerCase() || "";
      const memberEmail = m.supportMember?.email?.toLowerCase() || "";
      const supportedName = m.member?.name?.toLowerCase() || "";
      const supportedEmail = m.member?.email?.toLowerCase() || "";
      const role = (m.supportRole || "").toLowerCase();
      const origin = (m.originRole || "").toLowerCase();

      return (
        memberName.includes(q) ||
        memberEmail.includes(q) ||
        supportedName.includes(q) ||
        supportedEmail.includes(q) ||
        role.includes(q) ||
        origin.includes(q)
      );
    });
  }, [supportMembers, search]);

  const openCreate = () => {
    setEditItem(null);
    setModalOpen(true);
  };

  const openEdit = (item: TeamSupportMember) => {
    setEditItem(item);
    setModalOpen(true);
  };

  const handleSaved = () => {
    refetch();
  };

  const confirmDelete = async () => {
    if (!deleteItem) return;

    try {
      await deleteMutation(deleteItem.id).unwrap();
      toast.success("Support member removed");
      setDeleteItem(null);
      refetch();
    } catch (err: any) {
      toast.error(err?.data?.message || "Failed to remove support member");
    }
  };

  const openDelete = (item: TeamSupportMember) => {
    setDeleteItem(item);
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <div className="flex items-center gap-3">
            <div className="flex size-9 items-center justify-center rounded-xl bg-accent/10 text-accent">
              <UserCheck className="size-5" />
            </div>
            <div>
              <h1 className="font-['Lexend'] text-2xl font-bold tracking-tight">Support Members</h1>
              <p className="text-sm text-muted-foreground">
                Manage which support staff are assigned to each member.
              </p>
            </div>
          </div>
        </div>

        <Button onClick={openCreate} className="gap-2">
          <Plus className="size-4" />
          Add Support Member
        </Button>
      </div>

      {/* Search */}
      <div className="flex items-center gap-3">
        <div className="relative w-full max-w-sm">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
          <Input
            placeholder="Search by name, email, or role..."
            className="pl-9"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </div>
      </div>

      {/* Content */}
      {isLoading ? (
        <div className="py-12">
          <Loading variant="api" layout="section" message="Loading support members..." />
        </div>
      ) : filtered.length === 0 ? (
        <NoDataFound
          title="No support members found"
          description={
            search
              ? "Try adjusting your search terms."
              : "Get started by adding your first support assignment."
          }
          action={
            !search ? (
              <Button onClick={openCreate} variant="outline" className="gap-2">
                <Plus className="size-4" /> Add Support Member
              </Button>
            ) : undefined
          }
        />
      ) : (
        <div className="rounded-2xl border bg-card overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Account executive (AE)</TableHead>
                <TableHead>BDR</TableHead>
                <TableHead>Front / BDR</TableHead>
                <TableHead>Origin Role</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-[90px] text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filtered.map((item: TeamSupportMember) => (
                <TableRow key={item.id}>
                  <TableCell>
                    <div>
                      <div className="font-medium">
                        {item.member?.name || "Unknown Member"}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {item.member?.email}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div>
                      <div className="font-medium">
                        {item.supportMember?.name || "Unknown User"}
                      </div>
                      <div className="text-xs text-muted-foreground">
                        {item.supportMember?.email}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{formatSupportSlot(item.supportRole)}</TableCell>
                  <TableCell>{item.originRole || "—"}</TableCell>
                  <TableCell>
                    <Badge
                      variant={item.isActive ? "default" : "secondary"}
                      className={
                        item.isActive
                          ? "bg-emerald-500/10 text-emerald-600 hover:bg-emerald-500/10"
                          : ""
                      }
                    >
                      {item.isActive ? "Active" : "Inactive"}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-1">
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        onClick={() => openEdit(item)}
                        aria-label="Edit"
                      >
                        <Pencil className="size-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon-sm"
                        onClick={() => openDelete(item)}
                        aria-label="Remove"
                      >
                        <Trash2 className="size-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      )}

      {/* Modals */}
      <SupportMemberModal
        open={modalOpen}
        onOpenChange={setModalOpen}
        editItem={editItem}
        onSaved={handleSaved}
      />

      <DeleteDialog
        open={!!deleteItem}
        onOpenChange={(open) => !open && setDeleteItem(null)}
        title="Remove Support Member?"
        description={`This will remove the support assignment for ${deleteItem?.member?.name || "this member"}. The record will be soft-deleted.`}
        onConfirm={confirmDelete}
        isLoading={isDeleting}
      />
    </div>
  );
}