import { useEffect, useMemo, useState } from 'react';
import { fetchCheckFormats, fetchSettings, generatePreview } from '../lib/api';
import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api';

/** Schriftarten wie im Konfigurator/manuellen Druck. */
const SCHRIFTEN = [
  { key: 'tilda', name: 'Tilda' },
  { key: 'alva', name: 'Alva' },
  { key: 'ellie', name: 'Ellie' },
];

/** Kugelschreiber-Optik (identisch zum PreviewPanel): blaue Tinte, dezenter Wobble. */
let inkSeq = 0;
const inkify = (svg: string): string => {
  if (typeof svg !== 'string') return svg;
  const id = `skink${inkSeq++}`;
  return svg
    .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"')
    .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
    .replace(/(<svg[^>]*>)/i, `$1<defs><filter id="${id}" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>`)
    .replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, `$1<g filter="url(#${id})">`)
    .replace(/<\/svg>\s*$/i, '</g></svg>');
};

/** Musterbild als PNG herunterladen (SVG → Canvas), wie im PreviewPanel. */
function bildSpeichern(svg: string) {
  const m = svg.match(/viewBox="0 0 ([\d.]+) ([\d.]+)"/);
  const w = Math.round(m ? Number(m[1]) : 794);
  const h = Math.round(m ? Number(m[2]) : 1123);
  const inkSvg = inkify(svg);
  const url = URL.createObjectURL(new Blob([inkSvg], { type: 'image/svg+xml;charset=utf-8' }));
  const img = new Image();
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    if (ctx) {
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      canvas.toBlob((png) => {
        if (png) {
          const a = document.createElement('a');
          a.href = URL.createObjectURL(png);
          a.download = 'skrift-textmenge.png';
          a.click();
          URL.revokeObjectURL(a.href);
        }
        URL.revokeObjectURL(url);
      }, 'image/png');
    } else {
      URL.revokeObjectURL(url);
    }
  };
  img.onerror = () => URL.revokeObjectURL(url);
  img.src = url;
}

/** Stabile anonyme Kennung fürs Vorschau-Kontingent (wie im Konfigurator). */
function clientId(): string {
  const KEY = 'skrift.client';
  let id = localStorage.getItem(KEY);
  if (!id) {
    id = `c-${Math.random().toString(36).slice(2)}-${Date.now().toString(36)}`;
    localStorage.setItem(KEY, id);
  }
  return id;
}

/** Fehlermeldung bei Zeilen-Überlauf (wie im Konfigurator). */
function overflowMeldung(overflow?: PreviewOverflow[]) {
  const schlimmste = (overflow ?? []).reduce<{ lineCount: number; lineLimit: number } | null>(
    (m, o) => (o.lineCount > (m?.lineCount ?? 0) ? o : m),
    null,
  );
  const detail = schlimmste ? ` (${schlimmste.lineCount} von ${schlimmste.lineLimit} Zeilen)` : '';
  return `Der Text ist zu lang für das gewählte Format${detail}. Bitte kürze den Text.`;
}

/**
 * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe (Tabulator,
 * gesperrte Zeichen) und „Vorschau generieren" → rendert EIN Schriftstück
 * (Kugelschreiber-Optik). Passt der Text nicht auf eine Seite, kommt die Fehlermeldung.
 * Bewusst einseitig: kein Seitenumbruch.
 */
export default function Textmenge() {
  const [formate, setFormate] = useState<Format[]>([]);
  const [settings, setSettings] = useState<PublicSettings | null>(null);
  const [format, setFormat] = useState('a4');
  const [font, setFont] = useState('tilda');
  const [realistic, setRealistic] = useState(true);
  const [text, setText] = useState('');
  const [hinweis, setHinweis] = useState('');

  const [doc, setDoc] = useState<PreviewDoc | null>(null);
  const [laedt, setLaedt] = useState(false);
  const [fehler, setFehler] = useState<string | null>(null);
  const [gross, setGross] = useState(false);

  useEffect(() => {
    fetchCheckFormats()
      .then((f) => {
        setFormate(f);
        setFormat(f.find((x) => x.key === 'a4')?.key ?? f[0]?.key ?? 'a4');
      })
      .catch(() => {});
    fetchSettings().then(setSettings).catch(() => {});
  }, []);

  // Escape schließt die Großansicht.
  useEffect(() => {
    if (!gross) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setGross(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [gross]);

  // Gesperrte Zeichen wie im Konfigurator (Zeilenumbruch/Tab bleiben erlaubt).
  const verbotenRe = useMemo(() => {
    const wl = settings?.char_whitelist;
    if (!wl) return null;
    try {
      return new RegExp(`[^${wl}\\n\\r\\t]`, 'g');
    } catch {
      return null;
    }
  }, [settings?.char_whitelist]);

  const saeubere = (v: string) => {
    if (!verbotenRe) return v;
    const treffer = v.match(verbotenRe);
    if (!treffer?.length) return v;
    const einmalig = [...new Set(treffer)].map((c) => (c === ' ' ? '␣' : c)).join(' ');
    setHinweis(`Zeichen ${einmalig} ist nicht erlaubt und wurde entfernt.`);
    window.setTimeout(() => setHinweis(''), 4000);
    return v.replace(verbotenRe, '');
  };

  // Änderung an Eingaben → alte Vorschau verwerfen.
  useEffect(() => {
    setDoc(null);
    setFehler(null);
    setGross(false);
  }, [text, font, format, realistic]);

  async function generieren() {
    if (!text.trim() || laedt) return;
    setLaedt(true);
    setFehler(null);
    try {
      const ergebnis = await generatePreview({
        client_id: clientId(),
        text,
        font,
        format,
        realistic,
        entries: [{}],
      });
      if (ergebnis.has_overflow) {
        setDoc(null);
        setFehler(overflowMeldung(ergebnis.overflow));
      } else {
        setDoc((ergebnis.docs ?? []).find((d) => d.art === 'brief') ?? ergebnis.docs?.[0] ?? null);
      }
    } catch (e) {
      setDoc(null);
      setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.');
    } finally {
      setLaedt(false);
    }
  }

  return (
    <div className="sk-konf">
      <div>
        <h1 style={{ margin: '0 0 8px', fontSize: 28 }}>Textmenge prüfen</h1>
        <p style={{ color: 'var(--sk-muted, #666)', margin: 0, lineHeight: 1.6 }}>
          Text eingeben, Format und Schrift wählen, dann eine Vorschau erzeugen. So siehst du, ob der Text auf ein Schriftstück passt.
        </p>
      </div>

      <div className="sk-card">
        <div className="sk-card-body" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <label className="sk-field" style={{ flex: '1 1 200px' }}>
              <span className="sk-label">Format</span>
              <select className="sk-input" value={format} onChange={(e) => setFormat(e.target.value)}>
                {formate.length === 0 && <option value="a4">A4</option>}
                {formate.map((f) => (
                  <option key={f.key} value={f.key}>{f.name}</option>
                ))}
              </select>
            </label>
            <label className="sk-field" style={{ flex: '1 1 200px' }}>
              <span className="sk-label">Schriftart</span>
              <select className="sk-input" value={font} onChange={(e) => setFont(e.target.value)}>
                {SCHRIFTEN.map((s) => (
                  <option key={s.key} value={s.key}>{s.name}</option>
                ))}
              </select>
            </label>
          </div>

          <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', fontSize: 15 }}>
            <input type="checkbox" checked={realistic} onChange={(e) => setRealistic(e.target.checked)} style={{ width: 18, height: 18 }} />
            Realistische Handschrift (natürliche Variation)
          </label>

          <label className="sk-field">
            <span className="sk-label">Text · {text.length} Zeichen</span>
            <textarea
              className="sk-input"
              rows={12}
              value={text}
              placeholder="Text eingeben oder einfügen …"
              style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', resize: 'vertical', lineHeight: 1.6 }}
              onChange={(e) => setText(saeubere(e.target.value))}
              onKeyDown={(e) => {
                if (e.key !== 'Tab' || e.shiftKey || e.ctrlKey || e.altKey || e.metaKey) return;
                e.preventDefault();
                const ta = e.currentTarget;
                const s = ta.selectionStart ?? text.length;
                const en = ta.selectionEnd ?? s;
                setText(saeubere(text.slice(0, s) + '\t' + text.slice(en)));
                requestAnimationFrame(() => {
                  ta.selectionStart = ta.selectionEnd = s + 1;
                });
              }}
            />
          </label>

          <button
            type="button"
            className="sk-btn sk-btn--primary"
            disabled={!text.trim() || laedt}
            onClick={generieren}
            style={{ alignSelf: 'flex-start', opacity: !text.trim() || laedt ? 0.6 : 1 }}
          >
            {laedt ? 'Vorschau wird erzeugt …' : 'Vorschau generieren'}
          </button>

          <p style={{ color: 'var(--sk-muted, #666)', fontSize: 12, margin: 0, lineHeight: 1.5 }}>
            Tabulator (↹) rückt Text ein. Gesperrte Zeichen werden automatisch entfernt.
          </p>
          {hinweis && <p style={{ color: 'var(--sk-danger, #c62828)', fontSize: 13, margin: 0 }}>{hinweis}</p>}
        </div>
      </div>

      {/* Vorschau / Ergebnis */}
      <div className="sk-card">
        <div className="sk-card-body">
          {fehler ? (
            <div
              style={{
                display: 'flex', gap: 10, alignItems: 'flex-start', color: '#c62828',
                background: 'rgba(198,40,40,.08)', border: '1px solid rgba(198,40,40,.25)',
                borderRadius: 10, padding: '14px 16px', fontSize: 15,
              }}
            >
              <span style={{ fontSize: 18, lineHeight: 1 }}>⚠</span>
              <span>{fehler}</span>
            </div>
          ) : doc ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', width: '100%' }}>
                <span
                  style={{
                    fontSize: 13, fontWeight: 600, padding: '4px 12px', borderRadius: 999,
                    background: 'rgba(46,125,50,.12)', color: '#2e7d32',
                  }}
                >
                  ✓ Passt auf eine Seite
                </span>
                <span style={{ flex: 1 }} />
                <button type="button" className="sk-btn" onClick={() => setGross(true)}>🔍 Vergrößern</button>
                <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
              </div>
              <div
                className="sk-preview-doc-sheet"
                onClick={() => setGross(true)}
                style={{ width: '100%', maxWidth: 460, cursor: 'zoom-in' }}
                dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
              />
            </div>
          ) : (
            <p style={{ color: 'var(--sk-muted, #666)', margin: 0, textAlign: 'center', padding: '40px 0' }}>
              Noch keine Vorschau. Text eingeben und „Vorschau generieren" drücken.
            </p>
          )}
        </div>
      </div>

      {/* Großansicht (Lightbox) */}
      {gross && doc && (
        <div
          onClick={() => setGross(false)}
          style={{
            position: 'fixed', inset: 0, background: 'rgba(0,0,0,.72)', zIndex: 1000,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            gap: 16, padding: 24,
          }}
        >
          <div style={{ display: 'flex', gap: 10 }} onClick={(e) => e.stopPropagation()}>
            <button type="button" className="sk-btn sk-btn--primary" onClick={() => bildSpeichern(doc.svg)}>⬇ Bild herunterladen</button>
            <button type="button" className="sk-btn" onClick={() => setGross(false)}>Schließen</button>
          </div>
          <div
            className="sk-preview-doc-sheet"
            onClick={(e) => e.stopPropagation()}
            style={{ width: 'min(92vw, 62vh)', maxHeight: '86vh', overflow: 'auto' }}
            dangerouslySetInnerHTML={{ __html: inkify(doc.svg) }}
          />
        </div>
      )}
    </div>
  );
}