import React, { useEffect, useRef, useState } from 'react';
import { widgetDefaults, isObj, clone } from '../engine/index.js';
import { CFG, getState, useStore, setSetting, setStyle, moveRepeaterItem, getPath } from './store.js';
import { BPS, BP_IDS } from './bridge.js';
import { I, Btn, Field, Seg, Switch, UnitInput, cx, Section, tr } from './ui.jsx';
import { ColorControl } from './color.jsx';
import {
  MediaControl,
  GalleryControl,
  IconControl,
  LinkControl,
  FontControl,
  PostsPicker,
  TermsPicker,
  TemplatePicker,
  MenuSelect,
  PopupSelect,
  DynButton,
  DynChip,
} from './pickers.jsx';
import { __ } from './i18n.js';

const bpLabel = (bp) => BPS.find((b) => b.id === bp)?.label || 'Desktop';
const isResp = (v) => isObj(v) && ('d' in v || 'l' in v || 't' in v || 'm' in v);

/** Value at a breakpoint following the desktop-first cascade. */
export function cascade(v, bp) {
  if (!isResp(v)) return { v, from: v !== undefined ? 'd' : null };
  const idx = BP_IDS.indexOf(bp);
  for (let i = idx; i >= 0; i--) {
    const x = v[BP_IDS[i]];
    if (x !== undefined && x !== '') return { v: x, from: BP_IDS[i] };
  }
  return { v: undefined, from: null };
}

/** Evaluate control conditions: { key: value | [values] | '!key' | '?key' } */
export function visible(c, s, styleOf) {
  if (!c.c) return true;
  for (const k in c.c) {
    const want = c.c[k];
    if (k.startsWith('?')) {
      const v = s[k.slice(1)];
      const has = Array.isArray(v) ? v.length > 0 : v && typeof v === 'object' ? Object.keys(v).length > 0 : !!v;
      if (has !== !!want) return false;
      continue;
    }
    if (k.startsWith('!')) {
      const v = s[k.slice(1)];
      if (want === true ? !!v : v === want) return false;
      continue;
    }
    let v = s[k];
    if (v === undefined && styleOf) v = styleOf(k);
    if (isResp(v)) v = v.d;
    if (Array.isArray(want) ? !want.includes(v) : v !== want) return false;
  }
  return true;
}

/** Render the controls list of a widget (content tab). */
export function ControlsList({ id, el, def }) {
  const device = useStore((s) => s.device);
  const s = { ...widgetDefaults(el.t), ...(el.s || {}) };
  const styleOf = (name) => {
    const c = def.controls.find((x) => x.n === name);
    if (!c || !c.style) return undefined;
    return cascade(el.st?.[c.style.part || 'root']?.n, device).v?.[c.style.prop];
  };
  const groups = [];
  let cur = null;
  for (const c of def.controls || []) {
    if (c.sec) {
      cur = { title: c.sec, closed: c.closed, items: [] };
      groups.push(cur);
      continue;
    }
    if (!cur) {
      cur = { title: 'Settings', items: [] };
      groups.push(cur);
    }
    cur.items.push(c);
  }
  return groups.map((g, gi) => {
    const items = g.items.filter((c) => visible(c, s, styleOf));
    if (!items.length) return null;
    return (
      <Section key={gi} title={g.title} open={!g.closed} id={def.type + ':' + g.title}>
        {items.map((c) => (
          <Ctl key={c.n} c={c} id={id} el={el} device={device} />
        ))}
      </Section>
    );
  });
}

/** One control bound to an element. */
export function Ctl({ c, id, el, device }) {
  const labelRef = useRef();
  const defs = widgetDefaults(el.t);
  if (c.style) {
    const part = c.style.part || 'root';
    const byBp = el.st?.[part]?.n;
    const own = byBp?.[device]?.[c.style.prop];
    const inh =
      own === undefined
        ? cascade(byBp && Object.fromEntries(Object.entries(byBp).map(([b, p]) => [b, p?.[c.style.prop]])), device)
        : null;
    const set = (v) => setStyle(id, part, 'n', device, c.style.prop, v, c.l);
    return (
      <Field
        label={c.l}
        resp={bpLabel(device)}
        set={own !== undefined}
        inherited={inh && inh.v !== undefined ? bpLabel(inh.from) : null}
        onReset={() => set(undefined)}
        labelRef={labelRef}
        help={c.help}
        stack={wide(c)}
      >
        <Input
          c={c}
          value={own ?? ''}
          placeholder={inh?.v ?? (c.d !== undefined ? String(c.d) : c.ph)}
          onChange={set}
          scrubRef={labelRef}
        />
      </Field>
    );
  }
  const raw = el.s?.[c.n];
  const hasOwn = raw !== undefined;
  let value,
    setV,
    respLabel,
    inheritedFrom = null,
    isSet = hasOwn;
  if (c.r) {
    const base = raw !== undefined ? raw : c.d;
    const casc = cascade(base, device);
    const own = isResp(base) ? base[device] : device === 'd' ? base : undefined;
    value = own;
    respLabel = bpLabel(device);
    if (own === undefined && casc.v !== undefined) inheritedFrom = bpLabel(casc.from);
    isSet = isResp(raw) ? raw[device] !== undefined : device === 'd' && raw !== undefined;
    setV = (v) => {
      let next = isResp(raw)
        ? { ...raw }
        : raw !== undefined
          ? { d: raw }
          : isResp(c.d)
            ? { ...c.d }
            : c.d !== undefined
              ? { d: c.d }
              : {};
      if (v === '' || v === undefined) delete next[device];
      else next[device] = v;
      setSetting(id, c.n, Object.keys(next).length ? next : undefined, c.l);
    };
    var placeholder = casc.v !== undefined && own === undefined ? casc.v : c.ph;
  } else {
    value = raw !== undefined ? raw : defs[c.n];
    setV = (v) => setSetting(id, c.n, v, c.l);
  }
  const dynVal = value && typeof value === 'object' && value.$dyn;
  const dyn =
    c.dyn && !dynVal ? <DynButton onPick={(d) => setV(c.t === 'link' ? { url: '', $dyn: d.$dyn } : d)} /> : null;
  const reset = () => (c.r ? setV(undefined) : setSetting(id, c.n, undefined, __('Reset %s', c.l)));
  if (c.t === 'note')
    return (
      <div className="note">
        <I n="info" s={14} />
        {c.l}
      </div>
    );
  return (
    <Field
      label={c.l}
      resp={respLabel}
      set={isSet && c.t !== 'repeater'}
      inherited={inheritedFrom}
      onReset={reset}
      labelRef={labelRef}
      help={c.help}
      stack={wide(c)}
      extra={wide(c) && dyn ? <span className="fld-x">{dyn}</span> : null}
    >
      {dynVal ? (
        <DynChip value={value} onChange={setV} />
      ) : (
        <Input
          c={c}
          value={value}
          onChange={setV}
          placeholder={placeholder ?? c.ph}
          scrubRef={labelRef}
          id={id}
          el={el}
          dyn={!wide(c) ? dyn : null}
        />
      )}
    </Field>
  );
}

const wide = (c) =>
  [
    'repeater',
    'rich',
    'code',
    'textarea',
    'gallery',
    'media',
    'group',
    'link',
    'posts',
    'terms',
    'multi',
    'icon',
    'template',
    'menu',
  ].includes(c.t);

/** Bare input for a control type. Also used inside repeaters and groups. */
export function Input({ c, value, onChange, placeholder, scrubRef, id, el, dyn, path }) {
  switch (c.t) {
    case 'text':
      return (
        <div className="in-row">
          <TextIn value={value} onChange={onChange} placeholder={placeholder} />
          {dyn}
        </div>
      );
    case 'textarea':
      return <TextIn multiline value={value} onChange={onChange} placeholder={placeholder} rows={c.rows || 3} />;
    case 'number':
      return (
        <UnitInput
          value={value ?? ''}
          onChange={(v) => onChange(v === '' ? undefined : +v)}
          unitless
          placeholder={placeholder !== undefined ? String(placeholder) : ''}
          min={c.min}
          max={c.max}
          step={c.step || 1}
          scrubRef={scrubRef}
        />
      );
    case 'slider':
      return <Slider c={c} value={value} onChange={onChange} placeholder={placeholder} scrubRef={scrubRef} />;
    case 'select': {
      let opts =
        c.o === 'postTypes'
          ? [
              ...(CFG.postTypes || [
                ['post', 'Posts'],
                ['page', 'Pages'],
              ]),
              ...(c.extra || []),
            ]
          : c.o;
      opts = opts.map((o) => (Array.isArray(o) ? [o[0], tr(o[1]), ...o.slice(2)] : [o, String(o)]));
      return (
        <div className="in-row">
          <select value={value ?? ''} onChange={(e) => onChange(e.target.value)}>
            {placeholder !== undefined && !opts.some((o) => o[0] === '') && value === '' ? (
              <option value="">{String(placeholder)}</option>
            ) : null}
            {opts.map(([v, l]) => (
              <option key={String(v)} value={v}>
                {l}
              </option>
            ))}
          </select>
          {dyn}
        </div>
      );
    }
    case 'choose':
      return <Seg value={value} onChange={(v) => onChange(v === value ? '' : v)} options={c.o} size="sm" />;
    case 'switch':
      return <Switch checked={!!value} onChange={onChange} label={c.l} />;
    case 'color':
      return <ColorControl value={value} onChange={onChange} placeholder={placeholder} />;
    case 'media':
      return <MediaControl value={value} onChange={onChange} mime={c.mime} dyn={dyn} />;
    case 'gallery':
      return <GalleryControl value={value} onChange={onChange} extra={c.extra} />;
    case 'icon':
      return <IconControl value={value} onChange={onChange} />;
    case 'link':
      return <LinkControl value={value} onChange={onChange} dyn={dyn} />;
    case 'rich':
      return <RichIn value={value} onChange={onChange} />;
    case 'code':
      return <CodeIn value={value} onChange={onChange} lang={c.lang} />;
    case 'datetime':
      return <input type="datetime-local" value={value || ''} onChange={(e) => onChange(e.target.value)} />;
    case 'multi':
      return <Multi value={value || []} options={c.o} onChange={onChange} />;
    case 'posts':
      return <PostsPicker value={value} onChange={onChange} />;
    case 'terms':
      return <TermsPicker value={value} onChange={onChange} />;
    case 'template':
      return <TemplatePicker value={value} onChange={onChange} tplType={c.tplType} />;
    case 'menu':
      return <MenuSelect value={value} onChange={onChange} />;
    case 'popup':
      return <PopupSelect value={value} onChange={onChange} />;
    case 'repeater':
      return <Repeater c={c} value={value} onChange={onChange} id={id} el={el} />;
    case 'group':
      return <Group c={c} value={value} onChange={onChange} />;
    case 'font':
      return <FontControl value={value} onChange={onChange} />;
    default:
      return <TextIn value={value} onChange={onChange} placeholder={placeholder} />;
  }
}

function TextIn({ value, onChange, placeholder, multiline, rows = 3 }) {
  const [v, setV] = useState(value ?? '');
  const focused = useRef(false);
  useEffect(() => {
    if (!focused.current) setV(value ?? '');
  }, [value]);
  const props = {
    value: v,
    placeholder: placeholder !== undefined ? String(placeholder) : undefined,
    spellCheck: multiline,
    onFocus: () => (focused.current = true),
    onBlur: () => {
      focused.current = false;
      if (v !== (value ?? '')) onChange(v);
    },
    onChange: (e) => {
      setV(e.target.value);
      onChange(e.target.value);
    },
  };
  return multiline ? (
    <textarea rows={rows} {...props} />
  ) : (
    <input {...props} onKeyDown={(e) => e.key === 'Enter' && e.target.blur()} />
  );
}

function Slider({ c, value, onChange, placeholder, scrubRef }) {
  const units = c.units || (c.unit ? [c.unit] : ['px']);
  const unitless = !c.unit && !c.units && !c.style;
  const num = parseFloat(value ?? placeholder ?? c.d ?? 0);
  const max = c.max ?? 100,
    min = c.min ?? 0;
  // Values for cssVar sliders are stored as plain numbers; the engine appends c.unit.
  const store = (v) => {
    if (v === '' || v === undefined) return onChange('');
    if (c.cssVar && c.unit && !c.units) {
      const n = parseFloat(v);
      return onChange(isNaN(n) ? v : n);
    }
    onChange(v);
  };
  const shown =
    c.cssVar && c.unit && !c.units && value !== undefined && value !== '' && /^-?[\d.]+$/.test(String(value))
      ? value + c.unit
      : value;
  return (
    <div className="sld">
      <input
        type="range"
        min={min}
        max={max}
        step={c.step || 1}
        value={isNaN(num) ? min : num}
        onChange={(e) =>
          store(
            c.cssVar && c.unit && !c.units
              ? +e.target.value
              : unitless
                ? +e.target.value
                : e.target.value + (String(value ?? '').match(/[a-z%]+$/i)?.[0] || units[0]),
          )
        }
        style={{ '--p': `${((Math.min(max, Math.max(min, isNaN(num) ? min : num)) - min) / (max - min || 1)) * 100}%` }}
      />
      <UnitInput
        value={shown ?? ''}
        onChange={store}
        units={c.cssVar && c.unit && !c.units ? [c.unit] : units}
        unitless={unitless}
        placeholder={placeholder !== undefined ? String(placeholder) : ''}
        min={c.min}
        max={c.max}
        step={c.step || 1}
        scrubRef={scrubRef}
      />
    </div>
  );
}

function Multi({ value, options, onChange }) {
  const opts = options.map((o) => (Array.isArray(o) ? o : [o, o]));
  return (
    <div className="multi">
      {opts.map(([v, l]) => (
        <button
          type="button"
          key={v}
          className={cx(value.includes(v) && 'is-on')}
          onClick={() => onChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v])}
        >
          {l}
        </button>
      ))}
    </div>
  );
}

function RichIn({ value, onChange }) {
  const ref = useRef();
  const focused = useRef(false);
  useEffect(() => {
    if (ref.current && !focused.current && ref.current.innerHTML !== (value || '')) ref.current.innerHTML = value || '';
  }, [value]);
  const cmd = (c, a) => {
    ref.current.focus();
    document.execCommand(c, false, a);
    onChange(ref.current.innerHTML);
  };
  return (
    <div className="rich">
      <div className="rich-bar">
        {[
          ['bold', 'bold'],
          ['italic', 'italic'],
          ['underline', 'underline'],
          ['insertUnorderedList', 'list'],
          ['insertOrderedList', 'list-ordered'],
        ].map(([c, i]) => (
          <button
            key={c}
            type="button"
            onMouseDown={(e) => {
              e.preventDefault();
              cmd(c);
            }}
          >
            <I n={i} s={14} />
          </button>
        ))}
        <button
          type="button"
          onMouseDown={(e) => {
            e.preventDefault();
            const u = prompt('Link URL', 'https://');
            if (u) cmd('createLink', u);
          }}
        >
          <I n="link" s={14} />
        </button>
        <button
          type="button"
          onMouseDown={(e) => {
            e.preventDefault();
            cmd('formatBlock', 'h3');
          }}
        >
          <I n="heading-3" s={14} />
        </button>
        <button
          type="button"
          onMouseDown={(e) => {
            e.preventDefault();
            cmd('formatBlock', 'p');
          }}
        >
          <I n="pilcrow" s={14} />
        </button>
        <button
          type="button"
          onMouseDown={(e) => {
            e.preventDefault();
            cmd('removeFormat');
          }}
        >
          <I n="remove-formatting" s={14} />
        </button>
      </div>
      <div
        ref={ref}
        className="rich-ed"
        contentEditable
        suppressContentEditableWarning
        onFocus={() => (focused.current = true)}
        onBlur={() => {
          focused.current = false;
          onChange(ref.current.innerHTML);
        }}
        onInput={() => onChange(ref.current.innerHTML)}
      />
    </div>
  );
}

function CodeIn({ value, onChange, lang }) {
  const [v, setV] = useState(value || '');
  useEffect(() => setV(value || ''), [value]);
  return (
    <textarea
      className="code"
      spellCheck={false}
      rows={8}
      value={v}
      placeholder={lang === 'css' ? 'selector { color: red; }' : ''}
      onChange={(e) => setV(e.target.value)}
      onBlur={() => v !== value && onChange(v)}
      onKeyDown={(e) => {
        if (e.key === 'Tab') {
          e.preventDefault();
          const t = e.target;
          const s = t.selectionStart;
          const n = v.slice(0, s) + '  ' + v.slice(t.selectionEnd);
          setV(n);
          requestAnimationFrame(() => {
            t.selectionStart = t.selectionEnd = s + 2;
          });
        }
      }}
    />
  );
}

function Group({ c, value, onChange }) {
  const v = value || {};
  const s = { ...Object.fromEntries((c.fields || []).filter((f) => f.d !== undefined).map((f) => [f.n, f.d])), ...v };
  const active = Object.keys(v).length > 0 && (v.type ? v.type !== 'none' : true);
  return (
    <div className={cx('grp', active && 'is-active')}>
      {(c.fields || [])
        .filter((f) => visible(f, s))
        .map((f) => (
          <div className="grp-f" key={f.n}>
            <label>{f.l}</label>
            <Input c={f} value={s[f.n]} placeholder={f.ph} onChange={(x) => onChange({ ...v, [f.n]: x })} />
          </div>
        ))}
    </div>
  );
}

function Repeater({ c, value, onChange, id, el }) {
  const items = Array.isArray(value) ? value : [];
  const [open, setOpen] = useState(-1);
  const dragFrom = useRef(-1);
  const [over, setOver] = useState(-1);
  const title = (it, i) => {
    const t = (c.title || '').replace(/\{(\w+)\}/g, (_, k) =>
      typeof it[k] === 'string' ? it[k] : it[k]?.$dyn ? '⚡' + it[k].$dyn : '',
    );
    return t.trim() || `${c.l.replace(/s$/, '')} ${i + 1}`;
  };
  const setItem = (i, patch) => onChange(items.map((x, k) => (k === i ? { ...x, ...patch } : x)));
  const add = () => {
    const tpl = Object.fromEntries((c.fields || []).filter((f) => f.d !== undefined).map((f) => [f.n, clone(f.d)]));
    const first = (c.fields || [])[0];
    if (first && first.t === 'text' && tpl[first.n] === undefined)
      tpl[first.n] = `${c.l.replace(/s$/, '')} ${items.length + 1}`;
    onChange([...items, tpl]);
    setOpen(items.length);
  };
  const reorder = (from, to) => {
    if (from === to || from < 0) return;
    if (id && el && c.n) moveRepeaterItem(id, c.n, from, to);
    else {
      const n = [...items];
      const [x] = n.splice(from, 1);
      n.splice(to, 0, x);
      onChange(n);
    }
    setOpen(-1);
  };
  return (
    <div className="rep">
      {items.map((it, i) => (
        <div
          key={i}
          className={cx('rep-i', open === i && 'is-open', over === i && 'is-over')}
          onDragOver={(e) => {
            e.preventDefault();
            setOver(i);
          }}
          onDragLeave={() => setOver(-1)}
          onDrop={() => {
            setOver(-1);
            reorder(dragFrom.current, i);
          }}
        >
          <div className="rep-h">
            <span
              className="rep-grip"
              draggable
              onDragStart={(e) => {
                dragFrom.current = i;
                e.dataTransfer.effectAllowed = 'move';
              }}
            >
              <I n="grip-vertical" s={14} />
            </span>
            <button type="button" className="rep-t" onClick={() => setOpen(open === i ? -1 : i)}>
              {title(it, i)}
            </button>
            {!c.fixed && (
              <Btn
                size="sm"
                icon="copy"
                tip={__('Duplicate')}
                onClick={() => {
                  const n = [...items];
                  n.splice(i + 1, 0, clone(it));
                  onChange(n);
                }}
              />
            )}
            {!c.fixed && (
              <Btn
                size="sm"
                icon="trash-2"
                tip={__('Remove')}
                onClick={() => onChange(items.filter((_, k) => k !== i))}
              />
            )}
          </div>
          {open === i && (
            <div className="rep-b">
              {(c.fields || [])
                .filter((f) => visible(f, it))
                .map((f) => {
                  const dv = it[f.n] && typeof it[f.n] === 'object' && it[f.n].$dyn;
                  return (
                    <div
                      className={cx('grp-f', ['textarea', 'rich', 'media', 'link', 'icon'].includes(f.t) && 'is-stack')}
                      key={f.n}
                    >
                      <label>
                        {f.l}
                        {f.dyn && !dv && <DynButton onPick={(d) => setItem(i, { [f.n]: d })} />}
                      </label>
                      {dv ? (
                        <DynChip value={it[f.n]} onChange={(x) => setItem(i, { [f.n]: x })} />
                      ) : (
                        <Input
                          c={f}
                          value={it[f.n] ?? f.d}
                          placeholder={f.ph}
                          onChange={(x) => setItem(i, { [f.n]: x })}
                        />
                      )}
                    </div>
                  );
                })}
            </div>
          )}
        </div>
      ))}
      {!c.fixed && (
        <button type="button" className="rep-add" onClick={add}>
          <I n="plus" s={14} />
          Add {c.l.replace(/s$/, '').toLowerCase()}
        </button>
      )}
    </div>
  );
}