// =====================================================
// PAGE — Calendrier des croisières
// =====================================================

const CalendrierPage = ({ navigate }) => {
  const [view, setView] = React.useState("calendar"); // calendar | tableau
  const [filterPort, setFilterPort] = React.useState("");
  const [filterYear, setFilterYear] = React.useState("2026");

  // Empty state — pas de fichier Excel/Google Sheet fourni
  const escales = ESCALES.map(e => ({ id: e.id, nom: e.nom }));

  return (
    <main className="app-main">
      <section className="section">
        <div className="container container-wide">
          <div className="section-head">
            <span className="h-eyebrow">Programmation des escales</span>
            <h1 className="h-section">Calendrier des <em>escales croisières</em></h1>
            <p className="lede">Visualiser, anticiper et coordonner l'accueil des navires de croisière à Madagascar. Cette section est conçue pour être alimentée dynamiquement depuis un fichier Excel ou Google Sheet.</p>
          </div>

          <div className="cal-toolbar">
            <div className="cal-tabs">
              <button className={`tab ${view === "calendar" ? "active" : ""}`} onClick={() => setView("calendar")}>
                Vue calendrier
              </button>
              <button className={`tab ${view === "tableau" ? "active" : ""}`} onClick={() => setView("tableau")}>
                Vue tableau
              </button>
            </div>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <div className="field">
                <select value={filterYear} onChange={e => setFilterYear(e.target.value)} style={{ minWidth: 120 }}>
                  <option>2026</option><option>2027</option>
                </select>
              </div>
              <div className="field">
                <select value={filterPort} onChange={e => setFilterPort(e.target.value)} style={{ minWidth: 200 }}>
                  <option value="">Toutes les escales</option>
                  {escales.map(e => <option key={e.id} value={e.id}>{e.nom}</option>)}
                </select>
              </div>
              <button className="btn btn-ghost btn-sm">
                <Icon name="filter" size={13}/>Filtres avancés
              </button>
            </div>
          </div>

          {/* Empty state — calendrier non alimenté */}
          {view === "calendar" && <CalendarEmpty/>}
          {view === "tableau" && <TableEmpty/>}

          {/* Status legend */}
          <div className="card" style={{ marginTop: 32, background: "var(--c-bone)" }}>
            <h4 className="h-eyebrow" style={{ marginBottom: 12 }}>Statuts d'escale prévus</h4>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {[
                { l: "Confirmée", c: "#7FB539" },
                { l: "Prévisionnelle", c: "#5BB4D4" },
                { l: "En attente de validation", c: "#D97706" },
                { l: "Modifiée", c: "#8B92A1" },
                { l: "Annulée", c: "#B23F0E" },
                { l: "Réalisée", c: "#2C7CA0" }
              ].map(s => (
                <span className="badge" key={s.l} style={{ color: s.c, borderColor: s.c, background: "#fff" }}>
                  <span className="badge-dot" style={{ background: s.c }}></span>{s.l}
                </span>
              ))}
            </div>
            <p className="note" style={{ marginTop: 14 }}>
              Calendrier indicatif, susceptible d'être mis à jour selon les confirmations
              opérationnelles, les conditions météorologiques et les décisions des
              autorités compétentes.
            </p>
          </div>

          {/* Data model preview — for B2B operators */}
          <div className="card" style={{ marginTop: 24 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12, flexWrap: "wrap", gap: 12 }}>
              <h4 className="h-eyebrow" style={{ color: "var(--c-navy)" }}>Architecture de données — feuille « calendrier_croisieres »</h4>
              <span className="note">Modèle prévu pour Google Sheet / Excel</span>
            </div>
            <div className="table-wrap" style={{ border: 0, borderRadius: 0 }}>
              <table className="t">
                <thead>
                  <tr>
                    <th>Champ</th><th>Type</th><th>Description</th>
                  </tr>
                </thead>
                <tbody>
                  {[
                    ["date_arrivee", "Date", "Date d'arrivée du navire à l'escale"],
                    ["date_depart", "Date", "Date de départ"],
                    ["heure_arrivee", "Heure", "Heure prévue à quai ou à l'ancrage"],
                    ["heure_depart", "Heure", "Heure prévue de départ"],
                    ["nom_navire", "Texte", "Nom du navire"],
                    ["compagnie", "Texte", "Compagnie ou armateur"],
                    ["port_escale", "Référence", "Identifiant de l'escale (id table escales)"],
                    ["nombre_passagers_estime", "Nombre", "Estimation des passagers à bord"],
                    ["nombre_equipage_estime", "Nombre", "Estimation de l'équipage"],
                    ["type_escale", "Énum", "Accostage · mouillage · tender · exploratoire"],
                    ["statut_escale", "Énum", "Confirmée · Prévisionnelle · En attente · Modifiée · Annulée · Réalisée"],
                    ["observations", "Texte", "Notes opérationnelles"],
                    ["source_information", "Texte", "Référence de la source"],
                    ["derniere_mise_a_jour", "Date", "Date de la dernière mise à jour"]
                  ].map((row,i) => (
                    <tr key={i}>
                      <td><code style={{ fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--c-terra)" }}>{row[0]}</code></td>
                      <td>{row[1]}</td>
                      <td style={{ color: "var(--c-ink-soft)" }}>{row[2]}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

const CalendarEmpty = () => {
  const months = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
  const [activeMonth, setActiveMonth] = React.useState(3); // Avril
  return (
    <div className="cal-grid">
      <div>
        <div className="h-eyebrow" style={{ marginBottom: 8, color: "var(--c-navy)" }}>Mois</div>
        <div className="cal-month-list">
          {months.map((m, i) => (
            <div key={i} className={`cal-month-row ${activeMonth === i ? "active" : ""}`} onClick={() => setActiveMonth(i)}>
              <span>{m}</span>
              <span className="cm-count">—</span>
            </div>
          ))}
        </div>
      </div>
      <div className="cal-empty">
        <svg width="80" height="80" viewBox="0 0 64 64" fill="none" className="ce-icon">
          <rect x="10" y="14" width="44" height="42" rx="3" stroke="currentColor" strokeWidth="1.5" opacity="0.3"/>
          <path d="M10 24 L54 24" stroke="currentColor" strokeWidth="1.5" opacity="0.3"/>
          <circle cx="32" cy="40" r="10" stroke="currentColor" strokeWidth="1.5"/>
          <path d="M32 36 L32 40 L36 42" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
        <h3>Le calendrier des escales sera publié prochainement</h3>
        <p>Les données d'arrivée des navires sont en cours de consolidation
        auprès des autorités compétentes. Cette interface est prête à recevoir
        les données dès leur publication officielle.</p>
        <p className="note">— Connexion Google Sheet / Excel à activer ultérieurement —</p>
      </div>
    </div>
  );
};

const TableEmpty = () => (
  <div className="table-wrap">
    <table className="t">
      <thead>
        <tr>
          <th>Date d'arrivée</th>
          <th>Navire</th>
          <th>Compagnie</th>
          <th>Escale</th>
          <th>Passagers</th>
          <th>Type d'escale</th>
          <th>Statut</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colSpan="7" style={{ textAlign: "center", padding: "60px 24px", color: "var(--c-ink-soft)" }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
              <Icon name="calendar" size={32} stroke={1.4}/>
              <strong style={{ color: "var(--c-navy)", fontSize: 16 }}>Données en cours de consolidation auprès des autorités compétentes</strong>
              <span className="note" style={{ maxWidth: 380 }}>Le calendrier sera publié dès réception des programmations officielles des compagnies.</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
);

window.CalendrierPage = CalendrierPage;