import { CheckCircle2, CircleAlert, Info } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CommandResult as Result } from "./contract.ts";
import { dateTime } from "@/lib/format";

export function CommandResult({ result, preview }: { result: Result; preview: boolean }) {
  const Icon = result.accepted === true ? CheckCircle2 : result.accepted === false ? CircleAlert : Info;
  const title = preview ? "Preview complete" : result.status ?? (result.localListVersion !== undefined ? "Local list version received" : "Response received");
  return <div className="flex flex-col gap-4">
    <div role={result.accepted === false ? "alert" : "status"} className={cn("flex gap-3 rounded-lg border p-4", result.accepted === true ? "border-success/25 bg-success/10" : result.accepted === false ? "border-destructive/25 bg-destructive/10" : "border-border bg-muted/40")}>
      <Icon aria-hidden="true" className={cn("mt-0.5 size-5 shrink-0", result.accepted === true ? "text-success" : result.accepted === false ? "text-destructive" : "text-muted-foreground")} />
      <div><p className="font-semibold">{title}</p><p className="mt-1 text-sm text-muted-foreground">{preview ? "Inputs were validated. No command was sent to a device." : result.status === "VersionMismatch" ? "The charger rejected the list version. Read its current local list version before preparing another update." : result.status === "NotFound" ? "The requested certificate was not found on the charger." : result.accepted === false ? "The chargepoint did not accept this operation. Review the response before trying again." : result.status === "RebootRequired" ? "The change was accepted and the charger reports that a restart is required." : result.accepted === true ? "The charger accepted the request. Check Logs for subsequent device events." : "Response received. Review the details and check Logs for subsequent device events."}</p></div>
    </div>
    {result.localListVersion !== undefined && <div className="rounded-lg border bg-card p-4"><p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Local authorization list version</p><p className="mt-2 text-2xl font-semibold tabular-nums">{result.localListVersion}</p><p className="mt-1 text-sm text-muted-foreground">{result.localListVersion === -1 ? "The charger reports that it does not support a local authorization list." : "Use this version when preparing the next local list update."}</p></div>}
    {result.configuration && <div className="overflow-x-auto rounded-lg border">
      <table className="data-table min-w-[440px]"><caption className="sr-only">Configuration returned by the chargepoint</caption><thead><tr><th>Key</th><th>Value</th><th>Access</th></tr></thead><tbody>{result.configuration.map((row, index) => <tr key={`${row.key}-${index}`}><td className="font-medium">{row.key}</td><td className="max-w-64 break-all">{row.value || "—"}</td><td>{row.readonly ? "Read only" : "Editable"}</td></tr>)}</tbody></table>
      {!result.configuration.length && <p className="p-4 text-sm text-muted-foreground">No configuration keys were returned.</p>}
    </div>}
    {result.compositeSchedule && <section className="space-y-3 rounded-lg border p-4" aria-label="Composite charging schedule">
      <div className="flex flex-wrap justify-between gap-2"><h3 className="text-sm font-semibold">Combined charging limits</h3><span className="text-xs text-muted-foreground">Connector {result.compositeSchedule.connectorId}</span></div>
      <p className="text-xs text-muted-foreground">Starts {dateTime(result.compositeSchedule.start)}{result.compositeSchedule.duration !== undefined ? ` · ${result.compositeSchedule.duration.toLocaleString()} seconds` : ""}</p>
      <div className="overflow-x-auto"><table className="data-table w-full"><caption className="sr-only">Combined schedule periods</caption><thead><tr><th>Starts after</th><th>Limit ({result.compositeSchedule.unit})</th></tr></thead><tbody>{result.compositeSchedule.periods.map(period => <tr key={period.start}><td>{period.start.toLocaleString()} s</td><td>{period.limit.toLocaleString(undefined, { maximumFractionDigits: 3 })} {result.compositeSchedule?.unit}</td></tr>)}</tbody></table></div>
    </section>}
    <details className="rounded-lg border px-4 py-3"><summary className="cursor-pointer text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">Response details</summary><pre className="mt-3 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-md bg-muted/50 p-3 text-xs leading-relaxed">{JSON.stringify(result.data, null, 2)}</pre></details>
  </div>;
}