"use client";
import { buttonClass } from "@/components/ui/button";

import Link from "next/link";
import { useState } from "react";
import { Badge, Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { StatusLine, useRun } from "@/components/features/accounts/use-run";
import { createPanelLocationAction, deletePanelLocationAction, updatePanelLocationAction } from "@/lib/actions/platform";
import { LOCATION_PLACEMENTS, PLACEMENT_LABELS, type LocationPlacement } from "@/lib/public/panel-positions";

export interface LocationRow { id: string; key: string; name: string; description: string; placement: LocationPlacement; siteIds: string[] | null; active: boolean; panels: number }
export interface SiteOption { id: string; name: string; organization: string }

interface Draft { name: string; description: string; placement: LocationPlacement; all: boolean; siteIds: string[]; active: boolean }
const blank: Draft = { name: "", description: "", placement: "below-content", all: true, siteIds: [], active: true };

function SitePicker({ id, sites, draft, set }: { id: string; sites: SiteOption[]; draft: Draft; set: (d: Draft) => void }) {
  return (
    <fieldset className="space-y-2">
      <legend className="text-xs font-medium">Websites that can use this location</legend>
      <label className="flex items-center gap-2 text-sm"><input type="radio" name={`${id}-scope`} checked={draft.all} onChange={() => set({ ...draft, all: true })} />All websites (including ones added later)</label>
      <label className="flex items-center gap-2 text-sm"><input type="radio" name={`${id}-scope`} checked={!draft.all} onChange={() => set({ ...draft, all: false })} />Only the websites I choose</label>
      {!draft.all ? (
        <ul className="max-h-48 space-y-1 overflow-auto rounded-md border border-border p-2">
          {sites.map((s) => (
            <li key={s.id}>
              <label className="flex items-center gap-2 text-sm">
                <input type="checkbox" checked={draft.siteIds.includes(s.id)} onChange={(e) => set({ ...draft, siteIds: e.target.checked ? [...draft.siteIds, s.id] : draft.siteIds.filter((x) => x !== s.id) })} />
                {s.name}<span className="text-xs text-muted-foreground">· {s.organization}</span>
              </label>
            </li>
          ))}
        </ul>
      ) : null}
    </fieldset>
  );
}

function Form({ id, sites, draft, set }: { id: string; sites: SiteOption[]; draft: Draft; set: (d: Draft) => void }) {
  return (
    <div className="grid gap-4 md:grid-cols-2">
      <Field id={`${id}-name`} label="Location name"><input id={`${id}-name`} value={draft.name} maxLength={80} onChange={(e) => set({ ...draft, name: e.target.value })} className={inputClass} placeholder="e.g. Sidebar banner" /></Field>
      <Field id={`${id}-placement`} label="Where it shows on the page">
        <select id={`${id}-placement`} value={draft.placement} onChange={(e) => set({ ...draft, placement: e.target.value as LocationPlacement })} className={inputClass}>
          {LOCATION_PLACEMENTS.map((p) => <option key={p} value={p}>{PLACEMENT_LABELS[p]}</option>)}
        </select>
      </Field>
      <Field id={`${id}-desc`} label="Help text for admins (optional)"><input id={`${id}-desc`} value={draft.description} maxLength={255} onChange={(e) => set({ ...draft, description: e.target.value })} className={inputClass} /></Field>
      <label className="flex items-center gap-2 self-end pb-2 text-sm"><input type="checkbox" checked={draft.active} onChange={(e) => set({ ...draft, active: e.target.checked })} />Available to admins</label>
      <div className="md:col-span-2"><SitePicker id={id} sites={sites} draft={draft} set={set} /></div>
    </div>
  );
}

const toInput = (d: Draft) => ({ name: d.name, description: d.description, placement: d.placement, siteIds: d.all ? null : d.siteIds, active: d.active });

export function LocationsManager({ locations, sites }: { locations: LocationRow[]; sites: SiteOption[] }) {
  const { pending, msg, errors, run } = useRun();
  const [draft, setDraft] = useState<Draft>(blank);
  const [editing, setEditing] = useState<{ id: string; draft: Draft } | null>(null);
  const [confirm, setConfirm] = useState<string | null>(null);
  const siteName = (id: string) => sites.find((s) => s.id === id)?.name ?? "removed website";

  return (
    <div className="space-y-4">
      <Card className="p-4">
        <h2 className="mb-3 text-sm font-semibold">Add a panel location</h2>
        <form onSubmit={(e) => { e.preventDefault(); run(() => createPanelLocationAction(toInput(draft)), () => setDraft(blank)); }} className="space-y-3">
          <Form id="new-loc" sites={sites} draft={draft} set={setDraft} />
          {errors.name ? <p role="alert" className="text-sm text-danger">{errors.name}</p> : null}
          <Button type="submit" disabled={pending || draft.name.trim().length < 2 || (!draft.all && draft.siteIds.length === 0)}>Add location</Button>
        </form>
      </Card>
      <StatusLine msg={msg} />
      <Card className="p-4">
        <h2 className="mb-1 text-sm font-semibold">Your locations</h2>
        <p className="mb-3 text-xs text-muted-foreground">Header, Hero, Footer and Popup are built in and always available. Locations below appear in the Panels screen of each website that has access, and their panels show on that website&apos;s pages.</p>
        {locations.length === 0 ? <p className="text-sm text-muted-foreground">No custom locations yet.</p> : (
          <ul className="divide-y divide-border">
            {locations.map((l) => {
              const open = editing?.id === l.id;
              return (
                <li key={l.id} className="py-3">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="font-medium">{l.name}</span>
                    <span className="font-mono text-xs text-muted-foreground">{l.key}</span>
                    <Badge tone={l.active ? "success" : "neutral"}>{l.active ? "available" : "off"}</Badge>
                    <span className="text-xs text-muted-foreground">{PLACEMENT_LABELS[l.placement]} · {l.siteIds === null ? "all websites" : l.siteIds.map(siteName).join(", ") || "no websites"} · {l.panels} panel{l.panels === 1 ? "" : "s"}</span>
                    <span className="ml-auto flex gap-1">
                      <Link href={`/dashboard/panel-locations/${l.key}`} className={buttonClass("secondary")}>Edit</Link>
                      {confirm === l.id ? (
                        <>
                          <Button variant="danger" disabled={pending} onClick={() => run(() => deletePanelLocationAction(l.id), () => setConfirm(null))}>Confirm delete</Button>
                          <Button variant="ghost" onClick={() => setConfirm(null)}>Cancel</Button>
                        </>
                      ) : <Button variant="ghost" onClick={() => setConfirm(l.id)}>Delete</Button>}
                    </span>
                  </div>
                  {open && editing ? (
                    <form className="mt-3 space-y-3 rounded-md bg-muted/40 p-3" onSubmit={(e) => { e.preventDefault(); run(() => updatePanelLocationAction(l.id, toInput(editing.draft)), () => setEditing(null)); }}>
                      <Form id={`loc-${l.id}`} sites={sites} draft={editing.draft} set={(d) => setEditing({ id: l.id, draft: d })} />
                      <Button type="submit" disabled={pending || editing.draft.name.trim().length < 2 || (!editing.draft.all && editing.draft.siteIds.length === 0)}>Save location</Button>
                    </form>
                  ) : null}
                </li>
              );
            })}
          </ul>
        )}
      </Card>
    </div>
  );
}