// HK Plate Scanner v3 — HK-only, PP-OCR v6, YOLOv11 small, multi-frame voting, debug mode
const { useState, useEffect, useRef, useCallback } = React;

function beep(kind) {
  try {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const o = ctx.createOscillator();
    const g = ctx.createGain();
    o.connect(g); g.connect(ctx.destination);
    if (kind === 'new') {
      o.frequency.setValueAtTime(880, ctx.currentTime);
      o.frequency.setValueAtTime(1320, ctx.currentTime + 0.06);
    } else if (kind === 'partial') {
      o.frequency.setValueAtTime(440, ctx.currentTime);
    } else {
      o.frequency.setValueAtTime(660, ctx.currentTime);
    }
    g.gain.setValueAtTime(0.001, ctx.currentTime);
    g.gain.exponentialRampToValueAtTime(0.12, ctx.currentTime + 0.02);
    g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
    o.start();
    o.stop(ctx.currentTime + 0.22);
    setTimeout(() => ctx.close(), 400);
  } catch (e) {}
}

function App() {
  const [modelReady, setModelReady] = useState(false);
  const [loading, setLoading] = useState(true);
  const [loadMsg, setLoadMsg] = useState('初始化…');
  const [loadProg, setLoadProg] = useState(0);
  const [loadErr, setLoadErr] = useState(null);
  const [records, setRecords] = useState([]);
  const [search, setSearch] = useState('');
  const [detail, setDetail] = useState(null);
  const [scanning, setScanning] = useState(false);
  const [torch, setTorch] = useState(false);
  const [cameraStatus, setCameraStatus] = useState('init');
  const [liveChips, setLiveChips] = useState([]);
  const [exportMenu, setExportMenu] = useState(false);
  const [toast, setToast] = useState(null);
  const [soundOn, setSoundOn] = useState(true);
  const [debugMode, setDebugMode] = useState(false);
  const [debugData, setDebugData] = useState(null);   // last frame's debug info
  const [clearDialog, setClearDialog] = useState(null); // null | { step, unexported }

  const videoRef = useRef(null);
  const overlayRef = useRef(null);
  const streamRef = useRef(null);
  const rafRef = useRef(null);
  const busyRef = useRef(false);
  const trackerRef = useRef(null);
  const lastConfirmRef = useRef(new Map()); // plate -> ts (throttle re-adds)

  // Load models
  useEffect(() => {
    (async () => {
      try {
        setLoadMsg('載入引擎…'); setLoadProg(0.02);
        await window.__loadHeavy();
        await window.PlateDetectorV3.loadModels(({ progress, msg }) => {
          if (progress != null) setLoadProg(progress);
          if (msg) setLoadMsg(msg);
        });
        setModelReady(true);
        setLoading(false);
        trackerRef.current = new window.PlateDetectorV3.VotingTracker({ windowMs: 3500, minVotes: 2 });
      } catch (e) {
        console.error(e);
        setLoadErr(String(e.message || e));
        setLoading(false);
      }
    })();
  }, []);

  // Records + camera
  useEffect(() => {
    (async () => {
      // Optional demo seed via ?demo=1
      if (new URLSearchParams(location.search).get('demo') === '1') {
        const c = await window.PlateStorageV3.count();
        if (c === 0) {
          const now = Date.now();
          const seeds = [
            { plate: 'AB1234', display: 'AB 1234', lastSeen: now, confidence: 0.92 },
            { plate: 'AB1234', display: 'AB 1234', lastSeen: now, confidence: 0.92 },
            { plate: 'LM88', display: 'LM 88', lastSeen: now - 1200000, confidence: 0.95 },
            { plate: 'PV6543', display: 'PV 6543', lastSeen: now - 7200000, confidence: 0.87 },
            { plate: 'HK1', display: 'HK 1', lastSeen: now - 86400000, confidence: 0.90 },
          ];
          for (const s of seeds) await window.PlateStorageV3.addOrUpdate(s);
        }
      }
      refresh();
    })();
    startCamera();
    return () => stopCamera();
  }, []);
  useEffect(() => { refresh(); }, [search]);

  async function refresh() {
    if (!window.PlateStorageV3) return;
    const items = await window.PlateStorageV3.getAll({ search });
    setRecords(items);
  }

  async function startCamera() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({
        video: {
          facingMode: { ideal: 'environment' },
          width: { ideal: 1920 },
          height: { ideal: 1080 },
        },
        audio: false,
      });
      streamRef.current = stream;
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
        await videoRef.current.play();
      }
      setCameraStatus('ok');
    } catch (e) {
      console.warn('Camera err', e);
      setCameraStatus('err');
    }
  }
  function stopCamera() {
    if (streamRef.current) { streamRef.current.getTracks().forEach(t => t.stop()); streamRef.current = null; }
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
  }

  async function toggleTorch() {
    if (!streamRef.current) return;
    const track = streamRef.current.getVideoTracks()[0];
    const caps = track.getCapabilities?.();
    if (!caps || !caps.torch) { showToast('本裝置不支援手電筒'); return; }
    try {
      await track.applyConstraints({ advanced: [{ torch: !torch }] });
      setTorch(!torch);
    } catch (e) { console.warn(e); }
  }

  function showToast(msg, dur = 1800) {
    setToast(msg);
    setTimeout(() => setToast(null), dur);
  }

  // === Live detection loop ===
  const runFrame = useCallback(async () => {
    if (!scanning || busyRef.current) {
      if (scanning) rafRef.current = requestAnimationFrame(runFrame);
      return;
    }
    const v = videoRef.current;
    if (!v || v.readyState < 2) {
      rafRef.current = requestAnimationFrame(runFrame);
      return;
    }
    busyRef.current = true;
    try {
      const w = v.videoWidth, h = v.videoHeight;
      const results = await window.PlateDetectorV3.processFrame(v, w, h, { debug: debugMode });
      renderOverlay(results, w, h);
      if (debugMode) setDebugData({ ts: Date.now(), results });
      await handleResults(results, v, w, h);
    } catch (e) { console.warn(e); }
    busyRef.current = false;
    if (scanning) rafRef.current = requestAnimationFrame(runFrame);
  }, [scanning, debugMode]);

  useEffect(() => {
    if (scanning) rafRef.current = requestAnimationFrame(runFrame);
    else if (rafRef.current) cancelAnimationFrame(rafRef.current);
    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [scanning, runFrame]);

  function renderOverlay(results, srcW, srcH) {
    const svg = overlayRef.current;
    if (!svg) return;
    svg.setAttribute('viewBox', `0 0 ${srcW} ${srcH}`);
    svg.setAttribute('preserveAspectRatio', 'xMidYMid slice');
    svg.innerHTML = '';
    for (const r of results) {
      const b = r.box;
      const color = r.valid ? '#34c759' : (r.raw ? '#ff9500' : '#8e8e93');
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      rect.setAttribute('x', b.x1);
      rect.setAttribute('y', b.y1);
      rect.setAttribute('width', b.x2 - b.x1);
      rect.setAttribute('height', b.y2 - b.y1);
      rect.setAttribute('fill', 'none');
      rect.setAttribute('stroke', color);
      rect.setAttribute('stroke-width', '3');
      rect.setAttribute('rx', '4');
      svg.appendChild(rect);
      // Label: show plate if valid, else raw text (in debug)
      if (r.plate || (debugMode && r.raw)) {
        const label = r.display || r.raw || '';
        const textElem = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        textElem.setAttribute('x', b.x1);
        textElem.setAttribute('y', Math.max(20, b.y1 - 6));
        textElem.setAttribute('fill', color);
        textElem.setAttribute('font-family', 'SF Mono, monospace');
        textElem.setAttribute('font-size', Math.max(16, Math.round((b.x2 - b.x1) * 0.08)));
        textElem.setAttribute('font-weight', '700');
        textElem.setAttribute('stroke', 'rgba(0,0,0,0.7)');
        textElem.setAttribute('stroke-width', '3');
        textElem.setAttribute('paint-order', 'stroke');
        textElem.textContent = label;
        svg.appendChild(textElem);
      }
    }
  }

  async function handleResults(results, imageSource, srcW, srcH) {
    for (const r of results) {
      // Only valid HK plates count
      if (!r.plate) {
        trackerRef.current?.vote(null, 0);
        continue;
      }
      const vote = trackerRef.current?.vote(r.plate, r.rawConfidence || 0.5) || { confirmed: true, votes: 1 };
      if (!vote.confirmed) {
        // Just show as partial candidate
        pushLiveChip({ display: r.display, plate: r.plate, votes: vote.votes, pending: true });
        if (soundOn) beep('partial');
        continue;
      }
      // Throttle: don't re-add if we just added this plate in last 5s
      const lastTs = lastConfirmRef.current.get(r.plate);
      if (lastTs && Date.now() - lastTs < 5000) continue;
      lastConfirmRef.current.set(r.plate, Date.now());
      const thumb = await makeThumbnail(imageSource, r.box, srcW, srcH);
      const { record: saved, isNew } = await window.PlateStorageV3.addOrUpdate({
        plate: r.plate,
        display: r.display,
        lastSeen: Date.now(),
        confidence: r.rawConfidence,
        thumbnail: thumb,
      });
      if (soundOn) beep(isNew ? 'new' : 'ok');
      pushLiveChip({ display: r.display, plate: r.plate, isNew });
      refresh();
    }
  }

  function pushLiveChip(chip) {
    const c = { ...chip, id: Date.now() + Math.random() };
    setLiveChips(prev => [c, ...prev].slice(0, 2));
    setTimeout(() => setLiveChips(p => p.filter(x => x.id !== c.id)), 2400);
  }

  async function makeThumbnail(src, box, srcW, srcH) {
    const pad = 12;
    const bx1 = Math.max(0, box.x1 - pad);
    const by1 = Math.max(0, box.y1 - pad);
    const bx2 = Math.min(srcW, box.x2 + pad);
    const by2 = Math.min(srcH, box.y2 + pad);
    const w = bx2 - bx1, h = by2 - by1;
    const targetW = 260;
    const targetH = Math.round(h * (targetW / w));
    const canvas = document.createElement('canvas');
    canvas.width = targetW;
    canvas.height = targetH;
    canvas.getContext('2d').drawImage(src, bx1, by1, w, h, 0, 0, targetW, targetH);
    return await new Promise(res => canvas.toBlob(res, 'image/jpeg', 0.8));
  }

  // Photo / video upload
  async function handlePhotoUpload(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = async () => {
      try {
        showToast('分析中…');
        const results = await window.PlateDetectorV3.processFrame(img, img.naturalWidth, img.naturalHeight, {
          detectConf: 0.1, maxBoxes: 6, debug: debugMode,
        });
        // For static image, always accept (no voting)
        const validResults = results.filter(r => r.plate);
        for (const r of validResults) {
          const thumb = await makeThumbnail(img, r.box, img.naturalWidth, img.naturalHeight);
          await window.PlateStorageV3.addOrUpdate({
            plate: r.plate,
            display: r.display,
            lastSeen: Date.now(),
            confidence: r.rawConfidence,
            thumbnail: thumb,
          });
          pushLiveChip({ display: r.display, isNew: true });
          if (soundOn) beep('new');
        }
        if (debugMode) setDebugData({ ts: Date.now(), results });
        refresh();
        if (validResults.length === 0 && results.length > 0 && debugMode) {
          showToast(`偵測到 ${results.length} 個 box 但無有效車牌`);
        } else {
          showToast(`識別到 ${validResults.length} 個香港車牌`);
        }
      } catch (err) {
        console.error(err);
        showToast('識別失敗');
      }
      URL.revokeObjectURL(url);
    };
    img.src = url;
  }

  async function handleVideoUpload(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    e.target.value = '';
    const url = URL.createObjectURL(file);
    const video = document.createElement('video');
    video.src = url;
    video.muted = true;
    video.playsInline = true;
    await new Promise(r => { video.onloadedmetadata = r; });
    await video.play();
    showToast('逐幀掃描影片…', 3000);
    let processed = 0, found = 0;
    const localTracker = new window.PlateDetectorV3.VotingTracker({ windowMs: 5000, minVotes: 2 });
    const scan = async () => {
      if (video.ended) {
        showToast(`影片掃描完成 · ${processed} 幀 · 找到 ${found} 個車牌`);
        URL.revokeObjectURL(url);
        return;
      }
      try {
        const results = await window.PlateDetectorV3.processFrame(video, video.videoWidth, video.videoHeight, { maxBoxes: 3 });
        for (const r of results) {
          if (!r.plate) continue;
          const v = localTracker.vote(r.plate, r.rawConfidence);
          if (!v.confirmed) continue;
          const lastTs = lastConfirmRef.current.get(r.plate);
          if (lastTs && Date.now() - lastTs < 3000) continue;
          lastConfirmRef.current.set(r.plate, Date.now());
          const thumb = await makeThumbnail(video, r.box, video.videoWidth, video.videoHeight);
          await window.PlateStorageV3.addOrUpdate({
            plate: r.plate, display: r.display, lastSeen: Date.now(),
            confidence: r.rawConfidence, thumbnail: thumb,
          });
          found++;
          pushLiveChip({ display: r.display, isNew: true });
          refresh();
        }
        processed++;
      } catch (err) {}
      setTimeout(scan, 400);
    };
    scan();
  }

  async function handleExport(kind) {
    setExportMenu(false);
    if (!records.length) { showToast('沒有記錄可匯出'); return; }
    try {
      if (kind === 'csv') { await window.PlateStorageV3.downloadCSV(); showToast('CSV 已匯出'); }
      else if (kind === 'pdf') { showToast('生成 PDF 中…'); await window.PlateStorageV3.downloadPDF(); showToast('PDF 已匯出'); }
    } catch (e) { showToast('匯出失敗: ' + e.message); }
  }

  // ==== Clear flow ====
  async function openClearDialog() {
    console.log('[clear] button pressed, records=', records.length);
    if (!records.length) { showToast('沒有記錄'); return; }
    try {
      if (!window.PlateStorageV3?.hasUnexportedRecords) {
        // Fallback: skip the "unexported" check if storage was not upgraded
        console.warn('[clear] hasUnexportedRecords not available, using default');
        setClearDialog({ step: 'confirm', unexported: false, count: records.length });
        return;
      }
      const unexported = await window.PlateStorageV3.hasUnexportedRecords();
      console.log('[clear] unexported =', unexported);
      setClearDialog({ step: unexported ? 'warn' : 'confirm', unexported, count: records.length });
    } catch (e) {
      console.error('[clear] error', e);
      showToast('無法開啟清除對話框: ' + e.message);
      // Still show a basic confirm even on error
      setClearDialog({ step: 'confirm', unexported: false, count: records.length });
    }
  }

  async function handleClearAction(action) {
    if (action === 'cancel') { setClearDialog(null); return; }
    if (action === 'export-csv') {
      try {
        await window.PlateStorageV3.downloadCSV();
        setClearDialog({ ...clearDialog, step: 'exported', exportKind: 'CSV' });
      } catch (e) { showToast('匯出失敗'); setClearDialog(null); }
      return;
    }
    if (action === 'export-pdf') {
      try {
        setClearDialog({ ...clearDialog, step: 'exporting', exportKind: 'PDF' });
        await window.PlateStorageV3.downloadPDF();
        setClearDialog({ ...clearDialog, step: 'exported', exportKind: 'PDF' });
      } catch (e) { showToast('匯出失敗'); setClearDialog(null); }
      return;
    }
    if (action === 'confirm-delete') {
      try {
        const n = records.length;
        await window.PlateStorageV3.clear();
        setClearDialog(null);
        refresh();
        showToast(`已清除 ${n} 條記錄`);
      } catch (e) { showToast('清除失敗'); setClearDialog(null); }
      return;
    }
  }

  async function handleDelete(plate) {
    if (!confirm(`刪除 ${plate}？`)) return;
    await window.PlateStorageV3.remove(plate);
    setDetail(null); refresh(); showToast('已刪除');
  }

  // Called by DetailModal when user saves a plate edit.
  // Returns { ok, error, merged } — component uses this to decide next step.
  // Wrapped in try/catch so we ALWAYS resolve and never leave DetailModal stuck.
  async function handleRename(oldPlate, newPlate, newDisplay) {
    let result;
    try {
      result = await window.PlateStorageV3.rename(oldPlate, newPlate, newDisplay);
    } catch (e) {
      console.error('[rename] storage error', e);
      showToast('儲存失敗: ' + (e.message || e));
      return { ok: false, error: String(e) };
    }
    if (result.ok) {
      try {
        await refresh();
        if (result.merged) {
          showToast(`已合併到 ${newPlate}`);
          setDetail(null);
        } else {
          showToast('已更新');
          const items = await window.PlateStorageV3.getAll();
          const updated = items.find(r => r.plate === newPlate);
          if (updated) setDetail(updated);
        }
      } catch (e) {
        console.error('[rename] post-save error', e);
        // Save actually succeeded — don't fail the operation
        showToast('已更新（頁面刷新失敗）');
      }
    } else {
      showToast(result.error || '更新失敗');
    }
    return result;
  }

  return (
    <>
      {/* ===== Camera half ===== */}
      <div className="cam-half">
        <video ref={videoRef} className="cam-video" playsInline muted />
        <div className="cam-overlay">
          <svg ref={overlayRef}></svg>
        </div>

        {/* HUD */}
        <div className="hud">
          <div className="brand">
            <span className={`dot ${cameraStatus === 'err' ? 'err' : (scanning ? 'warn' : '')}`}></span>
            {cameraStatus === 'err' ? '相機不可用' : (scanning ? '掃描中' : (modelReady ? '就緒 · HK' : '載入中'))}
          </div>
          <div className="hud-btns">
            <button className={`hud-btn ${debugMode ? 'on' : ''}`} onClick={() => setDebugMode(d => !d)} title="Debug">
              <svg viewBox="0 0 24 24"><path d="M12 2v6M12 16v6M4.93 4.93l4.24 4.24M14.83 14.83l4.24 4.24M2 12h6M16 12h6M4.93 19.07l4.24-4.24M14.83 9.17l4.24-4.24"/></svg>
            </button>
            <button className={`hud-btn ${torch ? 'on' : ''}`} onClick={toggleTorch} title="Torch">
              <svg viewBox="0 0 24 24"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            </button>
            <button className="hud-btn" onClick={() => setSoundOn(s => !s)} title="Sound">
              {soundOn ? (
                <svg viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>
              ) : (
                <svg viewBox="0 0 24 24"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
              )}
            </button>
          </div>
        </div>

        {/* Reticle */}
        <div className={`reticle ${scanning ? 'scanning' : ''}`}>
          <span className="c1"></span><span className="c2"></span>
          {scanning && <div className="scanline"></div>}
        </div>
        {!scanning && cameraStatus === 'ok' && !loading && (
          <div className="cam-hint">將車牌對準框內 · 按 ● 開始掃描</div>
        )}
        {cameraStatus === 'err' && !loading && (
          <div className="cam-hint">請允許相機權限，或用相片/影片模式</div>
        )}

        {/* Live chips */}
        <div className="live-chip">
          {liveChips.map(c => (
            <div key={c.id} className={`plate-chip ${c.isNew ? 'new' : ''}`} style={c.pending ? { opacity: 0.6 } : {}}>
              <span className="flag" style={{ background: 'rgba(0,122,255,0.15)', color: '#3b82f6' }}>HK</span>
              <span className="num">{c.display}</span>
              {c.pending && <span style={{ fontSize: 9, opacity: 0.8, color: '#fff' }}>投票中 {c.votes}/2</span>}
            </div>
          ))}
        </div>

        {/* Bottom controls */}
        <div className="cam-controls">
          <button className="side-btn" onClick={() => document.getElementById('photo-in').click()} title="Photo">
            <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
          </button>
          <button className={`shutter ${scanning ? 'on' : ''}`} onClick={() => setScanning(s => !s)} disabled={!modelReady} title="Scan"></button>
          <button className="side-btn" onClick={() => document.getElementById('video-in').click()} title="Video">
            <svg viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
          </button>
        </div>

        <input id="photo-in" type="file" accept="image/*" capture="environment" style={{ display: 'none' }} onChange={handlePhotoUpload} />
        <input id="video-in" type="file" accept="video/*" style={{ display: 'none' }} onChange={handleVideoUpload} />

        {loading && (
          <div className="loading">
            <div className="spinner"></div>
            <div className="msg">{loadMsg}</div>
            <div className="bar"><div style={{ width: `${loadProg * 100}%` }}></div></div>
            <div className="sub">首次載入需要下載約 60MB 模型<br />之後會自動 cache，開啟更快</div>
          </div>
        )}
        {loadErr && !loading && (
          <div className="loading">
            <div style={{ fontSize: 36 }}>⚠️</div>
            <div className="msg">載入失敗</div>
            <div className="sub" style={{ opacity: 0.8 }}>{loadErr}</div>
          </div>
        )}
      </div>

      {/* ===== Bottom sheet ===== */}
      <div className="sheet">
        <div className="sheet-handle"></div>
        <div className="sheet-head">
          <div className="sheet-title">
            <h1>記錄</h1>
            <span className="count">{records.length} 條 · 香港</span>
          </div>
          <div className="sheet-actions" style={{ position: 'relative' }}>
            <button onClick={() => setExportMenu(m => !m)} disabled={!records.length}>
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
              匯出
            </button>
            <button
              onClick={openClearDialog}
              disabled={!records.length}
              style={{ color: records.length ? 'var(--danger)' : undefined }}
              title="清除全部記錄"
            >
              <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6"/></svg>
              清除
            </button>
            {exportMenu && (
              <div className="export-menu">
                <button onClick={() => handleExport('csv')}>
                  <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                  匯出 CSV
                </button>
                <button onClick={() => handleExport('pdf')}>
                  <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12" y2="17"/></svg>
                  匯出 PDF
                </button>
              </div>
            )}
          </div>
        </div>

        <div className="search-wrap">
          <div className="search-inner">
            <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input className="search" placeholder="搜尋車牌…" value={search} onChange={e => setSearch(e.target.value.toUpperCase())} />
          </div>
        </div>

        {debugMode && debugData && (
          <div style={{ padding: '8px 16px', background: 'var(--surface)', margin: '0 16px 8px', borderRadius: 'var(--radius-sm)', fontSize: 10.5, fontFamily: 'var(--font-mono)', maxHeight: 200, overflowY: 'auto' }}>
            <div style={{ color: 'var(--text-3)', marginBottom: 4, fontWeight: 700 }}>DEBUG · {new Date(debugData.ts).toLocaleTimeString()} · {debugData.results.length} boxes</div>
            {debugData.results.map((r, i) => {
              const color = r.valid ? '#34c759' : (r.raw ? '#ff9500' : '#8e8e93');
              return (
                <div key={i} style={{ padding: '4px 0', borderTop: '1px solid var(--border)' }}>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <span style={{ color, minWidth: 10 }}>●</span>
                    <span style={{ color: 'var(--text-3)', minWidth: 38 }}>{Math.round((r.box.x2-r.box.x1))}px</span>
                    <span style={{ color: 'var(--text-3)', minWidth: 30 }}>{(r.box.conf * 100).toFixed(0)}%</span>
                    <span style={{ color: 'var(--text-3)' }}>{r.bg || '?'}</span>
                    {r.twoLine && <span style={{ color: 'var(--accent)', fontSize: 9, fontWeight: 700 }}>2L</span>}
                    <span style={{ color: 'var(--text)', fontWeight: 700, flex: 1 }}>{r.raw || '—'}</span>
                    <span style={{ color: 'var(--text-2)' }}>→</span>
                    <span style={{ color, fontWeight: 700 }}>{r.plate || 'x'}</span>
                  </div>
                  {(r.rejectReason || r.twoLineDebug) && (
                    <div style={{ paddingLeft: 16, marginTop: 2, color: 'var(--text-3)', fontSize: 9.5 }}>
                      {r.rejectReason && <span style={{ color: 'var(--danger)' }}>reject: {r.rejectReason}  </span>}
                      {r.twoLineDebug && <span>2L: [{r.twoLineDebug.top}]+[{r.twoLineDebug.bot}]</span>}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        )}

        <div className="list">
          {records.length === 0 ? (
            <div className="empty">
              <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 12h8M8 8h8M8 16h5"/></svg>
              <div className="t">未有記錄</div>
              <div className="d">開始掃描以記錄香港車牌<br />需要連續 2 次辨識到才會確認</div>
            </div>
          ) : (
            records.map(r => <RecordCard key={r.plate} rec={r} onOpen={() => setDetail(r)} />)
          )}
        </div>
      </div>

      {detail && (
        <DetailModal
          rec={detail}
          onClose={() => setDetail(null)}
          onDelete={handleDelete}
          onRename={handleRename}
          showToast={showToast}
        />
      )}
      {clearDialog && <ClearConfirm state={clearDialog} onAction={handleClearAction} />}
      {toast && <div className="toast">{toast}</div>}
    </>
  );
}

// Smart clear-confirmation dialog with 3 possible states:
//   warn      — records have unexported changes; offer export first
//   confirm   — already exported (or user chose to skip); final confirmation
//   exporting — PDF being generated
//   exported  — export just finished; asking whether to now delete
function ClearConfirm({ state, onAction }) {
  const { step, count, exportKind } = state;

  if (step === 'exporting') {
    return (
      <div className="confirm-back">
        <div className="confirm-card">
          <div className="confirm-icon info">
            <svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
          </div>
          <div className="confirm-title">正在生成 {exportKind}…</div>
          <div className="confirm-desc">請稍候</div>
        </div>
      </div>
    );
  }

  if (step === 'warn') {
    return (
      <div className="confirm-back" onClick={(e) => { if (e.target === e.currentTarget) onAction('cancel'); }}>
        <div className="confirm-card">
          <div className="confirm-icon warn">
            <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          </div>
          <div className="confirm-title">你未匯出過記錄</div>
          <div className="confirm-desc">
            有 <strong>{count} 條</strong>記錄未匯出。<br />
            清除之後<span className="highlight">無法復原</span>，建議先匯出。
          </div>
          <div className="confirm-actions">
            <button className="confirm-btn primary" onClick={() => onAction('export-csv')}>
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
              匯出 CSV 先
            </button>
            <button className="confirm-btn subtle" onClick={() => onAction('export-pdf')}>
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="12" y2="17"/></svg>
              匯出 PDF 先
            </button>
            <div className="confirm-divider"></div>
            <button className="confirm-btn danger" onClick={() => onAction('confirm-delete')}>
              <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
              我知道，直接清除
            </button>
            <button className="confirm-btn cancel" onClick={() => onAction('cancel')}>取消</button>
          </div>
        </div>
      </div>
    );
  }

  if (step === 'exported') {
    return (
      <div className="confirm-back" onClick={(e) => { if (e.target === e.currentTarget) onAction('cancel'); }}>
        <div className="confirm-card">
          <div className="confirm-icon danger">
            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
          </div>
          <div className="confirm-title">清除全部 {count} 條記錄？</div>
          <div className="confirm-desc">
            <span style={{ color: 'var(--success)', fontWeight: 600 }}>✓ {exportKind} 已匯出</span><br />
            此操作<strong>無法復原</strong>
          </div>
          <div className="confirm-actions">
            <button className="confirm-btn danger" onClick={() => onAction('confirm-delete')}>
              <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
              確定刪除
            </button>
            <button className="confirm-btn cancel" onClick={() => onAction('cancel')}>取消</button>
          </div>
        </div>
      </div>
    );
  }

  // step === 'confirm' (already exported previously)
  return (
    <div className="confirm-back" onClick={(e) => { if (e.target === e.currentTarget) onAction('cancel'); }}>
      <div className="confirm-card">
        <div className="confirm-icon danger">
          <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6M10 11v6M14 11v6M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
        </div>
        <div className="confirm-title">清除全部 {count} 條記錄？</div>
        <div className="confirm-desc">
          此操作<strong>無法復原</strong>
        </div>
        <div className="confirm-actions">
          <button className="confirm-btn danger" onClick={() => onAction('confirm-delete')}>
            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            確定刪除
          </button>
          <button className="confirm-btn cancel" onClick={() => onAction('cancel')}>取消</button>
        </div>
      </div>
    </div>
  );
}

function RecordCard({ rec, onOpen }) {
  return (
    <div className="record" onClick={onOpen}>
      <div className="rec-thumb">
        {rec.thumbnail ? <ThumbImg blob={rec.thumbnail} /> : <div className="none">無圖</div>}
      </div>
      <div className="rec-body">
        <div className="rec-line1">
          <span className="rec-plate">{rec.display}</span>
          <span className="badge HK">HK</span>
        </div>
        <div className="rec-meta">
          <span>{timeAgo(rec.lastSeen)}</span>
          {rec.count > 1 && <><span className="dot-sep">·</span><span className="rec-count">×{rec.count}</span></>}
        </div>
      </div>
      <div className="rec-arrow">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="9 18 15 12 9 6"/>
        </svg>
      </div>
    </div>
  );
}

function DetailModal({ rec, onClose, onDelete, onRename, showToast }) {
  const [editing, setEditing] = useState(false);
  const [inputVal, setInputVal] = useState(rec.plate);
  const [saving, setSaving] = useState(false);
  const inputRef = useRef(null);

  // Reset local state whenever rec changes
  useEffect(() => {
    setInputVal(rec.plate);
    setEditing(false);
  }, [rec.plate]);

  useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [editing]);

  const cleanedVal = (inputVal || '').toUpperCase().replace(/[^A-Z0-9]/g, '');
  const isValidHK = /^[A-Z0-9]{1,8}$/.test(cleanedVal);            // 1-8 alnum accepted
  const isStrictHK = /^[A-Z]{1,3}\d{1,4}$/.test(cleanedVal);       // classic layout
  const hasChange = cleanedVal !== rec.plate;

  function formatDisplay(plate) {
    // Insert space between letters and digits ONLY for classic HK format.
    // Personalised plates (like all-letter "GENIUS") stay as-is.
    if (!/^[A-Z]{1,3}\d{1,4}$/.test(plate)) return plate;
    const m = plate.match(/^([A-Z]+)(\d+)$/);
    return m ? `${m[1]} ${m[2]}` : plate;
  }

  async function handleSave() {
    if (!cleanedVal) { showToast?.('車牌不能為空'); return; }
    if (!hasChange) { setEditing(false); return; }
    setSaving(true);
    const display = isValidHK ? formatDisplay(cleanedVal) : cleanedVal;
    let result;
    try {
      result = await onRename(rec.plate, cleanedVal, display);
    } catch (e) {
      console.error('[edit] save failed', e);
      showToast?.('儲存失敗: ' + (e.message || e));
    } finally {
      // Always release the "saving" lock so the modal never gets stuck
      setSaving(false);
    }
    if (result?.ok) setEditing(false);
  }

  function handleCancel() {
    setInputVal(rec.plate);
    setEditing(false);
  }

  return (
    <div className="modal-back" onClick={(e) => { if (e.target === e.currentTarget && !editing) onClose(); }}>
      <div className="modal">
        <div className="modal-head">
          <div style={{ width: 30 }}></div>
          <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text)' }}>
            {editing ? '編輯車牌' : '車牌詳情'}
          </div>
          <button className="close" onClick={editing ? handleCancel : onClose}>
            <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>
        <div className="modal-body">
          <div className="detail-thumb">
            {rec.thumbnail ? <ThumbImg blob={rec.thumbnail} /> : <div className="np">未有截圖</div>}
          </div>

          {editing ? (
            <div style={{ marginBottom: 16 }}>
              <input
                ref={inputRef}
                className="plate-edit-input"
                value={inputVal}
                onChange={(e) => setInputVal(e.target.value)}
                onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') handleCancel(); }}
                placeholder="例如 AB1234"
                maxLength={10}
                autoCapitalize="characters"
                autoCorrect="off"
                spellCheck={false}
              />
              <div className="plate-edit-hint">
                {cleanedVal ? (
                  isStrictHK ? (
                    <span style={{ color: 'var(--success)' }}>✓ 標準香港車牌 · 顯示為「{formatDisplay(cleanedVal)}」</span>
                  ) : isValidHK ? (
                    <span style={{ color: 'var(--accent)' }}>✓ 自定義車牌 (1-8 位英文/數字)</span>
                  ) : (
                    <span style={{ color: 'var(--warn)' }}>⚠ 超過 8 位或包含特殊字符，仍可儲存</span>
                  )
                ) : (
                  <span style={{ color: 'var(--text-3)' }}>1-8 個英文字母或數字，例如 AB1234 / GENIUS / 12345</span>
                )}
              </div>
            </div>
          ) : (
            <>
              <div className="detail-plate">
                {rec.display}
                {rec.edited && (
                  <span style={{ fontSize: 10, fontWeight: 700, background: 'rgba(255,149,0,0.15)', color: 'var(--warn)', padding: '3px 6px', borderRadius: 4, marginLeft: 8, verticalAlign: 'middle', letterSpacing: '0.05em' }}>
                    已編輯
                  </span>
                )}
              </div>
              <div className="detail-region">
                <span className="badge HK" style={{ fontSize: 12, padding: '4px 10px' }}>香港 Hong Kong</span>
              </div>
              <div className="info-list">
                <div className="info-row">
                  <span className="k">首次識別</span>
                  <span className="v mono">{window.PlateStorageV3.fmtDate(rec.firstSeen)}</span>
                </div>
                <div className="info-row">
                  <span className="k">最後識別</span>
                  <span className="v mono">{window.PlateStorageV3.fmtDate(rec.lastSeen)}</span>
                </div>
                <div className="info-row">
                  <span className="k">出現次數</span>
                  <span className="v">{rec.count} 次</span>
                </div>
                <div className="info-row">
                  <span className="k">信心度</span>
                  <span className="v">{(rec.confidence * 100).toFixed(0)}%</span>
                </div>
              </div>
            </>
          )}

          <div className="action-row">
            {editing ? (
              <>
                <button className="action-btn secondary" onClick={handleCancel} disabled={saving}>
                  取消
                </button>
                <button
                  className="action-btn primary"
                  onClick={handleSave}
                  disabled={saving || !cleanedVal || !hasChange}
                >
                  <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                  {saving ? '儲存中…' : '儲存'}
                </button>
              </>
            ) : (
              <>
                <button className="action-btn secondary" onClick={() => setEditing(true)}>
                  <svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                  編輯
                </button>
                <button className="action-btn danger" onClick={() => onDelete(rec.plate)}>
                  <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                  刪除
                </button>
              </>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function ThumbImg({ blob }) {
  const [url, setUrl] = useState(null);
  useEffect(() => {
    if (!blob) return;
    const u = URL.createObjectURL(blob);
    setUrl(u);
    return () => URL.revokeObjectURL(u);
  }, [blob]);
  return url ? <img src={url} alt="" /> : null;
}

function timeAgo(ts) {
  const diff = (Date.now() - ts) / 1000;
  if (diff < 10) return '剛剛';
  if (diff < 60) return `${Math.floor(diff)}秒前`;
  if (diff < 3600) return `${Math.floor(diff / 60)}分鐘前`;
  if (diff < 86400) return `${Math.floor(diff / 3600)}小時前`;
  const d = new Date(ts);
  return `${d.getMonth() + 1}/${d.getDate()} ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);