// =============================================================
// HomeField.jsx — 現場担当者ホーム画面
// =============================================================

const HomeField = ({ appData, navigate }) => {
  const { CheckSquare, Clock, AlertCircle, ChevronRight, CheckCircle, Bell } = window.LucideReact;

  const today      = new Date();
  const todayStr   = today.toISOString().split('T')[0];
  const dayNames   = ['日', '月', '火', '水', '木', '金', '土'];
  const dayLabel   = `${today.getMonth() + 1}月${today.getDate()}日（${dayNames[today.getDay()]}）`;

  // 自分のエリア（センター 1）
  const myAreas = window.MASTER_AREAS.filter(a => a.center_id === 1 && a.is_active);

  // 今日実施済みのエリア
  const todayRecords = (appData.checkRecords || []).filter(
    r => r.check_date === todayStr && r.user_id === 1
  );
  const completedAreaIds = new Set(todayRecords.map(r => r.area_id));
  const completedCount   = myAreas.filter(a => completedAreaIds.has(a.id)).length;
  const allDone          = completedCount === myAreas.length;

  // 未対応の是正指示
  const pendingOrders = (appData.correctionOrders || []).filter(
    o => o.status === 'pending' || o.status === 'rejected'
  );

  const currentUser = window.MASTER_USERS.find(u => u.id === 1);
  const center      = window.MASTER_CENTERS.find(c => c.id === currentUser?.center_id);

  return (
    <div className="p-4 space-y-4 pb-6">

      {/* ─── ユーザー情報 + 日付 ─── */}
      <div className="bg-white rounded-2xl p-4 shadow-sm border border-slate-100 flex items-center gap-3">
        <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-bold flex-shrink-0">
          {currentUser?.name?.charAt(0) || '田'}
        </div>
        <div className="flex-1 min-w-0">
          <p className="font-bold text-slate-800 text-sm">{currentUser?.name} さん</p>
          <p className="text-xs text-slate-500">{center?.name}</p>
        </div>
        <p className="text-xs font-medium text-slate-500 text-right">{dayLabel}</p>
      </div>

      {/* ─── 是正指示アラート ─── */}
      {pendingOrders.length > 0 && (
        <button
          onClick={() => navigate('CORRECTION_LIST_FIELD')}
          className="w-full bg-orange-50 border border-orange-200 rounded-2xl p-4 text-left flex items-center gap-3 active:bg-orange-100 transition-colors"
        >
          <div className="w-9 h-9 bg-orange-100 rounded-xl flex items-center justify-center flex-shrink-0">
            <Bell size={18} className="text-orange-600" />
          </div>
          <div className="flex-1 min-w-0">
            <p className="font-semibold text-orange-800 text-sm">未対応の是正指示</p>
            <p className="text-xs text-orange-600 mt-0.5">{pendingOrders.length}件の対応が必要です</p>
          </div>
          <ChevronRight size={16} className="text-orange-400 flex-shrink-0" />
        </button>
      )}

      {/* ─── 本日のチェック状況 ─── */}
      <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
        <div className="px-4 py-3 border-b border-slate-100 flex items-center justify-between">
          <h2 className="font-bold text-slate-800 text-sm">本日のチェック状況</h2>
          <span className={`text-xs font-bold px-2.5 py-1 rounded-full ${
            allDone
              ? 'bg-green-100 text-green-700'
              : completedCount > 0
                ? 'bg-amber-100 text-amber-700'
                : 'bg-slate-100 text-slate-500'
          }`}>
            {completedCount} / {myAreas.length} 完了
          </span>
        </div>

        <div className="divide-y divide-slate-100">
          {myAreas.map(area => {
            const done   = completedAreaIds.has(area.id);
            const record = todayRecords.find(r => r.area_id === area.id);
            const ngCount = record
              ? (appData.checkResults || []).filter(
                  r => r.check_record_id === record.id && r.result === 'NG'
                ).length
              : 0;

            return (
              <div key={area.id} className="flex items-center gap-3 px-4 py-3">
                <div className={`w-7 h-7 rounded-full flex items-center justify-center flex-shrink-0 ${
                  done ? 'bg-green-100' : 'bg-slate-100'
                }`}>
                  {done
                    ? <CheckCircle size={15} className="text-green-600" />
                    : <Clock       size={15} className="text-slate-400" />
                  }
                </div>
                <div className="flex-1 min-w-0">
                  <p className={`text-sm font-medium ${done ? 'text-slate-800' : 'text-slate-500'}`}>
                    {area.name}
                  </p>
                  {done && record && (
                    <p className="text-xs text-slate-400 mt-0.5">{record.start_time} 実施</p>
                  )}
                </div>
                {done && (
                  <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full flex-shrink-0 ${
                    ngCount > 0 ? 'bg-red-100 text-red-600' : 'bg-green-100 text-green-600'
                  }`}>
                    {ngCount > 0 ? `NG ${ngCount}件` : '異常なし'}
                  </span>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* ─── メインメニュー ─── */}
      <div className="space-y-2.5">
        <button
          onClick={() => navigate('CHECK_INPUT')}
          className="w-full bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white rounded-2xl p-4 flex items-center gap-3 transition-colors shadow-sm"
        >
          <div className="w-10 h-10 bg-indigo-500 rounded-xl flex items-center justify-center flex-shrink-0">
            <CheckSquare size={20} />
          </div>
          <div className="flex-1 text-left">
            <p className="font-bold text-sm">チェック入力</p>
            <p className="text-xs text-indigo-200 mt-0.5">エリアを選択して今日のチェックを記録</p>
          </div>
          <ChevronRight size={18} className="text-indigo-300 flex-shrink-0" />
        </button>

        <button
          onClick={() => navigate('CHECK_HISTORY')}
          className="w-full bg-white border border-slate-200 rounded-2xl p-4 flex items-center gap-3 active:bg-slate-50 transition-colors"
        >
          <div className="w-10 h-10 bg-teal-50 rounded-xl flex items-center justify-center flex-shrink-0">
            <Clock size={20} className="text-teal-600" />
          </div>
          <div className="flex-1 text-left">
            <p className="font-bold text-slate-700 text-sm">チェック履歴</p>
            <p className="text-xs text-slate-400 mt-0.5">過去のチェック記録を確認</p>
          </div>
          <ChevronRight size={18} className="text-slate-300 flex-shrink-0" />
        </button>

        <button
          onClick={() => navigate('CORRECTION_LIST_FIELD')}
          className="w-full bg-white border border-slate-200 rounded-2xl p-4 flex items-center gap-3 active:bg-slate-50 transition-colors"
        >
          <div className="w-10 h-10 bg-orange-50 rounded-xl flex items-center justify-center flex-shrink-0 relative">
            <AlertCircle size={20} className="text-orange-500" />
            {pendingOrders.length > 0 && (
              <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-[9px] font-bold rounded-full flex items-center justify-center border border-white">
                {pendingOrders.length}
              </span>
            )}
          </div>
          <div className="flex-1 text-left">
            <p className="font-bold text-slate-700 text-sm">是正指示確認</p>
            <p className="text-xs text-slate-400 mt-0.5">
              {pendingOrders.length > 0 ? `${pendingOrders.length}件の未対応あり` : '是正指示を確認・報告'}
            </p>
          </div>
          <ChevronRight size={18} className="text-slate-300 flex-shrink-0" />
        </button>
      </div>
    </div>
  );
};

Object.assign(window, { HomeField });