/* ============================================================
   Ventus CDE — App shell & routing
   ============================================================ */

const TITLES = {
  overview: ["Metro Line 3 · Hợp đồng CP-02", "Tổng quan"],
  viewer:   ["Metro Line 3 · FED-Metro-L3-v42", "BIM Viewer"],
  coverage: ["Metro Line 3 · Hợp đồng CP-02", "Ma trận độ phủ"],
  users:    ["Metro Line 3 · Hợp đồng CP-02", "Người dùng"],
  permissions: ["Metro Line 3 · Hợp đồng CP-02", "Phân quyền"],
  audit:    ["Metro Line 3 · Hợp đồng CP-02", "Nhật ký kiểm toán"],
  models:   ["Metro Line 3 · Hợp đồng CP-02", "Thư viện mô hình"],
  docs:         ["Metro Line 3 · Hợp đồng CP-02", "Tài liệu"],
  rfi:          ["Metro Line 3 · Hợp đồng CP-02", "RFI · Phê duyệt"],
  issues:       ["Metro Line 3 · Hợp đồng CP-02", "Issues · BCF"],
  clash:        ["Metro Line 3 · Hợp đồng CP-02", "Va chạm & Điều phối"],
  transmittals: ["Metro Line 3 · Hợp đồng CP-02", "Transmittals"],
  schedule: ["Metro Line 3 · Hợp đồng CP-02", "Tiến độ"],
  alerts:   ["Metro Line 3 · Hợp đồng CP-02", "Cảnh báo"],
  reports:  ["Metro Line 3 · Hợp đồng CP-02", "Báo cáo"],
  settings: ["Metro Line 3 · Hợp đồng CP-02", "Cài đặt"],
};

const ACCENT_VARS = {
  "#0d9488": { a:"#0d9488", a6:"#0f9e90", a5:"#14b8a6", soft:"#e4f5f2", ga:"#1ec7b6", gb:"#0d9488", softD:"rgba(20,184,166,.14)" },
  "#2563eb": { a:"#2563eb", a6:"#1d4ed8", a5:"#3b82f6", soft:"#e7eefe", ga:"#60a5fa", gb:"#2563eb", softD:"rgba(59,130,246,.16)" },
  "#7c3aed": { a:"#7c3aed", a6:"#6d28d9", a5:"#8b5cf6", soft:"#f0eafe", ga:"#a78bfa", gb:"#7c3aed", softD:"rgba(139,92,246,.16)" },
  "#e2683c": { a:"#e2683c", a6:"#cf5a30", a5:"#ef7d4f", soft:"#fdeee6", ga:"#f59e6f", gb:"#e2683c", softD:"rgba(239,125,79,.16)" },
};

function App() {
  const [route, setRoute] = useState(() => localStorage.getItem("ventus.route") || "docs");
  const [theme, setTheme] = useState(() => localStorage.getItem("ventus.theme") || "light");
  const [accent, setAccent] = useState(() => localStorage.getItem("ventus.accent") || "#0d9488");

  useEffect(() => { localStorage.setItem("ventus.route", route); }, [route]);
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    localStorage.setItem("ventus.theme", theme);
  }, [theme]);
  useEffect(() => {
    const v = ACCENT_VARS[accent]; const r = document.documentElement.style;
    r.setProperty("--accent", v.a); r.setProperty("--accent-600", v.a6); r.setProperty("--accent-500", v.a5);
    r.setProperty("--accent-grad-a", v.ga); r.setProperty("--accent-grad-b", v.gb);
    r.setProperty("--accent-soft", theme === "dark" ? v.softD : v.soft);
    localStorage.setItem("ventus.accent", accent);
  }, [accent, theme]);

  const [crumb, title] = TITLES[route] || TITLES.overview;

  const auth = useCdeAuth();
  const [showLogin, setShowLogin] = useState(false);

  const screen = () => {
    switch (route) {
      case "overview": return <Dashboard />;
      case "viewer":   return <BimViewer theme={theme} />;
      case "coverage": return <Coverage />;
      case "users":    return <Users />;
      case "permissions": return <Permissions />;
      case "audit":    return <Audit />;
      case "models":   return <FileManager />;
      case "docs":     return <FileManager />;
      case "rfi":      return <Workflow />;
      case "issues":       return <Issues />;
      case "clash":        return <Clash />;
      case "transmittals": return <Transmittals />;
      case "schedule": return <Schedule />;
      case "alerts":   return <Alerts />;
      case "reports":  return <Reports />;
      case "settings": return <Settings theme={theme} setTheme={setTheme} accent={accent} setAccent={setAccent} />;
      default:         return <Dashboard />;
    }
  };

  const viewerActions = route === "viewer" ? (
    <button className="btn primary" style={{ height: 42 }}><Icon.download size={15} /> Xuất tổ hợp</button>
  ) : null;

  return (
    <CdeAuthCtx.Provider value={auth}>
    <div className="app">
      <Sidebar route={route} setRoute={setRoute} auth={auth}
        onLogin={() => setShowLogin(true)} onLogout={() => cdeAuth.signOut()} />
      <div className="main">
        <TopBar crumb={crumb} title={title} theme={theme} setTheme={setTheme} actions={viewerActions} />
        <div key={route} style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
          {screen()}
        </div>
      </div>
      {showLogin && <LoginModal onClose={() => setShowLogin(false)} />}
    </div>
    </CdeAuthCtx.Provider>
  );
}

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