// =============================================================
// AdminDashboard.jsx — 月次集計ダッシュボード + センター別集計詳細
// =============================================================

const { useState: useStateAD, useMemo: useMemoAD } = React;

// ─── OK率バーチャート ────────────────────────────────────────

const OkRateChart = ({ data }) => {
  const MAX_H = 84; // px
  const getColor = (rate, hasData) => {
    if (!hasData) return '#e2e8f0';
    if (rate >= 95) return '#6366f1';
    if (rate >= 90) return '#3b82f6';
    if (rate >= 80) return '#f59e0b';
    return '#ef4444';
  };
  return (
    <div className="flex items-end gap-0.5" style={{ height: MAX_H + 28 }}>
      {data.map(({ label, okRate, total }, i) => {
        const hasData = total > 0;
        const barH    = hasData ? Math.max(2, (okRate / 100) * MAX_H) : 2;
        return (
          <div key={i} className="flex-1 flex flex-col items-center gap-0.5">
            <span className="text-[8px] font-medium leading-none mb-0.5" style={{ color: hasData ? '#64748b' : 'transparent' }}>
              {hasData ? Math.round(okRate) : '0'}
            </span>
            <div
              className="w-full rounded-sm transition-all"
              style={{ height: barH, backgroundColor: getColor(okRate, hasData) }}
            />
            <span className="text-[8px] text-slate-400 text-center w-full truncate mt-0.5">{label}</span>
          </div>
        );
      })}
    </div>
  );
};

// =============================================================
// 月次集計ダッシュボード
// =============================================================

const AdminDashboardMonthly = ({ appData, navigate }) => {
  const [centerFilter, setCenterFilter] = useStateAD('all');

  // 直近12ヶ月キー
  const monthKeys = useMemoAD(() => {
    const months = [];
    const now = new Date();
    for (let i = 11; i >= 0; i--) {
      const d     = new Date(now.getFullYear(), now.getMonth() - i, 1);
      const key   = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
      const label = i === 0 ? '今月' : `${d.getMonth() + 1}月`;
      months.push({ key, label });
    }
    return months;
  }, []);

  // フィルタ後レコード
  const filtRecs = useMemoAD(() => {
    const recs = appData.checkRecords || [];
    if (centerFilter === 'all') return recs;
    const cid    = parseInt(centerFilter);
    const areaIds = window.MASTER_AREAS.filter(a => a.center_id === cid).map(a => a.id);
    return recs.filter(r => areaIds.includes(r.area_id));
  }, [appData.checkRecords, centerFilter]);

  const filtRes = useMemoAD(() => {
    const recIds = new Set(filtRecs.map(r => r.id));
    return (appData.checkResults || []).filter(r => recIds.has(r.check_record_id));
  }, [filtRecs, appData.checkResults]);

  // 月別集計
  const monthlyData = useMemoAD(() => {
    const recMap = {};
    filtRecs.forEach(r => { recMap[r.id] = r.check_date.substring(0, 7); });
    const stats = {};
    filtRes.forEach(res => {
      const m = recMap[res.check_record_id];
      if (!m) return;
      if (!stats[m]) stats[m] = { ok: 0, ng: 0 };
      res.result === 'OK' ? stats[m].ok++ : stats[m].ng++;
    });
    return monthKeys.map(({ key, label }) => {
      const s  = stats[key] || { ok: 0, ng: 0 };
      const total  = s.ok + s.ng;
      const okRate = total > 0 ? (s.ok / total * 100) : 0;
      return { key, label, ok: s.ok, ng: s.ng, total, okRate };
    });
  }, [filtRecs, filtRes, monthKeys]);

  // 全期間サマリ
  const summary = useMemoAD(() => {
    const total = filtRes.length;
    const ok    = filtRes.filter(r => r.result === 'OK').length;
    return { total, ok, ng: total - ok, okRate: total > 0 ? (ok / total * 100) : 0 };
  }, [filtRes]);

  // カテゴリ別NG
  const ngByCategory = useMemoAD(() => {
    const ngRes = filtRes.filter(r => r.result === 'NG');
    return window.MASTER_CHECK_CATEGORIES.map(cat => {
      const ids  = window.MASTER_CHECK_ITEMS.filter(i => i.category_id === cat.id).map(i => i.id);
      const ngCnt = ngRes.filter(r => ids.includes(r.check_item_id)).length;
      return { category: cat, ngCnt };
    }).sort((a, b) => b.ngCnt - a.ngCnt);
  }, [filtRes]);

  const maxNg = ngByCategory[0]?.ngCnt || 1;

  return (
    <div className="p-6 max-w-5xl space-y-6">
      {/* ヘッダ */}
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-xl font-bold text-slate-800">月次集計ダッシュボード</h1>
          <p className="text-sm text-slate-500 mt-0.5">直近12ヶ月の傾向分析</p>
        </div>
        <select
          value={centerFilter}
          onChange={e => setCenterFilter(e.target.value)}
          className="text-sm border border-slate-300 rounded-xl px-3 py-2 bg-white outline-none focus:ring-2 focus:ring-indigo-300"
        >
          <option value="all">全センター</option>
          {window.MASTER_CENTERS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
      </div>

      {/* OK率チャート */}
      <div className="bg-white rounded-2xl border border-slate-200 p-5">
        <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
          <h2 className="text-sm font-bold text-slate-700">月次 OK率推移（%）</h2>
          <div className="flex items-center gap-3 text-[10px] text-slate-400">
            {[['#6366f1','≥95%'],['#3b82f6','90–94%'],['#f59e0b','80–89%'],['#ef4444','<80%']].map(([c, l]) => (
              <span key={l} className="flex items-center gap-1">
                <span className="w-2 h-2 rounded-sm inline-block flex-shrink-0" style={{ backgroundColor: c }} />{l}
              </span>
            ))}
          </div>
        </div>
        <OkRateChart data={monthlyData} />
      </div>

      {/* サマリ + NG カテゴリ */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        {/* 全期間サマリ */}
        <div className="bg-white rounded-2xl border border-slate-200 p-5 space-y-4">
          <h2 className="text-sm font-bold text-slate-700">全期間サマリ</h2>
          {[
            { l: '総チェック結果数', v: summary.total.toLocaleString(), u: '件', c: '' },
            { l: 'OK件数', v: summary.ok.toLocaleString(), u: '件', c: '#22c55e' },
            { l: 'NG件数', v: summary.ng.toLocaleString(), u: '件', c: '#ef4444' },
            { l: 'OK率', v: summary.okRate.toFixed(1), u: '%', c: summary.okRate >= 90 ? '#22c55e' : '#f59e0b' },
          ].map(({ l, v, u, c }) => (
            <div key={l} className="flex items-center justify-between">
              <span className="text-sm text-slate-500">{l}</span>
              <span className="text-sm font-bold" style={{ color: c || '#1e293b' }}>{v}<span className="font-normal text-slate-400 ml-0.5 text-xs">{u}</span></span>
            </div>
          ))}
          <button
            onClick={() => navigate('CENTER_DETAIL')}
            className="w-full py-2 text-xs font-semibold text-indigo-600 bg-indigo-50 rounded-xl hover:bg-indigo-100 transition-colors mt-2"
          >センター別詳細を見る →</button>
        </div>

        {/* カテゴリ別NG */}
        <div className="bg-white rounded-2xl border border-slate-200 p-5">
          <h2 className="text-sm font-bold text-slate-700 mb-4">カテゴリ別 NG件数</h2>
          <div className="space-y-4">
            {ngByCategory.map(({ category, ngCnt }) => (
              <div key={category.id}>
                <div className="flex justify-between text-xs mb-1">
                  <span className="text-slate-600">{category.name}</span>
                  <span className="font-bold text-slate-700">{ngCnt}件</span>
                </div>
                <div className="h-1.5 bg-slate-100 rounded-full">
                  <div className="h-1.5 rounded-full transition-all" style={{ width: `${ngCnt / maxNg * 100}%`, backgroundColor: '#ef4444' }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// =============================================================
// センター別集計詳細
// =============================================================

const AdminCenterDetail = ({ appData, navigate, screenParams }) => {
  const initCenter = (window.MASTER_CENTERS.find(c => c.id === screenParams?.centerId) || window.MASTER_CENTERS[0])?.id || 1;
  const [selCenter, setSelCenter] = useStateAD(initCenter);

  const areas = window.MASTER_AREAS.filter(a => a.center_id === selCenter && a.is_active);

  const areaStats = useMemoAD(() => {
    return areas.map(area => {
      const recs    = (appData.checkRecords || []).filter(r => r.area_id === area.id);
      const recIds  = new Set(recs.map(r => r.id));
      const res     = (appData.checkResults || []).filter(r => recIds.has(r.check_record_id));
      const total   = res.length;
      const ok      = res.filter(r => r.result === 'OK').length;
      const ng      = total - ok;
      const okRate  = total > 0 ? (ok / total * 100) : 0;
      return { area, recCnt: recs.length, total, ok, ng, okRate };
    });
  }, [areas, appData]);

  const topNgItems = useMemoAD(() => {
    const areaIds = areas.map(a => a.id);
    const recs    = (appData.checkRecords  || []).filter(r => areaIds.includes(r.area_id));
    const recIds  = new Set(recs.map(r => r.id));
    const ngRes   = (appData.checkResults  || []).filter(r => recIds.has(r.check_record_id) && r.result === 'NG');
    const cnt = {};
    ngRes.forEach(r => { cnt[r.check_item_id] = (cnt[r.check_item_id] || 0) + 1; });
    return Object.entries(cnt)
      .map(([id, count]) => ({ item: window.MASTER_CHECK_ITEMS.find(i => i.id === parseInt(id)), count }))
      .filter(({ item }) => !!item)
      .sort((a, b) => b.count - a.count)
      .slice(0, 5);
  }, [areas, appData]);

  const center = window.MASTER_CENTERS.find(c => c.id === selCenter);

  return (
    <div className="p-6 max-w-5xl space-y-6">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <h1 className="text-xl font-bold text-slate-800">センター別集計詳細</h1>
        <div className="flex gap-2">
          {window.MASTER_CENTERS.map(c => (
            <button
              key={c.id}
              onClick={() => setSelCenter(c.id)}
              className={`px-3 py-1.5 rounded-xl text-xs font-semibold transition-all ${
                selCenter === c.id
                  ? 'bg-indigo-600 text-white'
                  : 'bg-white border border-slate-200 text-slate-600 hover:border-indigo-300'
              }`}
            >
              {c.name.replace('物流センター', 'センター')}
            </button>
          ))}
        </div>
      </div>

      {/* エリア別テーブル */}
      <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3 bg-slate-50 border-b border-slate-100">
          <span className="text-sm font-bold text-slate-700">{center?.name}　エリア別集計</span>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-100 text-xs font-bold text-slate-500">
                <th className="text-left  px-5 py-3">エリア</th>
                <th className="text-right px-4 py-3">チェック回数</th>
                <th className="text-right px-4 py-3">OK</th>
                <th className="text-right px-4 py-3">NG</th>
                <th className="text-right px-4 py-3">OK率</th>
                <th className="px-5 py-3 w-28">傾向</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {areaStats.map(({ area, recCnt, ok, ng, total, okRate }) => (
                <tr key={area.id} className="hover:bg-slate-50 transition-colors">
                  <td className="px-5 py-3 font-medium text-slate-700">{area.name}</td>
                  <td className="px-4 py-3 text-right text-slate-600">{recCnt}</td>
                  <td className="px-4 py-3 text-right font-semibold text-green-600">{ok}</td>
                  <td className="px-4 py-3 text-right font-semibold text-red-500">{ng}</td>
                  <td className="px-4 py-3 text-right">
                    <span className="font-bold" style={{ color: total > 0 ? (okRate >= 90 ? '#22c55e' : okRate >= 80 ? '#f59e0b' : '#ef4444') : '#94a3b8' }}>
                      {total > 0 ? `${okRate.toFixed(1)}%` : '—'}
                    </span>
                  </td>
                  <td className="px-5 py-3">
                    {total > 0 && (
                      <div className="flex-1 h-1.5 bg-slate-100 rounded-full w-20">
                        <div className="h-1.5 rounded-full transition-all" style={{ width: `${okRate}%`, backgroundColor: okRate >= 90 ? '#22c55e' : okRate >= 80 ? '#f59e0b' : '#ef4444' }} />
                      </div>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Top NG 項目 */}
      {topNgItems.length > 0 && (
        <div className="bg-white rounded-2xl border border-slate-200 p-5">
          <h2 className="text-sm font-bold text-slate-700 mb-4">NG 頻度 上位5項目</h2>
          <div className="space-y-3">
            {topNgItems.map(({ item, count }, i) => {
              const maxCnt = topNgItems[0]?.count || 1;
              const cat    = window.MASTER_CHECK_CATEGORIES.find(c => c.id === item.category_id);
              return (
                <div key={item.id} className="flex items-center gap-3">
                  <span className="w-5 text-xs font-bold text-slate-400 flex-shrink-0">{i + 1}</span>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between text-xs mb-1">
                      <span className="text-slate-700 font-medium truncate">{item.name}</span>
                      <span className="font-bold text-red-600 ml-2 flex-shrink-0">{count}件</span>
                    </div>
                    <div className="h-1.5 bg-slate-100 rounded-full">
                      <div className="h-1.5 bg-red-400 rounded-full transition-all" style={{ width: `${count / maxCnt * 100}%` }} />
                    </div>
                    <span className="text-[10px] text-slate-400">{cat?.name}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { AdminDashboardMonthly, AdminCenterDetail, OkRateChart });