import { useMemo } from "react";
import type { ReactNode } from "react";
import { Input } from "@/components/ui/input";
import { EmojiPickerField } from "../EmojiPickerField";
import { ImageIconField } from "../ImageIconField";
import { Slider } from "@/components/ui/slider";
import { Copy, Plus, Trash2 } from "lucide-react";
import type { PCOStyle, TableRow } from "@/components/page-blocks/parent-course-overview/types";
import {
  colorToCssBackground,
  formatColor,
  opacityPercent,
  parseColor,
  toColorInputHex,
  withOpacity,
  withRgb,
} from "./colorUtils";

export const formRow = "mb-3";
export const labelCls = "block text-xs font-medium text-slate-700 mb-1";
export const textareaCls =
  "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[60px]";
export const panelCls = "p-3 border border-slate-200 rounded-lg bg-slate-50/80 space-y-3";
const subHead = "text-[10px] font-semibold text-slate-500 uppercase tracking-wide mt-2 mb-1";

export function str(v: unknown): string {
  return typeof v === "string" ? v : "";
}

type ColorFieldProps = {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder?: string;
};

const CHECKERBOARD =
  "linear-gradient(45deg, #e2e8f0 25%, transparent 25%), linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e2e8f0 75%), linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)";

export function ColorField({ label, value, onChange, placeholder = "#ffffff" }: ColorFieldProps) {
  const parsed = useMemo(() => parseColor(value, placeholder), [placeholder, value]);
  const pickerHex = toColorInputHex(parsed);
  const opacity = opacityPercent(parsed);
  const previewCss = colorToCssBackground(parsed);

  const emit = (next: Parameters<typeof formatColor>[0]) => onChange(formatColor(next));

  return (
    <div>
      <div className="flex items-center justify-between gap-2 mb-1">
        <label className={`${labelCls} mb-0`}>{label}</label>
        <button
          type="button"
          onClick={() => onChange("transparent")}
          className="text-[10px] text-slate-500 hover:text-slate-800 underline"
        >
          Transparent
        </button>
      </div>
      <div className="flex gap-2 items-center">
        <input
          type="color"
          value={pickerHex}
          disabled={parsed.isTransparent}
          onChange={(e) => emit(withRgb(parsed, e.target.value))}
          className="h-9 w-12 cursor-pointer rounded border border-slate-200 shrink-0 disabled:opacity-40 disabled:cursor-not-allowed"
          title="Pick color"
        />
        <div
          className="h-9 w-9 shrink-0 rounded border border-slate-200"
          style={{
            backgroundColor: previewCss,
            backgroundImage: parsed.alpha < 1 ? CHECKERBOARD : undefined,
            backgroundSize: parsed.alpha < 1 ? "8px 8px" : undefined,
            backgroundPosition: parsed.alpha < 1 ? "0 0, 0 4px, 4px -4px, -4px 0" : undefined,
          }}
          title="Preview"
        />
        <div className="flex-1 min-w-[88px] space-y-0.5">
          <Slider
            value={[opacity]}
            min={0}
            max={100}
            step={1}
            onValueChange={([pct]) => emit(withOpacity(parsed, pct ?? 0))}
            aria-label={`${label} opacity`}
          />
          <p className="text-[10px] text-slate-500 text-right tabular-nums">{opacity}%</p>
        </div>
      </div>
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="text-sm mt-1.5 font-mono"
      />
    </div>
  );
}

function ColorGrid({ children }: { children: ReactNode }) {
  return <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">{children}</div>;
}

export type StyleEditorMode = "section" | "hero" | "global" | "footer";

type StyleEditorProps = {
  label: string;
  style: PCOStyle;
  onChange: (s: PCOStyle) => void;
  mode?: StyleEditorMode;
  showCard?: boolean;
  showTable?: boolean;
  showPills?: boolean;
  showChart?: boolean;
  showLearnerDefaults?: boolean;
  showIcon?: boolean;
};

export function StyleEditor({
  label,
  style,
  onChange,
  mode = "section",
  showCard = true,
  showTable = false,
  showPills = false,
  showChart = false,
  showLearnerDefaults = false,
  showIcon = true,
}: StyleEditorProps) {
  const set = (key: keyof PCOStyle, value: string) =>
    onChange({ ...style, [key]: value.trim() ? value : undefined });

  return (
    <details className={panelCls}>
      <summary className="text-xs font-semibold text-slate-600 cursor-pointer">{label}</summary>

      {mode === "hero" ? (
        <>
          <p className={subHead}>Hero banner</p>
          <ColorGrid>
            <ColorField label="Solid background (overrides gradient)" value={style.backgroundColor ?? ""} onChange={(v) => set("backgroundColor", v)} placeholder="#12395b" />
            <ColorField label="Gradient start" value={style.heroGradientStart ?? ""} onChange={(v) => set("heroGradientStart", v)} placeholder="#12395b" />
            <ColorField label="Gradient middle" value={style.heroGradientMid ?? ""} onChange={(v) => set("heroGradientMid", v)} placeholder="#1d5d78" />
            <ColorField label="Gradient end" value={style.heroGradientEnd ?? ""} onChange={(v) => set("heroGradientEnd", v)} placeholder="#0d7c86" />
            <ColorField label="Banner text" value={style.textColor ?? ""} onChange={(v) => set("textColor", v)} placeholder="#ffffff" />
            <ColorField label="Course title" value={style.titleColor ?? ""} onChange={(v) => set("titleColor", v)} />
            <ColorField label="Eyebrow" value={style.eyebrowColor ?? ""} onChange={(v) => set("eyebrowColor", v)} />
            <ColorField label="Subtitle / promise" value={style.subtitleColor ?? ""} onChange={(v) => set("subtitleColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {mode === "global" ? (
        <>
          <p className={subHead}>Theme palette (defaults for whole component)</p>
          <ColorGrid>
            <ColorField label="Navy (titles, table header)" value={style.themeNavy ?? ""} onChange={(v) => set("themeNavy", v)} placeholder="#12395b" />
            <ColorField label="Teal (accents)" value={style.themeTeal ?? ""} onChange={(v) => set("themeTeal", v)} placeholder="#0d7c86" />
            <ColorField label="Sky (highlights)" value={style.themeSky ?? ""} onChange={(v) => set("themeSky", v)} placeholder="#e9f6f8" />
            <ColorField label="Gold (section numbers)" value={style.themeGold ?? ""} onChange={(v) => set("themeGold", v)} placeholder="#d9872b" />
            <ColorField label="Body text" value={style.themeInk ?? ""} onChange={(v) => set("themeInk", v)} placeholder="#1f2933" />
            <ColorField label="Muted text" value={style.themeMuted ?? ""} onChange={(v) => set("themeMuted", v)} placeholder="#64748b" />
            <ColorField label="Borders / lines" value={style.themeLine ?? ""} onChange={(v) => set("themeLine", v)} placeholder="#d8e3ea" />
            <ColorField label="Document background" value={style.docBackgroundColor ?? ""} onChange={(v) => set("docBackgroundColor", v)} placeholder="#ffffff" />
            <ColorField label="Document border" value={style.docBorderColor ?? ""} onChange={(v) => set("docBorderColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {mode === "footer" ? (
        <ColorGrid>
          <ColorField label="Footer background" value={style.backgroundColor ?? ""} onChange={(v) => set("backgroundColor", v)} placeholder="#f0f6f8" />
          <ColorField label="Footer text" value={style.textColor ?? ""} onChange={(v) => set("textColor", v)} />
        </ColorGrid>
      ) : null}

      {(mode === "section" || mode === "global") && (
        <>
          <p className={subHead}>{mode === "global" ? "Content area" : "Section"}</p>
          <ColorGrid>
            <ColorField label="Section background" value={style.backgroundColor ?? ""} onChange={(v) => set("backgroundColor", v)} />
            <ColorField label="Body text" value={style.textColor ?? ""} onChange={(v) => set("textColor", v)} />
            <ColorField label="Section title" value={style.titleColor ?? ""} onChange={(v) => set("titleColor", v)} />
            <ColorField label="Section number" value={style.sectionNumberColor ?? ""} onChange={(v) => set("sectionNumberColor", v)} placeholder="#d9872b" />
            <ColorField label="Title underline" value={style.sectionTitleBorderColor ?? ""} onChange={(v) => set("sectionTitleBorderColor", v)} placeholder="#e9f6f8" />
            <ColorField label="Subtitle / secondary" value={style.subtitleColor ?? ""} onChange={(v) => set("subtitleColor", v)} />
            <ColorField label="Muted notes" value={style.mutedTextColor ?? ""} onChange={(v) => set("mutedTextColor", v)} />
            <ColorField label="Border" value={style.borderColor ?? ""} onChange={(v) => set("borderColor", v)} />
          </ColorGrid>
        </>
      )}

      {showCard ? (
        <>
          <p className={subHead}>Cards</p>
          <ColorGrid>
            <ColorField label="Card background" value={style.cardBackgroundColor ?? ""} onChange={(v) => set("cardBackgroundColor", v)} />
            <ColorField label="Card border" value={style.cardBorderColor ?? ""} onChange={(v) => set("cardBorderColor", v)} />
            <ColorField label="Card text" value={style.cardTextColor ?? ""} onChange={(v) => set("cardTextColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {showTable ? (
        <>
          <p className={subHead}>Tables</p>
          <ColorGrid>
            <ColorField label="Header background" value={style.tableHeaderBackgroundColor ?? ""} onChange={(v) => set("tableHeaderBackgroundColor", v)} placeholder="#12395b" />
            <ColorField label="Header text" value={style.tableHeaderTextColor ?? ""} onChange={(v) => set("tableHeaderTextColor", v)} placeholder="#ffffff" />
            <ColorField label="Alternating row background" value={style.tableRowAltBackgroundColor ?? ""} onChange={(v) => set("tableRowAltBackgroundColor", v)} placeholder="#fbfdff" />
            <ColorField label="Cell text" value={style.tableCellTextColor ?? ""} onChange={(v) => set("tableCellTextColor", v)} />
            <ColorField label="Table border" value={style.tableBorderColor ?? ""} onChange={(v) => set("tableBorderColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {showPills ? (
        <>
          <p className={subHead}>Portrait pills</p>
          <ColorGrid>
            <ColorField label="Pill background" value={style.pillBackgroundColor ?? ""} onChange={(v) => set("pillBackgroundColor", v)} />
            <ColorField label="Pill text" value={style.pillTextColor ?? ""} onChange={(v) => set("pillTextColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {showChart ? (
        <>
          <p className={subHead}>Spider chart</p>
          <ColorGrid>
            <ColorField label="Grid lines" value={style.chartGridColor ?? ""} onChange={(v) => set("chartGridColor", v)} />
            <ColorField label="Axis lines" value={style.chartAxisColor ?? ""} onChange={(v) => set("chartAxisColor", v)} />
            <ColorField label="Fill" value={style.chartFillColor ?? ""} onChange={(v) => set("chartFillColor", v)} placeholder="rgba(13,124,134,0.22)" />
            <ColorField label="Outline" value={style.chartStrokeColor ?? ""} onChange={(v) => set("chartStrokeColor", v)} />
            <ColorField label="Labels" value={style.chartLabelColor ?? ""} onChange={(v) => set("chartLabelColor", v)} />
            <ColorField label="Data points" value={style.chartPointColor ?? ""} onChange={(v) => set("chartPointColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {showLearnerDefaults ? (
        <>
          <p className={subHead}>Learner cards (section defaults)</p>
          <ColorGrid>
            <ColorField label="Card background" value={style.learnerItemBackgroundColor ?? ""} onChange={(v) => set("learnerItemBackgroundColor", v)} />
            <ColorField label="Card text" value={style.learnerItemTextColor ?? ""} onChange={(v) => set("learnerItemTextColor", v)} />
            <ColorField label="Detail text" value={style.learnerItemDetailColor ?? ""} onChange={(v) => set("learnerItemDetailColor", v)} />
            <ColorField label="Heading accent" value={style.learnerItemAccentColor ?? ""} onChange={(v) => set("learnerItemAccentColor", v)} />
            <ColorField label="Card border" value={style.learnerItemBorderColor ?? ""} onChange={(v) => set("learnerItemBorderColor", v)} />
          </ColorGrid>
        </>
      ) : null}

      {(mode === "section" || mode === "hero") && showIcon ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2">
          <div>
            <label className={labelCls}>Padding (CSS)</label>
            <Input value={style.padding ?? ""} onChange={(e) => set("padding", e.target.value)} placeholder="e.g. 16px 24px" />
          </div>
          <div>
            <label className={labelCls}>Icon (emoji/text)</label>
            <EmojiPickerField compact value={style.icon ?? ""} onChange={(v) => set("icon", v)} placeholder="e.g. 📚" />
          </div>
          <div className="sm:col-span-2">
            <label className={labelCls}>Image URL</label>
            <ImageIconField value={style.imageUrl ?? ""} onChange={(v) => set("imageUrl", v)} placeholder="https://..." />
          </div>
        </div>
      ) : null}
    </details>
  );
}

type TableEditorProps = {
  headers: string[];
  rows: TableRow[];
  onChangeHeaders: (h: string[]) => void;
  onChangeRows: (r: TableRow[]) => void;
};

export function TableEditor({ headers, rows, onChangeHeaders, onChangeRows }: TableEditorProps) {
  const colCount = Math.max(headers.length, 1);

  const updateHeader = (i: number, v: string) => {
    const next = [...headers];
    next[i] = v;
    onChangeHeaders(next);
  };

  const updateCell = (ri: number, ci: number, v: string) => {
    const next = rows.map((r) => [...r]);
    while (next[ri].length < colCount) next[ri].push("");
    next[ri][ci] = v;
    onChangeRows(next);
  };

  const addColumn = () => {
    onChangeHeaders([...headers, `Column ${headers.length + 1}`]);
    onChangeRows(rows.map((r) => [...r, ""]));
  };

  const removeColumn = (ci: number) => {
    if (headers.length <= 1) return;
    onChangeHeaders(headers.filter((_, i) => i !== ci));
    onChangeRows(rows.map((r) => r.filter((_, i) => i !== ci)));
  };

  const addRow = () => onChangeRows([...rows, Array(colCount).fill("")]);

  const duplicateRow = (ri: number) => {
    const copy = [...(rows[ri] ?? Array(colCount).fill(""))];
    onChangeRows([...rows.slice(0, ri + 1), copy, ...rows.slice(ri + 1)]);
  };

  const removeRow = (ri: number) => onChangeRows(rows.filter((_, i) => i !== ri));

  const moveRow = (ri: number, dir: -1 | 1) => {
    const j = ri + dir;
    if (j < 0 || j >= rows.length) return;
    const next = [...rows];
    [next[ri], next[j]] = [next[j], next[ri]];
    onChangeRows(next);
  };

  return (
    <div className="space-y-3">
      <div>
        <div className="flex items-center justify-between mb-1">
          <label className={labelCls}>Table columns</label>
          <button type="button" onClick={addColumn} className="text-xs text-slate-600 hover:text-slate-900 inline-flex items-center gap-1">
            <Plus size={12} /> Add column
          </button>
        </div>
        <div className="space-y-1">
          {headers.map((h, ci) => (
            <div key={ci} className="flex gap-1">
              <Input value={h} onChange={(e) => updateHeader(ci, e.target.value)} placeholder={`Header ${ci + 1}`} className="text-sm flex-1" />
              <button type="button" onClick={() => removeColumn(ci)} className="p-1.5 text-red-600 hover:bg-red-50 rounded" title="Remove column">
                <Trash2 size={14} />
              </button>
            </div>
          ))}
        </div>
      </div>

      <div>
        <label className={labelCls}>Table rows</label>
        <div className="space-y-2 mt-1">
          {rows.map((row, ri) => (
            <div key={ri} className="p-2 border border-slate-200 rounded-lg bg-white space-y-1">
              <div className="flex justify-between items-center">
                <span className="text-[10px] font-semibold text-slate-500 uppercase">Row {ri + 1}</span>
                <div className="flex gap-0.5">
                  <button type="button" onClick={() => moveRow(ri, -1)} className="px-1.5 py-0.5 text-[10px] border rounded" disabled={ri === 0}>
                    ↑
                  </button>
                  <button type="button" onClick={() => moveRow(ri, 1)} className="px-1.5 py-0.5 text-[10px] border rounded" disabled={ri === rows.length - 1}>
                    ↓
                  </button>
                  <button type="button" onClick={() => duplicateRow(ri)} className="p-1 text-slate-600 hover:bg-slate-100 rounded" title="Duplicate row">
                    <Copy size={14} />
                  </button>
                  <button type="button" onClick={() => removeRow(ri)} className="p-1 text-red-600 hover:bg-red-50 rounded" title="Remove row">
                    <Trash2 size={14} />
                  </button>
                </div>
              </div>
              {Array.from({ length: colCount }).map((_, ci) => (
                <textarea
                  key={ci}
                  value={row[ci] ?? ""}
                  onChange={(e) => updateCell(ri, ci, e.target.value)}
                  rows={2}
                  placeholder={headers[ci] ?? `Cell ${ci + 1}`}
                  className={textareaCls}
                />
              ))}
            </div>
          ))}
        </div>
        <button
          type="button"
          onClick={addRow}
          className="mt-2 inline-flex items-center gap-1 px-2 py-1 text-xs font-medium border border-slate-300 rounded-md bg-white hover:bg-slate-50"
        >
          <Plus size={12} /> Add row
        </button>
      </div>
    </div>
  );
}