// =============================================================
// Navigation.jsx — BottomNav（現場担当者）・Sidebar（管理者）
// =============================================================

// ─── 現場担当者用 BottomNav ────────────────────────────────

const FieldBottomNav = ({ currentScreen, navigate, hasPendingCorrection }) => {
  const { Home, CheckSquare, Clock, AlertCircle } = window.LucideReact || {};

  const tabs = [
    { id: 'HOME_FIELD',            label: 'ホーム',       Icon: Home },
    { id: 'CHECK_INPUT',           label: 'チェック入力', Icon: CheckSquare },
    { id: 'CHECK_HISTORY',         label: '履歴',         Icon: Clock },
    { id: 'CORRECTION_LIST_FIELD', label: '是正指示',     Icon: AlertCircle, badge: hasPendingCorrection },
  ];

  // 子画面のときも親タブをアクティブ表示
  const tabParent = {
    CHECK_HISTORY_DETAIL:    'CHECK_HISTORY',
    CORRECTION_DETAIL_FIELD: 'CORRECTION_LIST_FIELD',
    CORRECTION_REPORT_INPUT: 'CORRECTION_LIST_FIELD',
    LOGIN_FIELD:             null,
  };

  const activeTab = Object.prototype.hasOwnProperty.call(tabParent, currentScreen)
    ? tabParent[currentScreen]
    : currentScreen;

  return (
    <nav className="fixed bottom-0 inset-x-0 z-40 bg-white border-t border-slate-200 shadow-[0_-1px_8px_rgba(0,0,0,0.06)]">
      <div className="flex h-16">
        {tabs.map(({ id, label, Icon, badge }) => {
          const isActive = activeTab === id;
          return (
            <button
              key={id}
              onClick={() => navigate(id)}
              className={`flex-1 flex flex-col items-center justify-center gap-0.5 relative transition-colors ${
                isActive ? 'text-indigo-600' : 'text-slate-400 active:text-slate-600'
              }`}
            >
              {isActive && (
                <span className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-0.5 bg-indigo-600 rounded-full" />
              )}
              <div className="relative">
                <Icon size={22} strokeWidth={isActive ? 2.2 : 1.8} />
                {badge && (
                  <span className="absolute -top-0.5 -right-1.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
                )}
              </div>
              <span className="text-[10px] font-medium leading-tight">{label}</span>
            </button>
          );
        })}
      </div>
    </nav>
  );
};

// ─── 現場担当者用 Sidebar（PC幅） ────────────────────────

const FieldSidebar = ({ currentScreen, navigate, hasPendingCorrection }) => {
  const { Home, CheckSquare, Clock, AlertCircle, ChevronRight } = window.LucideReact || {};

  const tabs = [
    { id: 'HOME_FIELD',            label: 'ホーム',       Icon: Home },
    { id: 'CHECK_INPUT',           label: 'チェック入力', Icon: CheckSquare },
    { id: 'CHECK_HISTORY',         label: '履歴',         Icon: Clock },
    { id: 'CORRECTION_LIST_FIELD', label: '是正指示',     Icon: AlertCircle, badge: hasPendingCorrection },
  ];

  const tabParent = {
    CHECK_HISTORY_DETAIL:    'CHECK_HISTORY',
    CORRECTION_DETAIL_FIELD: 'CORRECTION_LIST_FIELD',
    CORRECTION_REPORT_INPUT: 'CORRECTION_LIST_FIELD',
  };
  const activeTab = Object.prototype.hasOwnProperty.call(tabParent, currentScreen)
    ? tabParent[currentScreen]
    : currentScreen;

  return (
    <aside className="fixed top-14 left-0 bottom-0 w-52 bg-white border-r border-slate-200 overflow-y-auto z-30 flex flex-col hidden md:flex">
      <nav className="flex-1 py-4 px-2 space-y-0.5">
        <div className="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-3 mb-2">
          現場メニュー
        </div>
        {tabs.map(({ id, label, Icon, badge }) => {
          const active = activeTab === id;
          return (
            <button
              key={id}
              onClick={() => navigate(id)}
              className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] transition-colors ${
                active
                  ? 'bg-indigo-50 text-indigo-700 font-semibold'
                  : 'text-slate-500 hover:bg-slate-100 hover:text-slate-800'
              }`}
            >
              <div className="relative flex-shrink-0">
                <Icon size={14} />
                {badge && !active && (
                  <span className="absolute -top-1 -right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white" />
                )}
              </div>
              <span className="flex-1 text-left truncate">{label}</span>
              {badge && (
                <span className="flex-shrink-0 text-[9px] font-bold bg-red-500 text-white rounded-full px-1.5 py-0.5 leading-none">
                  要対応
                </span>
              )}
              {active && !badge && <ChevronRight size={11} color="#4f46e5" />}
            </button>
          );
        })}
      </nav>

      {/* サイドバー下部：ユーザー情報 */}
      <div className="px-3 py-3 border-t border-slate-100">
        <div className="flex items-center gap-2.5">
          <div className="w-7 h-7 rounded-full bg-emerald-500 flex items-center justify-center text-white text-[11px] font-bold flex-shrink-0">
            現
          </div>
          <div className="min-w-0">
            <p className="text-slate-700 text-xs font-medium truncate">現場 花子</p>
            <p className="text-slate-400 text-[10px]">現場担当者</p>
          </div>
        </div>
      </div>
    </aside>
  );
};

// ─── 管理者用 Sidebar ─────────────────────────────────────

const AdminSidebar = ({ currentScreen, navigate }) => {
  const {
    Home, BarChart2, Building2, Download,
    Layers, FilePlus, CheckSquare,
    LayoutGrid, ClipboardList, Users, ChevronRight, AlertTriangle,
  } = window.LucideReact || {};

  const groups = [
    {
      label: 'ダッシュボード',
      items: [
        { id: 'HOME_ADMIN',        label: 'ホーム',              Icon: Home },
        { id: 'DASHBOARD_MONTHLY', label: '月次集計',            Icon: BarChart2 },
        { id: 'CENTER_DETAIL',     label: 'センター別集計',      Icon: Building2 },
        { id: 'CSV_EXPORT',        label: 'CSVエクスポート',     Icon: Download },
        { id: 'INCIDENT_LIST',     label: 'ヒヤリハット一覧',   Icon: AlertTriangle },
      ],
    },
    {
      label: '是正管理',
      items: [
        { id: 'CORRECTION_LIST_ADMIN', label: '是正指示一覧', Icon: Layers },
        { id: 'CORRECTION_CREATE',     label: '是正指示作成', Icon: FilePlus },
        { id: 'CORRECTION_RESULT',     label: '是正結果確認', Icon: CheckSquare },
      ],
    },
    {
      label: 'マスタ管理',
      items: [
        { id: 'CHECK_ITEM_MGMT',  label: 'チェック項目',     Icon: ClipboardList },
        { id: 'CENTER_AREA_MGMT', label: 'センター・エリア', Icon: Building2 },
        { id: 'USER_MGMT',        label: 'ユーザー',         Icon: Users },
      ],
    },
  ];

  return (
    <aside className="fixed top-14 left-0 bottom-0 w-52 bg-slate-900 overflow-y-auto z-30 flex flex-col">
      <nav className="flex-1 py-4 px-2 space-y-5">
        {groups.map((g) => (
          <div key={g.label}>
            <div className="text-[10px] font-bold text-slate-500 uppercase tracking-widest px-3 mb-1.5">
              {g.label}
            </div>
            <div className="space-y-0.5">
              {g.items.map(({ id, label, Icon }) => {
                const active = currentScreen === id;
                return (
                  <button
                    key={id}
                    onClick={() => navigate(id)}
                    className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] transition-colors ${
                      active
                        ? 'bg-indigo-600 text-white font-semibold'
                        : 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
                    }`}
                  >
                    <Icon size={14} />
                    <span className="flex-1 text-left truncate">{label}</span>
                    {active && <ChevronRight size={11} />}
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </nav>

      {/* サイドバー下部：現在のユーザー情報 */}
      <div className="px-3 py-3 border-t border-slate-800">
        <div className="flex items-center gap-2.5">
          <div className="w-7 h-7 rounded-full bg-indigo-700 flex items-center justify-center text-white text-[11px] font-bold flex-shrink-0">
            管
          </div>
          <div className="min-w-0">
            <p className="text-slate-200 text-xs font-medium truncate">管理 太郎</p>
            <p className="text-slate-500 text-[10px]">管理者</p>
          </div>
        </div>
      </div>
    </aside>
  );
};

Object.assign(window, { FieldBottomNav, FieldSidebar, AdminSidebar });