"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTheme } from "@/components/theme/ThemeProvider";
import styles from "./AppShell.module.css";

const MENU_MONITORING = [
  { href: "/detail-log", id: "detailLog", label: "📋 清掃詳細ログ" },
  { href: "/alerts", id: "alert", label: "🔔 アラート" },
  // ★エラー一覧（D-160 / 指示書AW）★ — robot_error_reports の未対応エラーを全部出す（/alerts は事前チェック＋出発失敗だけ）。
  //   ★契約によるメニューの出し分けは無い（このファイルの全メニューと同じ。指示書AW D15）★
  { href: "/errors", id: "errors", label: "🚨 エラー一覧" },
  { href: "/reports", id: "report", label: "📈 レポート" },
  // ★清掃面積（指示書AN 段階5。ユーザー指示 2026-09-16「新画面」）★
  //   ★「総清掃面積」「累計清掃面積」にしない★ — 期間で絞れる画面なので、
  //   名前に「総」「累計」を入れると定義を固定してしまう（指示書AN §2-1）。
  //   ★点検記録のコメント塊より前に置くこと★ — 後ろに置くとコメントアウトの続きに見える。
  { href: "/clean-area", id: "cleanArea", label: "📐 清掃面積" },
  // ★デモまで一時的に隠す（D-079 項3）★
  //   D-031 の「点検記録は P1 スコープ」は変えていない。
  //   写真ストア（バケット・期限付き署名URL）が未着手のため画面が成立しないため（D-072 項7）。
  //   ★復活させるときはこの1行のコメントを外すだけでよい★
  //   （`app/(dashboard)/inspections/page.tsx` と `lib/i18n.ts` の該当エントリは残してある）。
  // { href: "/inspections", id: "inspection", label: "🔧 点検記録" },
] as const;

const MENU_DS = [
  { href: "/ds-logs", id: "dsecurity", label: "🔒 D-Secログ" },
  { href: "/ds-alerts", id: "dsalert", label: "⚠ D-Secアラート" },
] as const;

const MENU_SETTINGS = [
  { href: "/facilities", id: "robot", label: "🏢 施設ロボットマスタ" },
  { href: "/schedules", id: "schedule", label: "📅 スケジュール" },
  { href: "/system", id: "system", label: "⚙ システム管理" },
] as const;

function NavItem({
  href,
  label,
  active,
}: {
  href: string;
  label: string;
  active: boolean;
}) {
  return (
    <Link
      href={href}
      className={`${styles.navItem} ${active ? styles.navItemActive : ""}`}
    >
      {label}
    </Link>
  );
}

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { theme, lang, toggleTheme, toggleLang, t } = useTheme();

  return (
    <div className={styles.shell}>
      <aside className={styles.sidebar}>
        <div className={styles.brand}>
          <div className={styles.brandLeft}>
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden>
              <rect width="32" height="32" rx="8" fill="var(--pr)" fillOpacity="0.15" />
              <rect
                x="8"
                y="10"
                width="16"
                height="14"
                rx="3"
                stroke="var(--pr)"
                strokeWidth="1.5"
                fill="none"
              />
              <circle cx="13" cy="17" r="1.5" fill="var(--pr)" />
              <circle cx="19" cy="17" r="1.5" fill="var(--pr)" />
              <line
                x1="12"
                y1="22"
                x2="20"
                y2="22"
                stroke="var(--pr)"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
              <line
                x1="16"
                y1="6"
                x2="16"
                y2="10"
                stroke="var(--pr)"
                strokeWidth="1.5"
                strokeLinecap="round"
              />
              <circle cx="16" cy="5" r="1.5" fill="var(--pr)" />
            </svg>
            <div>
              <div className={styles.logoName}>D-Watch</div>
              <div className={styles.logoSub}>{t("DFAロボット監視システム")}</div>
            </div>
          </div>
          {/* ★ボタン2つは専用の行に固定する★（`.brand` のコメント参照。言語切替で位置が変わらないように） */}
          <div className={styles.brandActions}>
            <button
              type="button"
              className={styles.langBtn}
              onClick={toggleLang}
              style={{
                background: lang === "en" ? "color-mix(in srgb, var(--pr) 9%, transparent)" : "var(--sf-h)",
                color: lang === "en" ? "var(--pr)" : "var(--tx-d)",
              }}
            >
              {lang === "ja" ? "EN" : "JP"}
            </button>
            <button
              type="button"
              className={styles.iconBtn}
              onClick={toggleTheme}
              aria-label={theme === "dark" ? "ライトモード" : "ダークモード"}
            >
              {theme === "dark" ? "☀" : "🌙"}
            </button>
          </div>
        </div>
        <nav className={styles.nav}>
          <NavItem
            href="/dashboard"
            label={t("📊 ダッシュボード")}
            active={pathname === "/dashboard"}
          />
          <div className={styles.section}>{t("モニタリング")}</div>
          {MENU_MONITORING.map((m) => (
            <NavItem
              key={m.id}
              href={m.href}
              label={t(m.label)}
              active={pathname === m.href}
            />
          ))}
          <div className={styles.section}>D-Security</div>
          {MENU_DS.map((m) => (
            <NavItem
              key={m.id}
              href={m.href}
              label={t(m.label)}
              active={pathname === m.href}
            />
          ))}
          <div className={styles.section}>{t("設定")}</div>
          {MENU_SETTINGS.map((m) => (
            <NavItem
              key={m.id}
              href={m.href}
              label={t(m.label)}
              active={pathname === m.href}
            />
          ))}
        </nav>
        <div className={styles.footer}>{t("DFA運用担当")}</div>
      </aside>
      <main className={styles.main}>{children}</main>
    </div>
  );
}