// ─── Client dashboard — list of ALL projects on the account ────

// Demo seed used ONLY when the user is not authenticated (so the prototype
// remains browsable without an account). Authenticated users see their own
// projects loaded from Supabase.
window.DEMO_PROJECTS = [
  {
    id: "clausio",
    name: "Clausio",
    company: "Clausio SAS",
    website: "clausio.legal",
    sector: { fr: "LegalTech", en: "LegalTech" },
    description: { fr: "Plateforme B2B de revue contractuelle automatisée.", en: "B2B automated contract review platform." },
    phase: { fr: "Montée en puissance", en: "Growth" },
    status: "live",
    agents_live: 54, agents_total: 68,
    mrr: 78000,  mrr_label: "MRR",
    users: 1842,
    growth: 12.4,
    pipeline: 842000,
    last_activity: { fr: "il y a 4 min", en: "4 min ago" },
    plan: "Growth",
    started: "2026-02-14",
    color: "#c8ff3d",
    trend: [12,21,32,45,58,68,78],
    next_milestone: { fr: "Série A — pitch envoyé", en: "Series A — pitch sent" },
  },
  {
    id: "atelier-vega",
    name: "Atelier Véga",
    company: "Véga Studio SAS",
    website: "ateliervega.fr",
    sector: { fr: "Marketplace", en: "Marketplace" },
    description: { fr: "Marketplace d'artisans céramistes — pièces uniques en édition limitée.", en: "Ceramist marketplace — limited edition unique pieces." },
    phase: { fr: "Lancement", en: "Launch" },
    status: "live",
    agents_live: 32, agents_total: 68,
    mrr: 18400, mrr_label: "GMV / mo",
    users: 1240,
    growth: 38.6,
    pipeline: 0,
    last_activity: { fr: "il y a 12 min", en: "12 min ago" },
    plan: "Growth",
    started: "2026-04-02",
    color: "#ff5a1f",
    trend: [2,4,7,10,13,16,18.4],
    next_milestone: { fr: "Lancement public — J-9", en: "Public launch — D-9" },
  },
  {
    id: "northwind-health",
    name: "Northwind Health",
    company: "Northwind GmbH",
    website: "northwind.health",
    sector: { fr: "HealthTech", en: "HealthTech" },
    description: { fr: "Application de suivi des pathologies chroniques pour les patients et leurs médecins.", en: "Chronic disease tracking app for patients and their physicians." },
    phase: { fr: "Croisière", en: "Steady state" },
    status: "live",
    agents_live: 64, agents_total: 68,
    mrr: 412000, mrr_label: "MRR",
    users: 24600,
    growth: 6.2,
    pipeline: 1200000,
    last_activity: { fr: "il y a 1 min", en: "1 min ago" },
    plan: "Scale",
    started: "2025-09-08",
    color: "#3da9ff",
    trend: [180,240,290,340,372,395,412],
    next_milestone: { fr: "Certification HDS — audit final", en: "HDS certification — final audit" },
  },
  {
    id: "rideau-rouge",
    name: "Rideau Rouge",
    company: "RR Productions",
    website: "rideaurouge.tv",
    sector: { fr: "Média / DTC", en: "Media / DTC" },
    description: { fr: "Plateforme de streaming de spectacles vivants captés en 4K multi-caméras.", en: "Streaming platform for live performance arts captured in 4K multi-camera." },
    phase: { fr: "Montée en puissance", en: "Growth" },
    status: "live",
    agents_live: 41, agents_total: 68,
    mrr: 28200, mrr_label: "MRR",
    users: 4820,
    growth: 22.8,
    pipeline: 95000,
    last_activity: { fr: "il y a 34 min", en: "34 min ago" },
    plan: "Growth",
    started: "2026-01-19",
    color: "#a584ff",
    trend: [4,8,12,16,20,24,28],
    next_milestone: { fr: "Partenariat Théâtre du Châtelet", en: "Châtelet partnership" },
  },
  {
    id: "ondulis",
    name: "Ondulis",
    company: "Ondulis (préfiguration)",
    website: "",
    sector: { fr: "FinTech B2B", en: "FinTech B2B" },
    description: { fr: "API de réconciliation bancaire instantanée pour les marketplaces.", en: "Instant bank reconciliation API for marketplaces." },
    phase: { fr: "Lancement", en: "Launch" },
    status: "building",
    agents_live: 14, agents_total: 68,
    mrr: 0, mrr_label: "MRR",
    users: 0,
    growth: 0,
    pipeline: 0,
    last_activity: { fr: "il y a 2h", en: "2h ago" },
    plan: "Starter",
    started: "2026-05-06",
    color: "#ffcc4d",
    trend: [0,0,0,0,0,0,0],
    next_milestone: { fr: "Business plan en cours — agents #1 à #5", en: "Business plan in progress — agents #1 to #5" },
  },
  {
    id: "carbonix",
    name: "Carbonix",
    company: "Carbonix SAS",
    website: "carbonix.eu",
    sector: { fr: "ClimateTech", en: "ClimateTech" },
    description: { fr: "ACV automatisée pour PME industrielles — conformité CSRD clé en main.", en: "Automated LCA for industrial SMEs — turnkey CSRD compliance." },
    phase: { fr: "Croisière", en: "Steady state" },
    status: "paused",
    agents_live: 0, agents_total: 68,
    mrr: 142000, mrr_label: "MRR",
    users: 320,
    growth: -2.1,
    pipeline: 380000,
    last_activity: { fr: "il y a 6 j.", en: "6 days ago" },
    plan: "Scale",
    started: "2025-06-12",
    color: "#6a6a6a",
    trend: [148,150,149,148,146,144,142],
    next_milestone: { fr: "Projet en pause — réactiver", en: "Project paused — reactivate" },
  },
];

function normalizeDbProject(p, lang) {
  return {
    id: p.id,
    name: p.name,
    company: p.company || "",
    website: p.website || "",
    sector: { fr: p.sector || "—", en: p.sector || "—" },
    description: { fr: p.description || "", en: p.description || "" },
    phase: { fr: lang === "fr" ? "Lancement" : "Launch", en: "Launch" },
    status: p.status,
    agents_live: 0, agents_total: 68,
    mrr: 0, mrr_label: "MRR",
    users: 0,
    growth: 0,
    pipeline: 0,
    last_activity: { fr: lang === "fr" ? "à l'instant" : "just now", en: "just now" },
    plan: (p.plan || "growth").charAt(0).toUpperCase() + (p.plan || "growth").slice(1),
    started: p.created_at,
    color: p.color || "#c8ff3d",
    trend: [0, 0, 0, 0, 0, 0, 0],
    next_milestone: { fr: "Brief en cours — agents au travail", en: "Briefing in progress — agents at work" },
  };
}

function ClientDashboard({ t, goto, lang, setCurrentProject, session }) {
  const [filter, setFilter] = useState("all");
  const [allProjects, setAllProjects] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    if (!session?.user) {
      setAllProjects(window.DEMO_PROJECTS);
      setLoading(false);
      return;
    }
    window.sb.from("projects").select("*").order("created_at", { ascending: false }).then(({ data, error }) => {
      if (cancelled) return;
      if (error) { console.error(error); setAllProjects([]); }
      else setAllProjects((data || []).map(p => normalizeDbProject(p, lang)));
      setLoading(false);
    });
    return () => { cancelled = true; };
  }, [session?.user?.id, lang]);

  const projects = useMemo(() => {
    if (filter === "all") return allProjects;
    return allProjects.filter(p => p.status === filter);
  }, [filter, allProjects]);

  const agg = useMemo(() => {
    const live = allProjects.filter(p => p.status === "live").length;
    const totalMrr = allProjects.reduce((s, p) => s + (p.mrr || 0), 0);
    const totalAgents = allProjects.reduce((s, p) => s + (p.agents_live || 0), 0);
    return { live, totalMrr, totalAgents, projects: allProjects.length };
  }, [allProjects]);

  const fmtMoney = (v) => {
    if (v >= 1000000) return "€" + (v/1000000).toFixed(1) + "M";
    if (v >= 1000) return "€" + Math.round(v/1000) + "K";
    return "€" + v;
  };
  const fmtNum = (v) => v >= 1000 ? (v/1000).toFixed(v >= 10000 ? 0 : 1) + "K" : v;

  const filters = [
    { id: "all",      label: lang === "fr" ? "Tous" : "All",            count: allProjects.length },
    { id: "live",     label: lang === "fr" ? "Actifs" : "Live",         count: allProjects.filter(p=>p.status==="live").length },
    { id: "building", label: lang === "fr" ? "En construction" : "Building",   count: allProjects.filter(p=>p.status==="building").length },
    { id: "paused",   label: lang === "fr" ? "En pause" : "Paused",     count: allProjects.filter(p=>p.status==="paused").length },
  ];

  const userName = session?.user?.user_metadata?.full_name || session?.user?.user_metadata?.name || (session?.user?.email ? session.user.email.split("@")[0] : "Benjamin");

  return (
    <div className="client-dash">
      {/* HEADER */}
      <div className="cd-head">
        <div className="cd-greet">
          <div className="kicker">{lang === "fr" ? `salut, ${userName}` : `hi, ${userName}`}</div>
          <h1 className="cd-h1">
            {loading
              ? <span style={{ color: "var(--muted-2)" }}>…</span>
              : agg.projects === 0
                ? (lang === "fr"
                    ? <>Aucun projet pour l'instant.<br/><span style={{ color: "var(--muted-2)" }}>Lancez votre premier projet en 3 minutes.</span></>
                    : <>No projects yet.<br/><span style={{ color: "var(--muted-2)" }}>Launch your first project in 3 minutes.</span></>)
                : (lang === "fr"
                    ? <>Vos <span className="hl">{agg.projects} projet{agg.projects > 1 ? "s" : ""}</span> tournent.<br/><span style={{ color: "var(--muted-2)" }}>{agg.totalAgents} agents au travail en ce moment.</span></>
                    : <>Your <span className="hl">{agg.projects} project{agg.projects > 1 ? "s" : ""}</span> running.<br/><span style={{ color: "var(--muted-2)" }}>{agg.totalAgents} agents working right now.</span></>)}
          </h1>
        </div>

        {agg.projects > 0 && (
          <div className="cd-stats">
            <div className="cd-stat">
              <span className="l">{lang === "fr" ? "Projets actifs" : "Live projects"}</span>
              <span className="v">{agg.live}<span className="mu">/{agg.projects}</span></span>
            </div>
            <div className="cd-stat">
              <span className="l">{lang === "fr" ? "Revenu mensuel cumulé" : "Total monthly revenue"}</span>
              <span className="v">{fmtMoney(agg.totalMrr)}</span>
              <span className="d">{lang === "fr" ? "en démarrage" : "ramping up"}</span>
            </div>
            <div className="cd-stat">
              <span className="l">{lang === "fr" ? "Agents au travail" : "Agents working"}</span>
              <span className="v">{agg.totalAgents}</span>
              <span className="d">▶ {lang === "fr" ? "exécution continue" : "continuous"}</span>
            </div>
            <div className="cd-stat">
              <span className="l">{lang === "fr" ? "Plan" : "Plan"}</span>
              <span className="v" style={{ fontSize: 22 }}>{projects[0]?.plan || "Growth"}</span>
              <button className="d" style={{ color: "var(--accent)", textDecoration: "underline", cursor: "pointer" }} onClick={() => goto("pricing")}>
                {lang === "fr" ? "Gérer →" : "Manage →"}
              </button>
            </div>
          </div>
        )}
      </div>

      {/* TOOLS BAR */}
      <div className="cd-tools">
        <div className="filter-pills">
          {filters.map(f => (
            <button key={f.id} className={`filter-pill ${filter === f.id ? "on" : ""}`} onClick={() => setFilter(f.id)}>
              {f.label} <span style={{ marginLeft: 6, fontFamily: "var(--font-mono)", fontSize: 11, opacity: .6 }}>{f.count}</span>
            </button>
          ))}
        </div>
        <button className="btn btn-primary" onClick={() => goto("onboarding")}>
          + {lang === "fr" ? "Nouveau projet" : "New project"}
        </button>
      </div>

      {/* PROJECT GRID */}
      <div className="cd-grid">
        {projects.map(p => (
          <ProjectCard key={p.id} p={p} lang={lang} t={t} fmtMoney={fmtMoney} fmtNum={fmtNum}
            onOpen={() => { setCurrentProject(p); goto("dashboard"); }}/>
        ))}

        {/* Add project tile */}
        <button className="cd-add" onClick={() => goto("onboarding")}>
          <div className="plus">+</div>
          <div className="lbl">{lang === "fr" ? "Lancer un nouveau projet" : "Launch a new project"}</div>
          <div className="hint">{lang === "fr" ? "Description + site web. Les 68 agents s'activent en 30 secondes." : "Description + website. The 68 agents wake up in 30 seconds."}</div>
        </button>
      </div>

      {/* X-PROJECT ACTIVITY — hidden until projects exist (real activity stream comes from agents, not yet wired) */}
      {agg.projects > 0 && (
        <div className="cd-activity">
          <h3>{lang === "fr" ? "Activité tous projets" : "Activity across all projects"}</h3>
          <div className="cd-activity-log" style={{ padding: "20px 4px", color: "var(--muted)", fontSize: 13, fontStyle: "italic" }}>
            {lang === "fr"
              ? "Vos agents viennent d'être briefés. Les premières livraisons apparaîtront ici dans quelques minutes."
              : "Your agents have just been briefed. The first deliverables will show up here in a few minutes."}
          </div>
        </div>
      )}
    </div>
  );
}

function ProjectCard({ p, lang, t, fmtMoney, fmtNum, onOpen }) {
  const statusLabel = {
    live:     lang === "fr" ? "Actif" : "Live",
    building: lang === "fr" ? "En construction" : "Building",
    paused:   lang === "fr" ? "En pause" : "Paused",
  }[p.status];
  return (
    <div className="cd-card" onClick={onOpen} style={{ "--proj-c": p.color }}>
      <div className="cd-card-head">
        <div className="cd-card-id">
          <span className="cd-color-bar"></span>
          <div>
            <div className="cd-card-name">{p.name}</div>
            <div className="cd-card-co">{p.company} · <span className="muted">{p.sector[lang]}</span></div>
          </div>
        </div>
        <span className="pill" data-status={p.status === "live" ? "live" : p.status === "building" ? "running" : "queued"}>
          <span className="dot"></span>{statusLabel}
        </span>
      </div>

      <p className="cd-card-desc">{p.description[lang]}</p>

      <div className="cd-card-kpis">
        <div className="cd-kpi">
          <span className="v">{p.mrr ? fmtMoney(p.mrr) : "—"}</span>
          <span className="l">{p.mrr_label}</span>
        </div>
        <div className="cd-kpi">
          <span className="v">{p.users ? fmtNum(p.users) : "—"}</span>
          <span className="l">{lang === "fr" ? "Utilisateurs" : "Users"}</span>
        </div>
        <div className="cd-kpi">
          <span className="v">
            {p.agents_live}<span className="mu">/{p.agents_total}</span>
          </span>
          <span className="l">{lang === "fr" ? "Agents" : "Agents"}</span>
        </div>
      </div>

      <div className="cd-card-spark">
        <Sparkline data={p.trend} width={300} height={36} color={p.color}/>
      </div>

      <div className="cd-card-foot">
        <span className="cd-milestone">
          <span className="arrow">↳</span> {p.next_milestone[lang]}
        </span>
        <span className="cd-time">{p.last_activity[lang]}</span>
      </div>
    </div>
  );
}

Object.assign(window, { ClientDashboard });