// 案件詳細視窗、狀態列表視窗、案件列表（表格 + 卡片）、印刷統計卡片
const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React;

// ── Print Stats Card ───────────────────────────────────────────────────────────
function PrintStatsCard({ cases, year, month, onChangeYear, onChangeMonth, availableYears }) {
  const stats = window.computePrintStats(cases, year, month);
  const rangeLabel = (year === 'all' && month === 'all')
    ? '全部期間'
    : `${year === 'all' ? '全部年份' : year + ' 年'}${month === 'all' ? '' : ' · ' + parseInt(month, 10) + ' 月'}`;
  return (
    <div className="print-stats">
      <div className="print-stats-header">
        <div className="ps-title">
          <window.Icon.Printer />
          <span>印刷統計</span>
          <span className="ps-badge">{rangeLabel}</span>
        </div>
        <div className="ps-filters">
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>年份</span>
          <select className="tb-select" value={year} onChange={(e) => onChangeYear(e.target.value)}>
            <option value="all">全部</option>
            {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
          </select>
          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginLeft: 4 }}>月份</span>
          <select className="tb-select" value={month} onChange={(e) => onChangeMonth(e.target.value)}>
            <option value="all">全部</option>
            {Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0')).map(m => (
              <option key={m} value={m}>{parseInt(m, 10)} 月</option>
            ))}
          </select>
        </div>
      </div>
      <div className="print-stats-grid">
        <div className="ps-cell">
          <div className="ps-cell-label"><window.Icon.Printer /> 靈前照</div>
          <div className="ps-cell-num">{stats.photo}<span className="ps-cell-unit">份</span></div>
          <div className="ps-cell-sub">範圍內 {stats.casesCount} 筆案件</div>
        </div>
        <div className="ps-cell">
          <div className="ps-cell-label"><window.Icon.Printer /> 流程（小電視）</div>
          <div className="ps-cell-num">{stats.process}<span className="ps-cell-unit">份</span></div>
          <div className="ps-cell-sub">每案約 1 份</div>
        </div>
        <div className="ps-cell">
          <div className="ps-cell-label"><window.Icon.Printer /> 年曆</div>
          <div className="ps-cell-num">{stats.calendar}<span className="ps-cell-unit">份</span></div>
          <div className="ps-cell-sub">數量最多</div>
        </div>
        <div className="ps-cell total">
          <div className="ps-cell-label"><window.Icon.Printer /> 印刷總計</div>
          <div className="ps-cell-num">{stats.total}<span className="ps-cell-unit">份</span></div>
          <div className="ps-cell-sub">靈前照 + 流程 + 年曆</div>
        </div>
      </div>
    </div>
  );
}

// ── Status list modal ──────────────────────────────────────────────────────────
function StatusListModal({ status, cases, onOpenCase, onClose }) {
  let filtered = status === 'urgent'
    ? cases.filter(c => window.isUrgent(c))
    : cases.filter(c => window.effectiveStatus(c) === status);
  filtered.sort((a, b) => status === 'urgent'
    ? a.funeralDate.localeCompare(b.funeralDate)
    : b.date.localeCompare(a.date));

  const titlePill = status === 'urgent'
    ? <span className="status-pill" style={{ background: '#fef2f2', color: '#dc2626' }}><span className="dot" style={{ background: '#dc2626' }}></span>緊急</span>
    : <span className={`status-pill ${status}`}><span className="dot"></span>{window.STATUS_LABEL[status]}</span>;

  return (
    <window.Modal size="lg"
      title={<>{titlePill}<span style={{ color: 'var(--text-soft)', fontSize: 13, fontWeight: 400 }}>
        {filtered.length} 筆案件{status === 'urgent' && '（告別式 < 2 天且未完成）'}
      </span></>}
      onClose={onClose}
    >
      {filtered.length === 0 ? (
        <div className="empty-state">
          <div className="icon">∅</div>
          <div>{status === 'urgent' ? '目前沒有緊急案件 ✨' : `目前沒有「${window.STATUS_LABEL[status]}」狀態的案件`}</div>
        </div>
      ) : (
        <div className="case-list-modal">
          {filtered.map(c => {
            const doneCount = window.PRODUCTION_ITEM_KEYS.filter(k => c.items[k].done).length;
            const days = window.daysUntilFuneral(c);
            const dayLabel = days < 0 ? `已過 ${-days} 天` : days === 0 ? '今日' : `剩 ${days} 天`;
            return (
              <div key={c.id} className="case-list-modal-row"
                onClick={() => { onOpenCase(c.id); onClose(); }} style={{ cursor: 'pointer' }}>
                <span className="clm-id">{c.id}</span>
                <span className="clm-name">{c.name}</span>
                <span className="clm-director">禮儀師 · {c.director}</span>
                <span className="clm-date">
                  {c.funeralDate}
                  {status === 'urgent' && (
                    <span style={{ marginLeft: 6, padding: '1px 6px', borderRadius: 4, background: '#fee2e2', color: '#b91c1c', fontSize: 10.5, fontWeight: 500 }}>
                      {dayLabel}
                    </span>
                  )}
                </span>
                <span className="clm-progress" title={`已完成 ${doneCount}/4 項`}>
                  {window.PRODUCTION_ITEM_KEYS.map(k => (
                    <span key={k} className={`progress-pip ${c.items[k].done ? 'done' : ''}`} title={window.PRODUCTION_ITEM_LABELS[k]}></span>
                  ))}
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-soft)', marginLeft: 6 }}>{doneCount}/4</span>
                </span>
              </div>
            );
          })}
        </div>
      )}
    </window.Modal>
  );
}

// ── Case detail modal ──────────────────────────────────────────────────────────
function CaseDetailModal({
  caseItem, onClose, onSave, onItemClick, onItemEdit, onItemNotNeeded,
  memorialLocations, funeralLocations, directors,
  onAddMemorialLocation, onAddFuneralLocation, onAddDirector,
  onDeleteMemorialLocation, onDeleteFuneralLocation, onDeleteDirector,
  saving,
}) {
  const [draft, setDraft] = useStateD(caseItem);
  const [lockWarning, setLockWarning] = useStateD(false);
  const heartbeatRef = useRefD(null);
  const pollRef = useRefD(null);

  useEffectD(() => { setDraft(caseItem); }, [caseItem]);

  // Lock management
  useEffectD(() => {
    window.api.acquireLock(caseItem.id);

    heartbeatRef.current = setInterval(() => {
      window.api.acquireLock(caseItem.id);
    }, 90000);

    const checkLocks = async () => {
      const result = await window.api.getLocks(caseItem.id).catch(() => ({ hasOthers: false }));
      setLockWarning(result.hasOthers);
    };
    checkLocks();
    pollRef.current = setInterval(checkLocks, 15000);

    return () => {
      window.api.releaseLock(caseItem.id);
      clearInterval(heartbeatRef.current);
      clearInterval(pollRef.current);
    };
  }, [caseItem.id]);

  const updateField = (k, v) => setDraft(prev => ({ ...prev, [k]: v }));
  const updateItemField = (itemKey, field, val) => setDraft(prev => ({
    ...prev,
    items: { ...prev.items, [itemKey]: { ...prev.items[itemKey], [field]: val } },
  }));
  const status = window.effectiveStatus(draft);

  return (
    <window.Modal size="xl"
      title={<>
        <span>案件詳細</span>
        <window.StatusPill status={status} manualOverride={!!draft.manualStatus} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-faint)' }}>{draft.id}</span>
      </>}
      onClose={onClose}
      footer={<>
        <button className="btn-ghost" onClick={onClose}>取消</button>
        <button className="btn-primary" onClick={() => onSave(draft)} disabled={saving}>
          {saving ? '儲存中…' : '儲存'}
        </button>
      </>}
    >
      {lockWarning && (
        <div className="conflict-banner">
          <window.Icon.Warning /> 另有其他使用者正在檢視此案件，請注意儲存時可能發生資料衝突。
        </div>
      )}

      <div className="detail-section-title">基本資料</div>
      <div className="detail-grid">
        <div className="detail-field">
          <label>日期</label>
          <input className="mono" type="date" value={draft.date} onChange={(e) => updateField('date', e.target.value)} />
        </div>
        <div className="detail-field">
          <label>案名</label>
          <input type="text" value={draft.name} onChange={(e) => updateField('name', e.target.value)} />
        </div>
        <div className="detail-field">
          <label>豎靈地點</label>
          <window.EditableSelect value={draft.memorialLocation} options={memorialLocations}
            onChange={(v) => updateField('memorialLocation', v)}
            onAddOption={onAddMemorialLocation} onDeleteOption={onDeleteMemorialLocation}
            placeholder="選擇豎靈地點" />
        </div>
        <div className="detail-field">
          <label>禮儀師</label>
          <window.EditableSelect value={draft.director} options={directors}
            onChange={(v) => updateField('director', v)}
            onAddOption={onAddDirector} onDeleteOption={onDeleteDirector}
            placeholder="選擇禮儀師" />
        </div>
        <div className="detail-field">
          <label>告別式日期</label>
          <input className="mono" type="date" value={draft.funeralDate} onChange={(e) => updateField('funeralDate', e.target.value)} />
        </div>
        <div className="detail-field">
          <label>告別式地點</label>
          <window.EditableSelect value={draft.funeralLocation} options={funeralLocations}
            onChange={(v) => updateField('funeralLocation', v)}
            onAddOption={onAddFuneralLocation} onDeleteOption={onDeleteFuneralLocation}
            placeholder="選擇告別式地點" />
        </div>
      </div>

      <div className="detail-section-title">企劃製作項目</div>
      <div className="detail-items">
        {window.PRODUCTION_ITEM_KEYS.map(k => {
          const item = draft.items[k];
          const label = window.PRODUCTION_ITEM_LABELS[k];
          const isPrintable = window.IS_PRINTABLE(k);
          const notNeeded = !!item.notNeeded;
          const stateClass = notNeeded ? 'not-needed' : (item.done ? 'done' : '');
          // 靈前照、年曆：顯示數量輸入（process 有獨立的 picker，video 不印）
          const showQtyInput = isPrintable && k !== 'process' && !notNeeded;
          const qtyVal = item.printQty != null ? item.printQty : 1;

          return (
            <div key={k} className={`detail-item-card ${stateClass}`}>
              <div className="die-label">{label}</div>
              <div className="die-state">{notNeeded ? '不需製作' : (item.done ? '已完成' : '待製作')}</div>
              <div className="die-date">
                {k === 'process' && item.value && !notNeeded ? <><span>類型：<strong>{item.value}</strong></span><br /></> : null}
                {notNeeded ? '—' : (item.done ? item.date : '—')}
              </div>
              {showQtyInput && (
                <div className="die-qty-ctrl">
                  <span className="die-qty-label">數量</span>
                  <div className="qty-stepper">
                    <button type="button" className="qty-step-btn"
                      onClick={() => updateItemField(k, 'printQty', Math.max(0, qtyVal - 1))}>−</button>
                    <input type="number" min="0" className="qty-step-input" value={qtyVal}
                      onChange={(e) => updateItemField(k, 'printQty', Math.max(0, parseInt(e.target.value) || 0))} />
                    <button type="button" className="qty-step-btn"
                      onClick={() => updateItemField(k, 'printQty', qtyVal + 1)}>＋</button>
                    <span className="qty-step-unit">份</span>
                  </div>
                </div>
              )}
              <div className="die-actions">
                <button className="die-not-needed" onClick={() => onItemNotNeeded(draft.id, k)}
                  title={notNeeded ? '取消「不需要」標記' : '此項不需製作'}>
                  {notNeeded ? '✓ 不需要' : '不需要'}
                </button>
                <button className="die-action" onClick={() => item.done ? onItemEdit(draft.id, k) : onItemClick(draft.id, k)}>
                  {item.done ? '編輯 / 還原' : '標記完成'}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </window.Modal>
  );
}

// ── Case row (table) ───────────────────────────────────────────────────────────
function CaseRow({ caseItem, onContextMenu, onOpen, onItemClick, onItemEdit }) {
  const status = window.effectiveStatus(caseItem);
  const urgent = window.isUrgent(caseItem);
  return (
    <tr onContextMenu={(e) => { e.preventDefault(); onContextMenu(e.clientX, e.clientY, caseItem.id); }}
      onClick={() => onOpen(caseItem.id)} style={{ cursor: 'pointer' }}>
      <td className="col-date">{caseItem.date}</td>
      <td className="col-name">
        {urgent && <span title="緊急" style={{ display: 'inline-block', marginRight: 6, color: '#dc2626', verticalAlign: 'middle' }}><window.Icon.Warning /></span>}
        {caseItem.name}
        <span className="case-id">{caseItem.id}</span>
      </td>
      <td>{caseItem.memorialLocation}</td>
      <td className="col-director">{caseItem.director}</td>
      <td className="col-funeral-date">{caseItem.funeralDate}</td>
      <td>{caseItem.funeralLocation}</td>
      {window.PRODUCTION_ITEM_KEYS.map(k => (
        <td key={k}>
          <window.ItemCell itemKey={k} item={caseItem.items[k]}
            onClick={() => caseItem.items[k].done ? onItemEdit(caseItem.id, k) : onItemClick(caseItem.id, k)} />
        </td>
      ))}
      <td><window.StatusPill status={status} manualOverride={!!caseItem.manualStatus} /></td>
      <td>
        <div className="row-actions" onClick={(e) => e.stopPropagation()}>
          <button className="row-action-btn" title="更多操作"
            onClick={(e) => onContextMenu(e.clientX, e.clientY, caseItem.id)}>
            <window.Icon.More />
          </button>
        </div>
      </td>
    </tr>
  );
}

// ── Case card ──────────────────────────────────────────────────────────────────
function CaseCard({ caseItem, onContextMenu, onOpen, onItemClick, onItemEdit }) {
  const status = window.effectiveStatus(caseItem);
  const urgent = window.isUrgent(caseItem);
  return (
    <div className="case-card"
      style={urgent ? { borderColor: '#fecaca', boxShadow: '0 0 0 1px #fecaca' } : {}}
      onContextMenu={(e) => { e.preventDefault(); onContextMenu(e.clientX, e.clientY, caseItem.id); }}>
      <div className="cc-header">
        <div>
          <div className="cc-name">
            {urgent && <span title="緊急" style={{ display: 'inline-block', marginRight: 6, color: '#dc2626', verticalAlign: 'middle' }}><window.Icon.Warning /></span>}
            {caseItem.name}
          </div>
          <div className="cc-id">{caseItem.id} · {caseItem.date}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <window.StatusPill status={status} manualOverride={!!caseItem.manualStatus} />
          <button className="row-action-btn" title="更多操作"
            onClick={(e) => { e.stopPropagation(); onContextMenu(e.clientX, e.clientY, caseItem.id); }}>
            <window.Icon.More />
          </button>
        </div>
      </div>
      <div className="cc-meta">
        <div><div className="label">豎靈地點</div><div className="value">{caseItem.memorialLocation}</div></div>
        <div><div className="label">禮儀師</div><div className="value">{caseItem.director}</div></div>
        <div><div className="label">告別式</div><div className="value mono">{caseItem.funeralDate}</div></div>
        <div><div className="label">告別式地點</div><div className="value">{caseItem.funeralLocation}</div></div>
      </div>
      <div className="cc-items">
        {window.PRODUCTION_ITEM_KEYS.map(k => (
          <window.ItemCell key={k} itemKey={k} item={caseItem.items[k]}
            onClick={() => caseItem.items[k].done ? onItemEdit(caseItem.id, k) : onItemClick(caseItem.id, k)} />
        ))}
      </div>
      <div className="cc-footer">
        <button className="btn-text" onClick={() => onOpen(caseItem.id)}>檢視 / 編輯詳細 →</button>
        <span style={{ fontSize: 11, color: 'var(--text-faint)', fontFamily: 'var(--font-mono)' }}>
          {window.PRODUCTION_ITEM_KEYS.filter(k => caseItem.items[k].done).length}/4 項已完成
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { StatusListModal, CaseDetailModal, CaseRow, CaseCard, PrintStatsCard });