"use client";

import { useState } from "react";
import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { EmptyState } from "@/components/shared/panel";
import { PaginationControls, SortHeading } from "@/components/shared/query-controls";
import { StatusBadge } from "@/components/shared/status-badge";
import { TableToolbar } from "@/components/shared/table-toolbar";
import { dateTime } from "@/lib/format";
import { RfidCardEditorDialog, RfidDeleteDialog } from "./rfid-dialogs";
import type {
  RfidCardFormValues,
  RfidCardRecord,
  RfidCardRow,
  RfidFormOptions,
  RfidGroupRecord,
} from "./types";
import type { Pagination } from "@/lib/list-query";

export function RFIDCardTab({
  records,
  groups,
  options,
  pagination,
  loading,
  loadError,
  onLoad,
  onCreate,
  onUpdate,
  onDelete,
  onRefresh,
}: {
  records: RfidCardRecord[];
  groups: RfidGroupRecord[];
  options: RfidFormOptions;
  pagination: Pagination;
  loading: boolean;
  loadError?: string;
  onLoad(id: string): Promise<RfidCardRecord | null>;
  onCreate(values: RfidCardFormValues): Promise<boolean>;
  onUpdate(id: string, values: RfidCardFormValues): Promise<boolean>;
  onDelete(id: string): Promise<boolean>;
  onRefresh(): void;
}) {
  const [editorOpen, setEditorOpen] = useState(false);
  const [editing, setEditing] = useState<RfidCardRecord>();
  const [deleting, setDeleting] = useState<RfidCardRecord>();
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [detailError, setDetailError] = useState("");
  const groupNames = new Map(groups.map((group) => [group.id, group.groupName]));
  const userNames = new Map(options.users.map((user) => [user.id, user.name]));
  const rows: RfidCardRow[] = records.map((record) => ({
    ...record,
    userName: userNames.get(record.userId) ?? record.userName,
    parentGroupName: record.groupId ? (groupNames.get(record.groupId) ?? "") : "",
  }));

  async function openEdit(record: RfidCardRecord) {
    setLoadingDetail(true);
    setDetailError("");
    try {
      const detail = await onLoad(record.id);
      if (detail) {
        setEditing({ ...detail, userName: userNames.get(detail.userId) ?? detail.userName });
        setEditorOpen(true);
      }
    } catch {
      setDetailError("Unable to load RFID details. Please try again.");
    } finally {
      setLoadingDetail(false);
    }
  }

  return (
    <section className="panel overflow-hidden">
      <TableToolbar
        title="RFID"
        description="Manage RFID cards assigned to EV drivers."
        searchKey="name"
        searchPlaceholder="Search by RFID name..."
        fields={[
          {
            name: "organization_code",
            label: "Organization",
            section: "Card assignment",
            options: options.organizations.map(({ code, name }) => ({ value: code, label: name })),
          },
          {
            name: "user_id",
            label: "User",
            section: "Card assignment",
            searchable: true,
            options: options.users.map(({ id, name }) => ({ value: id, label: name, description: id })),
            placeholder: "Search users by name or ID...",
          },
          {
            name: "rfid_code",
            label: "RFID code",
            section: "Card details",
            placeholder: "Search by RFID code",
          },
          {
            name: "parent_rfid_id",
            label: "Parent group",
            section: "Card assignment",
            options: groups.map((group) => ({ value: group.id, label: group.groupName })),
          },
          {
            name: "active",
            label: "Status",
            section: "Card details",
            options: [
              { value: "true", label: "Active" },
              { value: "false", label: "Inactive" },
            ],
          },
          { name: "createdAt[$gte]", label: "Created from", section: "Date range", type: "date" },
          { name: "createdAt[$lte]", label: "Created to", section: "Date range", type: "date" },
        ]}
        exportIds={rows.map((row) => row.id)}
        exportRows={rows.map((row) => ({
          Name: row.name,
          "RFID Code": row.rfidCode,
          "Parent Group": row.parentGroupName || "—",
          Status: row.active ? "Active" : "Inactive",
          User: row.userName || row.userId,
          "Created At": dateTime(row.createdAt),
        }))}
        createLabel="RFID card"
        onCreate={() => {
          setEditing(undefined);
          setDetailError("");
          setEditorOpen(true);
        }}
        onRefresh={onRefresh}
        refreshNotice="RFID cards refreshed from the server."
      />
      {(loadError || detailError) && (
        <p role="alert" className="px-5 pb-3 text-sm text-destructive">{loadError || detailError}</p>
      )}
      {loading && <p role="status" className="px-5 pb-3 text-sm text-muted-foreground">Loading RFID cards…</p>}
      {loadingDetail && <p role="status" className="sr-only">Loading RFID details…</p>}
      <div className="overflow-x-auto">
        <table className="data-table min-w-[980px]">
          <caption className="sr-only">RFID cards</caption>
          <thead>
            <tr>
              <SortHeading label="Name" value="name" />
              <SortHeading label="RFID Code" value="rfid_code" />
              <th>Parent RFID / Group</th>
              <SortHeading label="Status" value="active" />
              <th>User</th>
              <SortHeading label="Created" value="created_at" />
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((row) => (
              <tr key={row.id}>
                <td className="min-w-48 font-medium">{row.name || "—"}</td>
                <td className="font-mono text-sm">{row.rfidCode || "—"}</td>
                <td>{row.parentGroupName || "—"}</td>
                <td>
                  <StatusBadge tone={row.active ? "success" : "neutral"}>
                    {row.active ? "Active" : "Inactive"}
                  </StatusBadge>
                </td>
                <td>{row.userName || row.userId || "—"}</td>
                <td className="whitespace-nowrap">{dateTime(row.createdAt)}</td>
                <td>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon-sm" aria-label={`Actions for ${row.name}`} disabled={loadingDetail}>
                        <MoreHorizontal />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onSelect={() => void openEdit(row)}>
                        <Pencil /> Edit
                      </DropdownMenuItem>
                      <DropdownMenuItem variant="destructive" onSelect={() => setDeleting(row)}>
                        <Trash2 /> Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {!rows.length && !loading && (
          <EmptyState
            title={loadError ? "RFID cards are unavailable" : "No RFID cards found"}
            description={loadError ? "The RFID service could not return this list." : "Try a different search or clear the filters."}
          />
        )}
      </div>
      <PaginationControls pagination={pagination} />
      {editorOpen && (
        <RfidCardEditorDialog
          key={editing?.id ?? "new-card"}
          open
          onOpenChange={setEditorOpen}
          record={editing}
          groups={groups}
          options={options}
          onSave={async (values) => editing ? onUpdate(editing.id, values) : onCreate(values)}
        />
      )}
      {deleting && (
        <RfidDeleteDialog
          open
          onOpenChange={(open) => {
            if (!open) setDeleting(undefined);
          }}
          itemName={deleting.name}
          itemType="RFID card"
          onConfirm={() => onDelete(deleting.id)}
        />
      )}
    </section>
  );
}