// =============================================================
// AdminHome.jsx — 管理者ホーム画面
// =============================================================

const AdminHome = ({ appData, navigate }) => {
  const {
    BarChart2, Building2, Download, Layers,
    FilePlus, CheckSquare, AlertCircle, ChevronRight, ClipboardList, AlertTriangle,
  } = window.LucideReact;

  // 直近30日
  const cutoffStr = (() => {
    const d = new Date(); d.setDate(d.getDate() - 30);
    return d.toISOString().split('T')[0];
  })();

  const recentRecs = (appData.checkRecords  || []).filter(r => r.check_date >= cutoffStr);
  const recIds     = new Set(recentRecs.map(r => r.id));
  const recentRes  = (appData.checkResults  || []).filter(r => recIds.has(r.check_record_id));
  const totalRes   = recentRes.length;
  const okRes      = recentRes.filter(r => r.result === 'OK').length;
  const okRate     = totalRes > 0 ? (okRes / totalRes * 100) : 0;

  const allOrders      = appData.correctionOrders  || [];
  const allReports     = appData.correctionReports || [];
  const pendingOrders  = allOrders.filter(o => o.status === 'pending' || o.status === 'rejected');
  const awaitingReport = allReports.filter(r => r.review_status === '承認待ち');

  const cutoffStr30 = (() => {
    const d = new Date(); d.setDate(d.getDate() - 30);
    return d.toISOString().split('T')[0];
  })();
  const recentIncidents = (appData.incidentReports || []).filter(r => r.discovery_date >= cutoffStr30);

  const statCards = [
    { label: '直近30日 チェック件数', val: recentRecs.length, unit: '件', Icon: ClipboardList, ic: '#6366f1', bg: '#eef2ff' },
    { label: '直近30日 OK率', val: okRate.toFixed(1), unit: '%', Icon: CheckSquare, ic: okRate >= 90 ? '#22c55e' : '#f59e0b', bg: okRate >= 90 ? '#f0fdf4' : '#fffbeb' },
    { label: '要対応 是正指示', val: pendingOrders.length, unit: '件', Icon: AlertCircle, ic: pendingOrders.length > 0 ? '#ef4444' : '#22c55e', bg: pendingOrders.length > 0 ? '#fef2f2' : '#f0fdf4' },
    { label: '承認待ち 報告', val: awaitingReport.length, unit: '件', Icon: FilePlus, ic: awaitingReport.length > 0 ? '#f59e0b' : '#22c55e', bg: awaitingReport.length > 0 ? '#fffbeb' : '#f0fdf4' },
    { label: '直近30日 ヒヤリハット', val: recentIncidents.length, unit: '件', Icon: AlertTriangle, ic: recentIncidents.length > 0 ? '#d97706' : '#22c55e', bg: recentIncidents.length > 0 ? '#fffbeb' : '#f0fdf4' },
  ];

  const quickLinks = [
    { id: 'DASHBOARD_MONTHLY',     label: '月次集計',        Icon: BarChart2,    ic: '#6366f1', bg: '#eef2ff' },
    { id: 'CENTER_DETAIL',         label: 'センター別集計',  Icon: Building2,    ic: '#0ea5e9', bg: '#f0f9ff' },
    { id: 'CSV_EXPORT',            label: 'CSVエクスポート', Icon: Download,     ic: '#10b981', bg: '#ecfdf5' },
    { id: 'INCIDENT_LIST',         label: 'ヒヤリハット',   Icon: AlertTriangle, ic: '#d97706', bg: '#fffbeb' },
    { id: 'CORRECTION_LIST_ADMIN', label: '是正指示一覧',   Icon: Layers,       ic: '#f59e0b', bg: '#fffbeb' },
    { id: 'CORRECTION_CREATE',     label: '是正指示作成',   Icon: FilePlus,     ic: '#8b5cf6', bg: '#f5f3ff' },
    { id: 'CORRECTION_RESULT',     label: '是正結果確認',   Icon: CheckSquare,  ic: '#22c55e', bg: '#f0fdf4' },
  ];

  return (
    <div className="p-6 max-w-5xl space-y-6">
      <div>
        <h1 className="text-xl font-bold text-slate-800">管理者ホーム</h1>
        <p className="text-sm text-slate-500 mt-0.5">現場チェック管理システム — 管理コンソール</p>
      </div>

      {/* サマリカード */}
      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
        {statCards.map(({ label, val, unit, Icon, ic, bg }) => (
          <div key={label} className="bg-white rounded-2xl border border-slate-200 p-4">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-3" style={{ backgroundColor: bg }}>
              <Icon size={20} style={{ color: ic }} />
            </div>
            <p className="text-2xl font-bold text-slate-800 leading-none">
              {val}<span className="text-sm font-normal text-slate-500 ml-1">{unit}</span>
            </p>
            <p className="text-xs text-slate-400 mt-1.5 leading-tight">{label}</p>
          </div>
        ))}
      </div>

      {/* 要対応リスト */}
      {(pendingOrders.length > 0 || awaitingReport.length > 0) && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
          {pendingOrders.length > 0 && (
            <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
                <span className="text-sm font-bold text-slate-700">要対応の是正指示</span>
                <span className="text-xs font-bold text-red-600 bg-red-50 px-2 py-0.5 rounded-full">{pendingOrders.length}件</span>
              </div>
              <div className="divide-y divide-slate-100">
                {pendingOrders.slice(0, 4).map(order => {
                  const center  = window.MASTER_CENTERS.find(c => c.id === order.center_id);
                  const overdue = new Date(order.deadline + 'T23:59:59') < new Date();
                  return (
                    <button
                      key={order.id}
                      onClick={() => navigate('CORRECTION_RESULT', { orderId: order.id })}
                      className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-slate-50 transition-colors"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="text-xs font-semibold text-slate-700 truncate">{order.content.slice(0, 45)}…</p>
                        <p className={`text-[10px] mt-0.5 ${overdue ? 'text-red-500 font-semibold' : 'text-slate-400'}`}>
                          {center?.name}　期限 {order.deadline}{overdue ? ' ⚠超過' : ''}
                        </p>
                      </div>
                      <span className={`flex-shrink-0 text-[10px] font-bold px-1.5 py-0.5 rounded-full ${order.status === 'rejected' ? 'bg-orange-100 text-orange-700' : 'bg-red-100 text-red-700'}`}>
                        {order.status === 'rejected' ? '差戻し' : '未対応'}
                      </span>
                      <ChevronRight size={13} className="text-slate-300 flex-shrink-0" />
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {awaitingReport.length > 0 && (
            <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
                <span className="text-sm font-bold text-slate-700">承認待ちの報告</span>
                <span className="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">{awaitingReport.length}件</span>
              </div>
              <div className="divide-y divide-slate-100">
                {awaitingReport.slice(0, 4).map(rep => {
                  const order    = allOrders.find(o => o.id === rep.correction_order_id);
                  const reporter = window.MASTER_USERS.find(u => u.id === rep.reported_by);
                  return (
                    <button
                      key={rep.id}
                      onClick={() => navigate('CORRECTION_RESULT', { orderId: order?.id })}
                      className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-slate-50 transition-colors"
                    >
                      <div className="flex-1 min-w-0">
                        <p className="text-xs font-semibold text-slate-700 truncate">{rep.content.slice(0, 45)}…</p>
                        <p className="text-[10px] text-slate-400 mt-0.5">{reporter?.name}　{rep.created_at.split('T')[0]}</p>
                      </div>
                      <span className="flex-shrink-0 text-[10px] font-bold bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full">承認待ち</span>
                      <ChevronRight size={13} className="text-slate-300 flex-shrink-0" />
                    </button>
                  );
                })}
              </div>
            </div>
          )}
        </div>
      )}

      {/* クイックアクセス */}
      <div>
        <p className="text-xs font-bold text-slate-500 mb-3 uppercase tracking-wide">クイックアクセス</p>
        <div className="grid grid-cols-3 lg:grid-cols-7 gap-3">
          {quickLinks.map(({ id, label, Icon, ic, bg }) => (
            <button
              key={id}
              onClick={() => navigate(id)}
              className="bg-white rounded-2xl border border-slate-200 p-3 flex flex-col items-center gap-2 hover:border-indigo-200 hover:shadow-sm transition-all text-center"
            >
              <div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{ backgroundColor: bg }}>
                <Icon size={20} style={{ color: ic }} />
              </div>
              <span className="text-[11px] font-semibold text-slate-600 leading-tight">{label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { AdminHome });