"use client";

import { useRef, useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { FormField, SelectField } from "@/components/shared/form-field";
import { authorizationStatuses, maxLocalAuthorizationEntries } from "./local-list-contract.ts";

type Entry = { id: number; idTag: string; status: string };

export function LocalListFields({ invalidField }: { invalidField?: string }) {
  const [updateType, setUpdateType] = useState("Full");
  const [entries, setEntries] = useState<Entry[]>([{ id: 1, idTag: "", status: "Accepted" }]);
  const nextId = useRef(2);
  const field = (name: string) => ({ name, id: `operation-${name}`, "aria-invalid": invalidField === name, "aria-describedby": invalidField === name ? "operation-error" : undefined });
  const list = entries.map(entry => ({ idTag: entry.idTag, ...(entry.status === "Remove" ? {} : { idTagInfo: { status: entry.status } }) }));

  function changeEntry(id: number, values: Partial<Entry>) {
    setEntries(current => current.map(entry => entry.id === id ? { ...entry, ...values } : entry));
  }

  return <div className="flex flex-col gap-4">
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField {...field("listVersion")} label="List version" type="number" required min={0} max={2_147_483_647} step={1} placeholder="e.g. 2" />
      <SelectField {...field("updateType")} label="Update type" required value={updateType} options={["Full", "Differential"]} onChange={event => {
        const type = event.target.value;
        setUpdateType(type);
        if (type === "Full") setEntries(current => current.map(entry => entry.status === "Remove" ? { ...entry, status: "Accepted" } : entry));
      }} />
    </div>
    <p className="text-sm text-muted-foreground">Read the current local list version before choosing the next version. {updateType === "Full" ? "Full replaces the entire local authorization list." : "Differential changes only the ID tags included below."}</p>
    <div className="flex items-center justify-between gap-3">
      <h3 className="text-sm font-semibold">Authorization entries <span className="font-normal text-muted-foreground">({entries.length})</span></h3>
      <Button type="button" variant="outline" size="sm" disabled={entries.length >= maxLocalAuthorizationEntries} onClick={() => {
        const id = nextId.current++;
        setEntries(current => [...current, { id, idTag: "", status: "Accepted" }]);
      }}><Plus aria-hidden="true" />Add ID tag</Button>
    </div>
    <input type="hidden" name="localAuthorizationList" value={JSON.stringify(list)} />
    <div className="flex flex-col gap-3" tabIndex={-1} data-operation-field="localAuthorizationList">
      {entries.map((entry, index) => <div key={entry.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-3 rounded-lg border bg-muted/20 p-3">
        <div className="grid gap-3 sm:grid-cols-2">
          <FormField id={`local-tag-${entry.id}`} label={`ID tag ${index + 1}`} required maxLength={20} value={entry.idTag} placeholder="RFID / ID tag" autoComplete="off" aria-invalid={invalidField === "localAuthorizationList"} aria-describedby={invalidField === "localAuthorizationList" ? "operation-error" : undefined} onChange={event => changeEntry(entry.id, { idTag: event.target.value })} />
          <SelectField id={`local-status-${entry.id}`} label={`Status ${index + 1}`} value={entry.status} options={[
            ...authorizationStatuses.map(value => ({ value, label: value === "ConcurrentTx" ? "Concurrent transaction" : value })),
            ...(updateType === "Differential" ? [{ value: "Remove", label: "Remove ID tag" }] : []),
          ]} onChange={event => changeEntry(entry.id, { status: event.target.value })} />
        </div>
        <Button type="button" variant="ghost" size="icon" aria-label={`Remove ID tag ${index + 1}`} onClick={() => setEntries(current => current.filter(row => row.id !== entry.id))}><Trash2 aria-hidden="true" className="size-4 text-muted-foreground" /></Button>
      </div>)}
    </div>
    {!entries.length && <p className="rounded-lg border border-warning/25 bg-warning/5 p-3 text-sm">{updateType === "Full" ? "Sending this empty Full list will clear the charger’s local authorization list." : "This Differential request contains no changes. Add an ID tag to update or remove."}</p>}
    <p className="text-xs text-muted-foreground">ID tags support up to 20 characters. Up to {maxLocalAuthorizationEntries} entries per request; the charger also enforces its supported list size.</p>
  </div>;
}