// ============================================
// Main App - 社内システム共通マスター登録
// ============================================

function App() {
  // Auth
  const [loggedIn, setLoggedIn] = useState(false);
  // Current view: menu / staff / work / dept / role / audit
  const [view, setView] = useState("menu");
  // Role for permission demo
  const [userRole, setUserRole] = useState("admin");
  // Tweaks
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  // Master data
  const [staff, setStaff] = useState(STAFF);
  const [works, setWorks] = useState(WORKS);
  const [depts, setDepts] = useState(DEPARTMENTS);
  const [roles, setRoles] = useState(ROLES);
  const [categories, setCategories] = useState(CATEGORIES);
  const [users, setUsers] = useState(ACCESS_USERS);
  const [clients, setClients] = useState(CLIENTS);
  const [log,   setLog]   = useState(AUDIT_LOG);
  // CSV import modal
  const [importOpen, setImportOpen] = useState(false);
  // Detail drawers
  const [detailStaffId, setDetailStaffId] = useState(null);
  const [detailWorkId,  setDetailWorkId]  = useState(null);
  // Direct-edit triggers from drawer
  const [editStaff, setEditStaff] = useState(null);
  const [editWork,  setEditWork]  = useState(null);

  // Current user — Yamada (top admin in mock data)
  const currentUser = STAFF_BY_ID["S001"];

  const addLog = (entry) => {
    const now = new Date();
    const ts = `${now.toISOString().slice(0, 10)} ${now.toTimeString().slice(0, 8)}`;
    setLog(prev => [{
      id: `L${String(prev.length + 1).padStart(4, "0")}`,
      ts,
      user: currentUser.id,
      ...entry,
    }, ...prev]);
  };

  if (!loggedIn) {
    return <LoginScreen onLogin={() => { setLoggedIn(true); setView("menu"); }} />;
  }

  const breadcrumbMap = {
    menu:   ["共通マスター", "ダッシュボード"],
    staff:  ["共通マスター", "スタッフ"],
    work:   ["共通マスター", "作品"],
    client: ["共通マスター", "取引先"],
    dept:   ["共通マスター", "部署"],
    role:   ["共通マスター", "職種"],
    users:  ["システム設定", "アクセスユーザー"],
    audit:  ["システム設定", "変更履歴"],
  };

  let screen = null;
  switch (view) {
    case "menu":
      screen = <MenuScreen onNav={setView} staff={staff} works={works} depts={depts} roles={roles} clients={clients} log={log} currentUser={currentUser} role={userRole} />;
      break;
    case "staff":
      screen = <StaffScreen
        staff={staff} setStaff={setStaff} depts={depts} roles={roles}
        role={userRole} addLog={addLog} openImport={() => setImportOpen(true)}
        onOpenDetail={(id) => setDetailStaffId(id)}
        externalEditing={editStaff}
        clearExternalEditing={() => setEditStaff(null)} />;
      break;
    case "work":
      screen = <WorkScreen works={works} setWorks={setWorks} staff={staff}
        role={userRole} addLog={addLog}
        onOpenDetail={(id) => setDetailWorkId(id)}
        externalEditing={editWork}
        clearExternalEditing={() => setEditWork(null)} />;
      break;
    case "client":
      screen = <ClientScreen clients={clients} setClients={setClients} works={works} role={userRole} addLog={addLog} />;
      break;
    case "dept":
      screen = <DeptScreen depts={depts} setDepts={setDepts} staff={staff} role={userRole} addLog={addLog} />;
      break;
    case "role":
      screen = <RoleScreen roles={roles} setRoles={setRoles} staff={staff} role={userRole} addLog={addLog} categories={categories} setCategories={setCategories} />;
      break;
    case "audit":
      screen = <AuditLogScreen log={log} />;
      break;
    case "users":
      screen = <AccessUsersScreen users={users} setUsers={setUsers} staff={staff} role={userRole} addLog={addLog} />;
      break;
    default:
      screen = <MenuScreen onNav={setView} staff={staff} works={works} depts={depts} roles={roles} clients={clients} log={log} currentUser={currentUser} role={userRole} />;
  }

  return (
    <div
      className="app-shell"
      data-collapsed={t.sidebarCollapsed ? "true" : "false"}
      data-density={t.density}
      data-gridlines={t.showGridlines ? "true" : "false"}
      style={{
        "--accent": t.accent,
        "--accent-hover": t.accent,
        "--accent-soft": t.accent + "1a",
        "--accent-border": t.accent + "33",
      }}
    >
      <Sidebar
        current={view}
        onNav={setView}
        collapsed={t.sidebarCollapsed}
        currentUser={currentUser}
        role={userRole}
        counts={{
          staff:  staff.length,
          work:   works.length,
          client: clients.length,
          dept:   depts.length,
          role:   roles.length,
          users:  users.length,
        }}
      />
      <main className="main">
        <TopBar
          breadcrumb={breadcrumbMap[view]}
          role={userRole}
          onRoleChange={setUserRole}
          onLogout={() => setLoggedIn(false)}
        />
        <div className="content">
          {screen}
        </div>
      </main>

      <CSVImportModal open={importOpen} onClose={() => setImportOpen(false)} onImport={() => {}} />

      <StaffDetailDrawer
        staffId={detailStaffId}
        staff={staff} works={works} log={log} depts={depts} roles={roles}
        canEdit={userRole !== "viewer"}
        onClose={() => setDetailStaffId(null)}
        onEdit={() => {
          const s = STAFF_BY_ID[detailStaffId] || staff.find(x => x.id === detailStaffId);
          if (!s) return;
          setDetailStaffId(null);
          setView("staff");
          setEditStaff(s);
        }}
        onJumpToWork={(wid) => { setDetailStaffId(null); setDetailWorkId(wid); }}
      />
      <WorkDetailDrawer
        workId={detailWorkId}
        works={works} staff={staff} log={log}
        canEdit={userRole !== "viewer"}
        onClose={() => setDetailWorkId(null)}
        onEdit={() => {
          const w = works.find(x => x.id === detailWorkId);
          if (!w) return;
          setDetailWorkId(null);
          setView("work");
          setEditWork(w);
        }}
        onJumpToStaff={(sid) => { setDetailWorkId(null); setDetailStaffId(sid); }}
      />

      <Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}

// ============================================
// Tweaks panel
// ============================================
function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="表示">
        <TweakRadio
          label="一覧の密度"
          value={t.density}
          options={[
            { value: "compact",     label: "コンパクト" },
            { value: "comfortable", label: "標準" },
            { value: "spacious",    label: "ゆったり" },
          ]}
          onChange={v => setTweak("density", v)}
        />
        <TweakToggle
          label="罫線を表示"
          value={t.showGridlines}
          onChange={v => setTweak("showGridlines", v)}
        />
        <TweakToggle
          label="サイドバーを折りたたむ"
          value={t.sidebarCollapsed}
          onChange={v => setTweak("sidebarCollapsed", v)}
        />
      </TweakSection>
      <TweakSection title="アクセントカラー">
        <TweakColor
          label="アクセント"
          value={t.accent}
          options={["#3b3bdc", "#1c1917", "#2d7d4f", "#c2410c", "#7c3aed", "#0369a1"]}
          onChange={v => setTweak("accent", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ============================================
// Mount
// ============================================
ReactDOM.createRoot(document.getElementById("root")).render(
  <ToastProvider>
    <App />
  </ToastProvider>
);