import Link from "next/link";
import { StatusBadge } from "@/components/shared/status-badge";
import type { DlmOperation } from "./types";

export function DlmOperationResult({ result, completedAt }: { result: DlmOperation; completedAt?: string }) {
  const apply = result.action === "apply";
  const notApplied = result.allocations.filter(row => !row.applied).length;
  const missing = Math.max(0, result.activeConnectors - result.allocations.length);
  return <section aria-label={apply ? "Apply results" : "Evaluation results"} className="mt-5 space-y-4 rounded-xl border bg-muted/20 p-4 md:p-5">
    <div className="flex flex-wrap items-start justify-between gap-2"><div><h3 className="font-semibold">{apply ? "Apply results" : "Evaluation results"}</h3><p className="mt-1 text-xs leading-relaxed text-muted-foreground">{apply ? "Application status is reported by the backend. Check charger logs for device acknowledgement." : "Evaluation saved in the backend. Use Apply to send the latest configuration."}</p></div>{completedAt && <time dateTime={completedAt} className="text-xs text-muted-foreground">{new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit", timeZone: "Asia/Jakarta" }).format(new Date(completedAt))} WIB</time>}</div>
    <div className="grid gap-3 sm:grid-cols-3">{[{ label: "Available site power", value: `${result.availablePowerKw} kW` }, { label: "Active connectors reported", value: String(result.activeConnectors) }, { label: "Allocation results", value: String(result.allocations.length) }].map(item => <div key={item.label} className="rounded-lg border bg-card p-3"><p className="text-xs text-muted-foreground">{item.label}</p><p className="mt-1 font-semibold tabular-nums">{item.value}</p></div>)}</div>
    {apply && notApplied > 0 && <p role="alert" className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive">{notApplied} {notApplied === 1 ? "limit was" : "limits were"} not applied. Check the charger status and logs before retrying.</p>}
    {missing > 0 && <p role="status" className="text-sm text-muted-foreground">The backend did not return an allocation row for {missing} active {missing === 1 ? "connector" : "connectors"}. Their application status is unavailable.</p>}
    {!result.allocations.length ? <p className="py-3 text-sm text-muted-foreground">{apply ? "No connector allocations were returned. No successful connector application can be confirmed from this result." : "No connector allocations were returned for this evaluation."}</p> : <div className="overflow-x-auto rounded-lg border bg-card"><table className="data-table min-w-[640px]"><caption className="sr-only">Connector power allocation results</caption><thead><tr><th scope="col">Chargepoint</th><th scope="col">Connector</th><th scope="col">Measured</th><th scope="col">Allocated</th><th scope="col">Result</th></tr></thead><tbody>{result.allocations.map(row => <tr key={row.connectorId}><td><Link href={`/chargepoints/${row.chargepointId}?tab=logs`} className="font-medium hover:underline underline-offset-4">{row.ocppIdentity}</Link></td><td>{row.connectorNumber}</td><td className="whitespace-nowrap tabular-nums">{row.measuredPowerKw} kW</td><td className="whitespace-nowrap font-medium tabular-nums">{row.allocatedPowerKw} kW</td><td><StatusBadge tone={apply ? row.applied ? "success" : "danger" : "neutral"}>{apply ? row.applied ? "Applied (reported)" : "Not applied" : "Evaluated"}</StatusBadge></td></tr>)}</tbody></table></div>}
  </section>;
}