import { useCallback, useEffect, useRef, useState } from 'react';
import { GripVertical, Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useClient } from 'hooks/useClient';
import { readableError } from '../errors';
import { useFlash } from '../useFlash';
import { useSaveTarget } from '../SaveTarget';

/**
 * The shell every page renders inside: the menu, the footer, the colours and the typefaces.
 *
 * ── Why this is the first section now ──
 *
 * The admin was one section per page — Home, About, Gallery, Drops — because the site's pages were a
 * constant in a file. They are becoming something somebody builds, so a nav that enumerates them is a
 * nav that has to be edited by a developer every time the client adds a page. Layout is what is left
 * once you take the pages out: the part of every page that is not the page.
 *
 * ── The preview is the point ──
 *
 * It draws the menu across the top, a body, and the footer at the bottom, in the chosen colours and
 * typefaces. That is the same principle the header editor already follows — the admin renders the
 * structure as the page will show it, so what is arranged is what is published.
 *
 * It is a SKETCH and says so: the real page has a logo, a rule, a specific measure. Drawing those here
 * would be a second implementation of the layout, and the two would drift the first time either
 * changed. What it is honest about is the thing being decided — order, wording, colour, typeface.
 */

type LayoutLink = { label: string; href: string };
type FooterColumn = { title: string; links: LayoutLink[] };

type Layout = {
  menu_items: LayoutLink[];
  footer_columns: FooterColumn[];
  footer_note: string | null;
  background: string | null;
  foreground: string | null;
  accent: string | null;
  font_body: string | null;
  font_sub: string | null;
  font_title: string | null;
  font_display: string | null;
  /** What the picker may offer — sent by the API so this file holds no third copy of the list. */
  fonts: string[];
  /** The pages that exist, for the menu's href suggestions. */
  pages: { path: string; label: string }[];
};

/** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */
const ROLES = [
  { key: 'font_title' as const, label: 'Headings', hint: 'Page and section titles' },
  { key: 'font_body' as const, label: 'Body', hint: 'Paragraphs and most text' },
  { key: 'font_sub' as const, label: 'Menu', hint: 'The navigation and small labels' },
  { key: 'font_display' as const, label: 'Display', hint: 'The largest statements' },
];

const COLOURS = [
  { key: 'background' as const, label: 'Background', fallback: '#ffffff' },
  { key: 'foreground' as const, label: 'Text', fallback: '#000000' },
  { key: 'accent' as const, label: 'Accent', fallback: '#000000' },
];

export const LayoutPanel = () => {
  const client = useClient();
  const clientRef = useRef(client);
  clientRef.current = client;

  const [stored, setStored] = useState<Layout | null>(null);
  const [draft, setDraft] = useState<Layout | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [saved, flashSaved] = useFlash();

  const apply = useCallback((data: Layout) => {
    setStored(data);
    setDraft(data);
  }, []);

  const load = useCallback(async () => {
    try {
      apply((await clientRef.current.get<{ data: Layout }>('/fofos-admin/layout')).data);
    } catch (failure) {
      setError(readableError(failure));
    }
  }, [apply]);

  useEffect(() => {
    void load();
  }, [load]);

  const patch = (values: Partial<Layout>) => setDraft((was) => (was ? { ...was, ...values } : was));

  /*
    Compared field by field rather than whole, because the payload carries two things this does not
    own: `fonts` and `pages` are the API telling the client what exists, not values anybody edits.
    Including them would be harmless today and wrong the first time a page is added — the panel would
    show unsaved changes for a page somebody else created.
  */
  const WRITABLE = [
    'menu_items',
    'footer_columns',
    'footer_note',
    'background',
    'foreground',
    'accent',
    'font_body',
    'font_sub',
    'font_title',
    'font_display',
  ] as const;

  const only = (source: Layout | null) =>
    source ? JSON.stringify(Object.fromEntries(WRITABLE.map((key) => [key, source[key]]))) : null;

  const dirty = Boolean(stored && draft) && only(stored) !== only(draft);

  const save = async () => {
    if (!draft) return;
    setBusy(true);
    setError(null);
    try {
      const body = Object.fromEntries(WRITABLE.map((key) => [key, draft[key]]));
      apply((await clientRef.current.patch<{ data: Layout }>('/fofos-admin/layout', body)).data);
      flashSaved();
    } catch (failure) {
      setError(readableError(failure));
    } finally {
      setBusy(false);
    }
  };

  useSaveTarget(dirty, busy, save);

  if (!draft) return <div className="p-4 text-xs text-muted-foreground">{error ?? 'Loading…'}</div>;

  const menu = draft.menu_items;
  const setMenu = (items: LayoutLink[]) => patch({ menu_items: items });

  const columns = draft.footer_columns;
  const setColumns = (next: FooterColumn[]) => patch({ footer_columns: next });

  /** Falls back to what the page itself falls back to, so the sketch is not a different design. */
  const bg = draft.background ?? '#ffffff';
  const fg = draft.foreground ?? '#000000';

  return (
    <div className="flex size-full flex-col gap-4 overflow-auto p-4">
      {saved && <p className="text-xs text-success">Saved</p>}
      {error && <p className="text-xs text-destructive">{error}</p>}

      {/* ── The sketch ───────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-2">
        <div
          className="overflow-hidden rounded-lg border border-border"
          style={{ backgroundColor: bg, color: fg }}
        >
          {/* The menu, in the order it will appear, in the face chosen for it. */}
          <div
            className="flex flex-wrap items-center justify-center gap-x-5 gap-y-1 border-b px-4 py-3 text-[11px]"
            style={{ borderColor: fg, fontFamily: draft.font_sub ?? undefined }}
          >
            {/* The menu when there is one, the site's own pages when there is not — the same fallback
                the page itself applies, so the sketch never shows a menu the site would not draw. */}
            {(menu.length ? menu : draft.pages.map((page) => ({ label: page.label, href: page.path }))).map(
              (item, index) => (
                <span key={index}>{item.label}</span>
              ),
            )}
            {!menu.length && !draft.pages.length && <span className="opacity-40">No menu yet</span>}
          </div>

          {/* The body. Deliberately empty: what goes here is the page, and the page is what this
              section is NOT about. Its only job is to give the two bands something between them. */}
          <div className="px-4 py-10 text-center" style={{ fontFamily: draft.font_title ?? undefined }}>
            <p className="text-lg">The page</p>
            <p className="mt-1 text-[11px] opacity-50" style={{ fontFamily: draft.font_body ?? undefined }}>
              Whatever is built for it goes here
            </p>
          </div>

          {/* The footer, with the columns as they will fall. */}
          <div className="border-t px-4 py-4" style={{ borderColor: fg }}>
            {columns.length ? (
              <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
                {columns.map((column, index) => (
                  <div key={index}>
                    {column.title && (
                      <p className="mb-1 text-[11px]" style={{ fontFamily: draft.font_sub ?? undefined }}>
                        {column.title}
                      </p>
                    )}
                    {column.links.map((link, i) => (
                      <p key={i} className="text-[11px] opacity-70">
                        {link.label}
                      </p>
                    ))}
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-[11px] opacity-40">No footer columns yet</p>
            )}
            {draft.footer_note && <p className="mt-3 text-[10px] opacity-60">{draft.footer_note}</p>}
          </div>
        </div>
      </section>

      {/* ── Menu ─────────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <div className="flex items-baseline justify-between">
          <h3 className="text-sm font-medium">Menu</h3>
          {!menu.length && (
            <span className="text-xs text-muted-foreground">Showing the site&rsquo;s own pages</span>
          )}
        </div>

        {menu.map((item, index) => (
          <LinkRow
            key={index}
            item={item}
            pages={draft.pages}
            onChange={(next) => setMenu(menu.map((was, i) => (i === index ? next : was)))}
            onRemove={() => setMenu(menu.filter((_, i) => i !== index))}
            onMove={(by) => setMenu(moved(menu, index, by))}
            first={index === 0}
            last={index === menu.length - 1}
          />
        ))}

        <div className="flex gap-2">
          <Button size="sm" variant="outline" onClick={() => setMenu([...menu, { label: '', href: '' }])} disabled={menu.length >= 12}>
            <Plus className="size-3.5" />
            Add item
          </Button>

          {/*
            Start from the site's own pages rather than from nothing.

            The menu falls back to them until somebody sets one, so the first edit is almost always
            "the pages, with one change". Typing all eight back in to make that change is the kind of
            small cruelty that makes people leave a panel alone.
          */}
          {!menu.length && draft.pages.length > 0 && (
            <Button
              size="sm"
              variant="ghost"
              onClick={() => setMenu(draft.pages.map((page) => ({ label: page.label, href: page.path })))}
            >
              Start from the current pages
            </Button>
          )}
        </div>
      </section>

      {/* ── Footer ───────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <h3 className="text-sm font-medium">Footer</h3>

        {columns.map((column, index) => (
          <div key={index} className="flex flex-col gap-2 rounded-md border border-border p-3">
            <div className="flex items-center gap-2">
              <Input
                value={column.title}
                placeholder="Column heading"
                className="min-w-0 flex-1"
                onChange={(event) =>
                  setColumns(columns.map((was, i) => (i === index ? { ...was, title: event.currentTarget.value } : was)))
                }
              />
              <Button
                size="sm"
                variant="ghost"
                className="size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive"
                onClick={() => setColumns(columns.filter((_, i) => i !== index))}
                title="Remove this column"
              >
                <Trash2 className="size-3.5" />
              </Button>
            </div>

            {column.links.map((link, i) => (
              <LinkRow
                key={i}
                item={link}
                pages={draft.pages}
                onChange={(next) =>
                  setColumns(
                    columns.map((was, c) =>
                      c === index ? { ...was, links: was.links.map((l, li) => (li === i ? next : l)) } : was,
                    ),
                  )
                }
                onRemove={() =>
                  setColumns(
                    columns.map((was, c) => (c === index ? { ...was, links: was.links.filter((_, li) => li !== i) } : was)),
                  )
                }
                onMove={(by) =>
                  setColumns(columns.map((was, c) => (c === index ? { ...was, links: moved(was.links, i, by) } : was)))
                }
                first={i === 0}
                last={i === column.links.length - 1}
              />
            ))}

            <Button
              size="sm"
              variant="ghost"
              className="self-start"
              onClick={() =>
                setColumns(
                  columns.map((was, c) => (c === index ? { ...was, links: [...was.links, { label: '', href: '' }] } : was)),
                )
              }
              disabled={column.links.length >= 12}
            >
              <Plus className="size-3.5" />
              Add link
            </Button>
          </div>
        ))}

        <Button
          size="sm"
          variant="outline"
          className="self-start"
          onClick={() => setColumns([...columns, { title: '', links: [] }])}
          disabled={columns.length >= 6}
        >
          <Plus className="size-3.5" />
          Add column
        </Button>

        <div className="flex flex-col gap-1">
          <label className="text-xs text-muted-foreground">The line at the very bottom</label>
          <Input
            value={draft.footer_note ?? ''}
            placeholder="© Fofos Fluffy Bastards"
            onChange={(event) => patch({ footer_note: event.currentTarget.value || null })}
          />
        </div>
      </section>

      {/* ── Colours ──────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <h3 className="text-sm font-medium">Colours</h3>

        <div className="flex flex-wrap gap-4">
          {COLOURS.map(({ key, label, fallback }) => (
            <div key={key} className="flex items-center gap-2">
              {/*
                The browser's own picker. It sits on the LEFT of a wide row here, which is the whole
                reason it works: the same control at the right-hand edge of this panel opened its popup
                off the side of the window. See OverlayEditor for the version that had to move.
              */}
              <input
                type="color"
                value={draft[key] ?? fallback}
                onChange={(event) => patch({ [key]: event.currentTarget.value } as Partial<Layout>)}
                className="size-8 shrink-0 cursor-pointer rounded border border-input bg-transparent p-0.5"
                title={label}
              />
              <div className="flex flex-col">
                <span className="text-xs">{label}</span>
                <button
                  type="button"
                  className="text-left text-[10px] text-muted-foreground hover:underline"
                  onClick={() => patch({ [key]: null } as Partial<Layout>)}
                >
                  {draft[key] ?? 'default'}
                </button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── Typefaces ────────────────────────────────────────────────────────────────────────── */}
      <section className="flex flex-col gap-3 rounded-lg border border-border p-4">
        <h3 className="text-sm font-medium">Typefaces</h3>

        <div className="grid gap-3 sm:grid-cols-2">
          {ROLES.map(({ key, label, hint }) => (
            <div key={key} className="flex flex-col gap-1">
              <label className="text-xs">{label}</label>
              <select
                value={draft[key] ?? ''}
                onChange={(event) => patch({ [key]: event.currentTarget.value || null } as Partial<Layout>)}
                className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
              >
                {/* "Default" is not a font. It means the stylesheet decides, which is what an
                    untouched site already does — so choosing it puts things back rather than
                    setting something new. */}
                <option value="">Default</option>
                {draft.fonts.map((font) => (
                  <option key={font} value={font}>
                    {font}
                  </option>
                ))}
              </select>
              <span className="text-[10px] text-muted-foreground">{hint}</span>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

/** Reordering, which is the one thing a menu needs more than editing. */
const moved = <T,>(items: T[], from: number, by: number): T[] => {
  const to = from + by;
  if (to < 0 || to >= items.length) return items;
  const next = [...items];
  const [item] = next.splice(from, 1);
  next.splice(to, 0, item!);
  return next;
};

/**
 * One link: what it says, and where it goes.
 *
 * The href is a text field with the site's own pages offered beside it rather than a dropdown of
 * them. A menu item can point at an anchor, an external address, or a page that does not exist yet —
 * and while a site is being built the last of those is the common case, so a control that could only
 * express "one of the pages that already exist" would be in the way most of the time.
 */
const LinkRow = ({
  item,
  pages,
  onChange,
  onRemove,
  onMove,
  first,
  last,
}: {
  item: LayoutLink;
  pages: { path: string; label: string }[];
  onChange: (item: LayoutLink) => void;
  onRemove: () => void;
  onMove: (by: number) => void;
  first: boolean;
  last: boolean;
}) => {
  const known = pages.some((page) => page.path === item.href);

  return (
    <div className="flex items-center gap-2">
      <div className="flex shrink-0 flex-col text-muted-foreground">
        <button type="button" className="leading-none hover:text-foreground disabled:opacity-30" onClick={() => onMove(-1)} disabled={first} title="Move up">
          ▴
        </button>
        <button type="button" className="leading-none hover:text-foreground disabled:opacity-30" onClick={() => onMove(1)} disabled={last} title="Move down">
          ▾
        </button>
      </div>

      <GripVertical className="size-3.5 shrink-0 text-muted-foreground/40" />

      <Input
        value={item.label}
        placeholder="Label"
        className="min-w-0 flex-1"
        onChange={(event) => onChange({ ...item, label: event.currentTarget.value })}
      />

      <div className="relative min-w-0 flex-1">
        <Input
          value={item.href}
          placeholder="/where-it-goes"
          list="fofos-pages"
          onChange={(event) => onChange({ ...item, href: event.currentTarget.value })}
        />
        {/* Said rather than enforced. An unknown href is usually a page not built yet, not a mistake,
            and refusing it would make this panel unusable during exactly the phase it is for. */}
        {item.href && !known && !item.href.startsWith('http') && !item.href.startsWith('#') && (
          <span className="pointer-events-none absolute -bottom-4 left-0 text-[10px] text-muted-foreground">
            no page there yet
          </span>
        )}
      </div>

      <datalist id="fofos-pages">
        {pages.map((page) => (
          <option key={page.path} value={page.path}>
            {page.label}
          </option>
        ))}
      </datalist>

      <Button
        size="sm"
        variant="ghost"
        className="size-7 shrink-0 p-0 text-muted-foreground hover:text-destructive"
        onClick={onRemove}
        title="Remove"
      >
        <Trash2 className="size-3.5" />
      </Button>
    </div>
  );
};