"use client";

import { useRef, useState } from "react";
import { Plus, Trash2 } from "lucide-react";
import { FormField, SelectField } from "@/components/shared/form-field";
import { Button } from "@/components/ui/button";
import { chargingProfilePurposes, maxSchedulePeriods } from "./charging-profile-contract.ts";

type Period = { id: number; startPeriod: string; limit: string };
export const purposeOptions = chargingProfilePurposes.map(value => ({ value, label: value === "ChargePointMaxProfile" ? "Chargepoint maximum" : value === "TxDefaultProfile" ? "Default for transactions" : "Specific transaction" }));
const rateOptions = [{ value: "A", label: "Amperes (A)" }, { value: "W", label: "Watts (W)" }];

export function ChargingProfileFields({ invalidField, defaultConnector }: { invalidField?: string; defaultConnector?: number }) {
  const [purpose, setPurpose] = useState("TxDefaultProfile");
  const [kind, setKind] = useState("Absolute");
  const [unit, setUnit] = useState("A");
  const [periods, setPeriods] = useState<Period[]>([{ id: 1, startPeriod: "0", limit: "" }]);
  const nextId = useRef(2);
  const field = (name: string) => ({ name, id: `operation-${name}`, "aria-invalid": invalidField === name, "aria-describedby": invalidField === name ? "operation-error" : undefined });
  const recurring = kind === "Recurring";
  const changePeriod = (id: number, update: Partial<Period>) => setPeriods(current => current.map(period => period.id === id ? { ...period, ...update } : period));
  return <div className="flex flex-col gap-5">
    <div className="grid gap-4 sm:grid-cols-2">
      <SelectField {...field("chargingProfilePurpose")} label="Profile purpose" value={purpose} options={purposeOptions} onChange={event => setPurpose(event.target.value)} required />
      <SelectField {...field("chargingProfileKind")} label="Profile kind" value={kind} options={[{ value: "Absolute", label: "Absolute — one schedule" }, { value: "Recurring", label: "Recurring — daily" }]} onChange={event => setKind(event.target.value)} required />
    </div>
    <p className="-mt-2 text-sm text-muted-foreground">{purpose === "ChargePointMaxProfile" ? "Limits the combined charging power of the entire chargepoint." : purpose === "TxDefaultProfile" ? "Sets the default charging limits for transactions on the selected connector. Connector 0 applies to all connectors." : "Applies charging limits to a specific active OCPP transaction."}</p>
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField {...field("chargingProfileId")} label="Profile ID" type="number" required min={0} max={2_147_483_647} step={1} placeholder="e.g. 1001" />
      <FormField key={unit} {...field("stackLevel")} label="Stack level" type="number" required min={0} max={2_147_483_647} step={1} defaultValue={0} readOnly={unit === "A"} />
      {purpose !== "ChargePointMaxProfile" && <FormField key={purpose} {...field("connectorId")} label="Connector number" type="number" min={purpose === "TxProfile" ? 1 : 0} max={2_147_483_647} step={1} required defaultValue={defaultConnector ?? 1} />}
      {purpose === "TxProfile" && <FormField {...field("transactionId")} label="OCPP transaction ID" type="number" min={-2_147_483_648} max={2_147_483_647} step={1} required placeholder="From the active session" />}
    </div>
    <section className="space-y-4 rounded-xl border bg-muted/20 p-4" aria-label="Charging schedule">
      <div className="flex flex-wrap items-center justify-between gap-2"><h3 className="text-sm font-semibold">Charging schedule</h3>{recurring && <span className="rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">Repeats daily</span>}</div>
      <div className="grid gap-4 sm:grid-cols-2">
        <SelectField {...field("chargingRateUnit")} label="Limit unit" value={unit} options={rateOptions} onChange={event => setUnit(event.target.value)} required />
        <FormField {...field("duration")} label={recurring ? "Daily duration (seconds)" : "Duration (seconds, optional)"} type="number" min={1} max={recurring ? 86_400 : 2_147_483_647} step={1} required={recurring} placeholder="e.g. 3600 for 1 hour" />
        <FormField {...field("startSchedule")} label={recurring ? "Schedule starts" : "Schedule starts (optional)"} type="datetime-local" step={1} required={recurring} className="sm:col-span-2" />
        <FormField {...field("validFrom")} label={recurring ? "Valid from" : "Valid from (optional)"} type="datetime-local" step={1} required={recurring} />
        <FormField {...field("validTo")} label={recurring ? "Valid to" : "Valid to (optional)"} type="datetime-local" step={1} required={recurring} />
      </div>
      <p className="text-xs leading-relaxed text-muted-foreground">{recurring ? "The limits repeat every day from the schedule start time for the specified duration, within the validity dates. " : "Set a start time and validity dates when the profile needs a specific window. "}Times use your browser’s local timezone and are sent with an explicit timezone. Ampere profiles use stack level 0.</p>
    </section>
    <div className="flex flex-wrap items-center justify-between gap-2"><h3 className="text-sm font-semibold">Charging limits</h3><Button type="button" variant="outline" size="sm" disabled={periods.length >= maxSchedulePeriods} onClick={() => { const id = nextId.current++; setPeriods(current => [...current, { id, startPeriod: "", limit: "" }]); }}><Plus aria-hidden="true" />Add period</Button></div>
    <input type="hidden" name="chargingSchedulePeriod" value={JSON.stringify(periods.map(({ startPeriod, limit }) => ({ startPeriod, limit })))} />
    <div className="space-y-3" tabIndex={-1} data-operation-field="chargingSchedulePeriod" aria-invalid={invalidField === "chargingSchedulePeriod"} aria-describedby={invalidField === "chargingSchedulePeriod" ? "operation-error" : undefined}>
      {periods.map((period, index) => <div key={period.id} className="grid grid-cols-[minmax(0,1fr)_auto] items-end gap-2 rounded-lg border p-3">
        <div className="grid gap-3 sm:grid-cols-2">
          <FormField id={`period-start-${period.id}`} label={`Period ${index + 1} starts (seconds)`} type="number" min={0} max={2_147_483_647} step={1} required readOnly={index === 0} value={period.startPeriod} onChange={event => changePeriod(period.id, { startPeriod: event.target.value })} />
          <FormField id={`period-limit-${period.id}`} label={`Limit (${unit})`} type="number" min={0} step={0.1} required value={period.limit} onChange={event => changePeriod(period.id, { limit: event.target.value })} />
        </div>
        <Button type="button" variant="ghost" size="icon" disabled={index === 0} aria-label={`Remove period ${index + 1}`} onClick={() => setPeriods(current => current.filter(row => row.id !== period.id))}><Trash2 aria-hidden="true" className="size-4" /></Button>
      </div>)}
    </div>
    <p className="-mt-2 text-xs text-muted-foreground">Offsets are seconds after each schedule start. The first period starts at 0. Each following period replaces the previous limit; 0 {unit} suspends power delivery.</p>
  </div>;
}

export function CompositeScheduleFields({ invalidField, defaultConnector }: { invalidField?: string; defaultConnector?: number }) {
  const field = (name: string) => ({ name, id: `operation-${name}`, "aria-invalid": invalidField === name, "aria-describedby": invalidField === name ? "operation-error" : undefined });
  return <div className="space-y-4">
    <div className="grid gap-4 sm:grid-cols-2"><FormField {...field("connectorId")} label="Connector number" type="number" min={0} max={2_147_483_647} step={1} required defaultValue={defaultConnector ?? 1} /><FormField {...field("duration")} label="Duration (seconds)" type="number" min={1} max={2_147_483_647} step={1} required defaultValue={3600} /></div>
    <SelectField {...field("chargingRateUnit")} label="Limit unit" options={[{ value: "", label: "Charger default" }, ...rateOptions]} defaultValue="A" />
    <p className="text-sm text-muted-foreground">Read the combined schedule produced by the charger’s active profiles. Connector 0 requests the chargepoint’s combined schedule.</p>
  </div>;
}

export function ClearChargingProfileFields({ invalidField, onScopeChange }: { invalidField?: string; onScopeChange?: (value: string) => void }) {
  const [scope, setScope] = useState("filtered");
  const field = (name: string) => ({ name, id: `operation-${name}`, "aria-invalid": invalidField === name, "aria-describedby": invalidField === name ? "operation-error" : undefined });
  return <div className="space-y-4" onChange={event => {
    const target = event.target;
    if (target instanceof HTMLInputElement || target instanceof HTMLSelectElement) onScopeChange?.(`${target.name}:${target.value}`);
  }}>
    <SelectField {...field("scope")} label="Profiles to clear" value={scope} options={[{ value: "filtered", label: "Matching profiles" }, { value: "id", label: "Specific profile ID" }, { value: "all", label: "All profiles on this chargepoint" }]} onChange={event => setScope(event.target.value)} />
    {scope === "all" ? <p className="rounded-lg border border-warning/25 bg-warning/5 p-3 text-sm">This removes all charging profiles from this chargepoint and can change its charging limits.</p> : scope === "id" ? <>
      <FormField {...field("id")} label="Profile ID" type="number" min={0} max={2_147_483_647} step={1} required />
      <p className="text-sm text-muted-foreground">Clears this profile ID on the chargepoint. Confirm the ID before sending.</p>
    </> : <>
      <p className="text-sm text-muted-foreground">Set at least one filter. When several filters are set, the charger clears profiles matching them together.</p>
      <div className="grid gap-4 sm:grid-cols-2"><FormField {...field("connectorId")} label="Connector number (optional)" type="number" min={0} max={2_147_483_647} step={1} /><SelectField {...field("chargingProfilePurpose")} label="Purpose (optional)" defaultValue="" options={[{ value: "", label: "Any purpose" }, ...purposeOptions]} /><FormField {...field("stackLevel")} label="Stack level (optional)" type="number" min={0} max={2_147_483_647} step={1} /></div>
    </>}
  </div>;
}