"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 { RfidDeleteDialog, RfidGroupEditorDialog } from "./rfid-dialogs";
import type {
  RfidFormOptions,
  RfidGroupFormValues,
  RfidGroupRecord,
} from "./types";
import type { Pagination } from "@/lib/list-query";

export function RFIDGroupTab({
  records,
  organizations,
  defaultOrganizationCode,
  pagination,
  loading,
  loadError,
  onLoad,
  onCreate,
  onUpdate,
  onDelete,
  onRefresh,
}: {
  records: RfidGroupRecord[];
  organizations: RfidFormOptions["organizations"];
  defaultOrganizationCode: string;
  pagination: Pagination;
  loading: boolean;
  loadError?: string;
  onLoad(id: string): Promise<RfidGroupRecord | null>;
  onCreate(values: RfidGroupFormValues): Promise<boolean>;
  onUpdate(id: string, values: RfidGroupFormValues): Promise<boolean>;
  onDelete(id: string): Promise<boolean>;
  onRefresh(): void;
}) {
  const [editorOpen, setEditorOpen] = useState(false);
  const [editing, setEditing] = useState<RfidGroupRecord>();
  const [deleting, setDeleting] = useState<RfidGroupRecord>();
  const [loadingDetail, setLoadingDetail] = useState(false);
  const [detailError, setDetailError] = useState("");

  async function openEdit(record: RfidGroupRecord) {
    setLoadingDetail(true);
    setDetailError("");
    try {
      const detail = await onLoad(record.id);
      if (detail) {
        setEditing(detail);
        setEditorOpen(true);
      }
    } catch {
      setDetailError("Unable to load RFID group details. Please try again.");
    } finally {
      setLoadingDetail(false);
    }
  }

  return (
    <section className="panel overflow-hidden">
      <TableToolbar
        title="Group RFID"
        description="Organize RFID cards into groups."
        searchKey="group_name"
        searchPlaceholder="Search by group name..."
        fields={[
          {
            name: "organization_code",
            label: "Organization",
            section: "Group details",
            options: organizations.map(({ code, name }) => ({ value: code, label: name })),
          },
          {
            name: "active",
            label: "Status",
            section: "Group 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={records.map((record) => record.id)}
        exportRows={records.map((record) => ({
          "Group Name": record.groupName,
          Description: record.description || "—",
          Status: record.active ? "Active" : "Inactive",
          "RFID Count": record.rfidCount,
          "Created At": dateTime(record.createdAt),
          "Updated At": dateTime(record.updatedAt),
        }))}
        createLabel="RFID group"
        onCreate={() => {
          setEditing(undefined);
          setDetailError("");
          setEditorOpen(true);
        }}
        onRefresh={onRefresh}
        refreshNotice="RFID groups refreshed from the server."
        showExport={false}
      />
      {(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 groups…</p>}
      {loadingDetail && <p role="status" className="sr-only">Loading RFID group details…</p>}
      <div className="overflow-x-auto">
        <table className="data-table min-w-[920px]">
          <caption className="sr-only">RFID groups</caption>
          <thead>
            <tr>
              <SortHeading label="Group Name" value="group_name" />
              <th>Description</th>
              <SortHeading label="Status" value="active" />
              <th>RFID Count</th>
              <SortHeading label="Created" value="created_at" />
              <SortHeading label="Updated" value="updated_at" />
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {records.map((row) => (
              <tr key={row.id}>
                <td className="min-w-44 font-medium">{row.groupName || "—"}</td>
                <td className="min-w-64 max-w-sm truncate" title={row.description}>{row.description || "—"}</td>
                <td>
                  <StatusBadge tone={row.active ? "success" : "neutral"}>
                    {row.active ? "Active" : "Inactive"}
                  </StatusBadge>
                </td>
                <td>{row.rfidCount}</td>
                <td className="whitespace-nowrap">{dateTime(row.createdAt)}</td>
                <td className="whitespace-nowrap">{dateTime(row.updatedAt)}</td>
                <td>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon-sm" aria-label={`Actions for ${row.groupName}`} 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>
        {!records.length && !loading && (
          <EmptyState
            title={loadError ? "RFID groups are unavailable" : "No RFID groups found"}
            description={loadError ? "The RFID group service could not return this list." : "Try a different search or clear the filters."}
          />
        )}
      </div>
      <PaginationControls pagination={pagination} />
      {editorOpen && (
        <RfidGroupEditorDialog
          key={editing?.id ?? "new-group"}
          open
          onOpenChange={setEditorOpen}
          record={editing}
          organizations={organizations}
          defaultOrganizationCode={defaultOrganizationCode}
          onSave={async (values) => editing ? onUpdate(editing.id, values) : onCreate(values)}
        />
      )}
      {deleting && (
        <RfidDeleteDialog
          open
          onOpenChange={(open) => {
            if (!open) setDeleting(undefined);
          }}
          itemName={deleting.groupName}
          itemType="RFID group"
          onConfirm={() => onDelete(deleting.id)}
        />
      )}
    </section>
  );
}