import { useEffect, useState } from "react";
import { invoke } from "@tauri-apps/api/core";
import { useStore } from "./store";
import TitleBar from "./components/TitleBar";
import Sidebar from "./components/Sidebar";
import HomeView from "./components/HomeView";
import GuideView from "./components/GuideView";
import ProfileModal from "./components/ProfileModal";
import SyncOverlay from "./components/SyncOverlay";

export default function App() {
  const { loadProfiles, loadGuides, view, syncing, syncGuides } = useStore();
  const [showProfileModal, setShowProfileModal] = useState(false);
  const [needsSync, setNeedsSync] = useState(false);

  useEffect(() => {
    async function init() {
      await loadProfiles();
      const has = await invoke<boolean>("has_guides");
      if (!has) {
        setNeedsSync(true);
      } else {
        await loadGuides();
      }
    }
    init();
  }, []);

  async function handleInitialSync() {
    setNeedsSync(false);
    await syncGuides();
  }

  return (
    <div className="app-shell">
      <TitleBar onOpenProfiles={() => setShowProfileModal(true)} />
      <div className="app-body">
        <Sidebar />
        <main className="app-main">
          {view === "home" ? <HomeView /> : <GuideView />}
        </main>
      </div>

      {showProfileModal && <ProfileModal onClose={() => setShowProfileModal(false)} />}
      {syncing && <SyncOverlay />}
      {needsSync && (
        <div style={{
          position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)",
          display: "flex", alignItems: "center", justifyContent: "center",
          zIndex: 100, borderRadius: "10px"
        }}>
          <div style={{
            background: "#161b22", border: "1px solid #f0c040", borderRadius: "12px",
            padding: "40px 48px", maxWidth: "440px", textAlign: "center",
            display: "flex", flexDirection: "column", gap: "16px"
          }}>
            <div style={{ fontSize: "40px" }}>⚔️</div>
            <h2 style={{ fontSize: "20px", fontWeight: 700, color: "#f0c040" }}>
              Bienvenue dans TougliGui
            </h2>
            <p style={{ color: "#94a3b8", fontSize: "14px", lineHeight: 1.6 }}>
              Première utilisation — synchronisation du guide Tougli depuis Google Sheets.
              <br />Cela peut prendre quelques secondes.
            </p>
            <button
              onClick={handleInitialSync}
              style={{
                background: "#f0c040", color: "#0d1117", border: "none",
                padding: "10px 24px", borderRadius: "8px", fontWeight: 700,
                fontSize: "14px", cursor: "pointer", marginTop: "8px"
              }}
            >
              Synchroniser maintenant
            </button>
          </div>
        </div>
      )}

      <style>{`
        .app-shell {
          display: flex; flex-direction: column; height: 100vh;
          background: #0d1117; overflow: hidden;
        }
        .app-body { display: flex; flex: 1; overflow: hidden; }
        .app-main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
      `}</style>
    </div>
  );
}