/* ============================================================
   HÔTEL OMÉGA — Admin
   Login + dashboard (stats, état chambres, calendrier, table)
   ============================================================ */

const { useState: useStateA, useEffect: useEffectA, useMemo: useMemoA } = React;

/* ---------- STORE (rooms + bookings) ---------- */
const ROOM_STATUS = ["available", "occupied", "cleaning"];
const STATUS_LABEL = {
  available: "Disponible",
  occupied: "Occupée",
  cleaning: "Nettoyage",
};

// Inventaire complet : 4 étages × (4 doubles + 1 triple) = 20 chambres
// Doubles : 250 R$/nuit · Triples : 300 R$/nuit
const ADMIN_ROOMS_DEF = (() => {
  const rooms = [];
  for (let floor = 1; floor <= 4; floor++) {
    // 4 chambres doubles par étage : x01, x02, x03, x04
    for (let n = 1; n <= 4; n++) {
      const num = `${floor}0${n}`;
      rooms.push({
        id: `D${num}`,
        num,
        floor,
        type: "Double",
        name: `Chambre Double — ${num}`,
        capacity: 2,
        price: 250,
        status: "available",
      });
    }
    // 1 chambre triple par étage : x05
    const tnum = `${floor}05`;
    rooms.push({
      id: `T${tnum}`,
      num: tnum,
      floor,
      type: "Triple",
      name: `Chambre Triple — ${tnum}`,
      capacity: 3,
      price: 300,
      status: "available",
    });
  }
  return rooms;
})();

function loadRooms() {
  try {
    const raw = localStorage.getItem("omega_admin_rooms");
    if (raw) {
      const stored = JSON.parse(raw);
      // Migration auto : si moins de 20 chambres en storage, on regénère
      // tout en préservant le statut des chambres qui existaient déjà
      if (Array.isArray(stored) && stored.length < ADMIN_ROOMS_DEF.length) {
        const merged = ADMIN_ROOMS_DEF.map(def => {
          const old = stored.find(s => s.num === def.num);
          return old ? { ...def, status: old.status || "available" } : { ...def };
        });
        saveRooms(merged);
        return merged;
      }
      return stored;
    }
  } catch (e) {}
  return ADMIN_ROOMS_DEF.map(r => ({ ...r }));
}
function saveRooms(rs) {
  try { localStorage.setItem("omega_admin_rooms", JSON.stringify(rs)); } catch (e) {}
}

// ─── Bookings: routed through OmegaDB (Firebase or localStorage fallback) ───
// We keep a synchronous in-memory cache so legacy code that calls loadBookings()
// without await still works. The cache is hydrated by a subscription on init.
let __bookingsCache = (() => {
  try {
    const raw = localStorage.getItem("omega_admin_bookings");
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return [];
})();

let __dbSubscribed = false;
function ensureDbSubscription() {
  if (__dbSubscribed) return;
  if (!window.OmegaDB) {
    // OmegaDB might load slightly later — retry shortly
    setTimeout(ensureDbSubscription, 200);
    return;
  }
  __dbSubscribed = true;
  window.OmegaDB.subscribeBookings((list) => {
    __bookingsCache = list;
    window.dispatchEvent(new CustomEvent("omega-store-changed"));
  });
}
ensureDbSubscription();

function loadBookings() {
  return __bookingsCache.slice();
}

// Public API: pushed by the booking drawer
window.OmegaStore = {
  async pushBooking(b) {
    // ── Attribution automatique de la chambre ──
    // On cherche la 1ère chambre du bon type qui est encore "available".
    // Le numéro est ajouté à la réservation AVANT envoi (Firebase + email).
    const rooms = loadRooms();
    const target = rooms.find(r => r.type === b.roomType && r.status === "available");
    const assignedRoomNum = target ? target.num : null;

    const booking = {
      createdAt: new Date().toISOString(),
      status: "Confirmée",
      roomNum: assignedRoomNum,                 // ← numéro attribué (ex: "203")
      roomLabel: target ? target.name : null,   // ← libellé complet (ex: "Chambre Double — 203")
      ...b,
    };
    if (window.OmegaDB) {
      try {
        const id = await window.OmegaDB.pushBooking(booking);
        booking.id = id;
      } catch (e) {
        console.warn("[OmegaStore] DB push failed:", e);
        booking.id = "L_" + Date.now();
      }
    } else {
      booking.id = "L_" + Date.now();
    }
    // Marquer la chambre attribuée comme occupée
    if (target) { target.status = "occupied"; saveRooms(rooms); }
    // Email notifications (best-effort, non-blocking)
    if (window.OmegaMail && window.OmegaMail.isConfigured()) {
      Promise.all([
        window.OmegaMail.notifyManager(booking).catch(() => {}),
        window.OmegaMail.confirmClient(booking).catch(() => {}),
      ]);
    }
    window.dispatchEvent(new CustomEvent("omega-store-changed"));
    return booking;
  },
  async checkAvailability(roomType, checkin, checkout) {
    if (!window.OmegaDB) return { ok: true };
    return window.OmegaDB.isRoomAvailable(roomType, checkin, checkout);
  },
};

/* ---------- ADMIN LOGIN ---------- */
function AdminLogin({ onLogin }) {
  const [user, setUser] = useStateA("");
  const [pass, setPass] = useStateA("");
  const [err, setErr] = useStateA(false);

  const submit = () => {
    if (user === "admin" && pass === "omega2024") {
      setErr(false);
      onLogin();
    } else {
      setErr(true);
    }
  };

  return (
    <div className="admin-login">
      <div className="al-box">
        <div className="al-eyebrow">Hôtel Oméga</div>
        <div className="al-mark">Ω</div>
        <h2 className="al-title">Espace administrateur</h2>
        <p className="al-sub">Accès réservé. Tableau de bord, réservations & gestion des chambres.</p>
        <label className="dp-field">
          <span>Identifiant</span>
          <input value={user} onChange={e => { setUser(e.target.value); setErr(false); }} placeholder="admin" />
        </label>
        <label className="dp-field">
          <span>Mot de passe</span>
          <input
            type="password" value={pass}
            onChange={e => { setPass(e.target.value); setErr(false); }}
            onKeyDown={e => e.key === "Enter" && submit()}
            placeholder="••••••••"
          />
        </label>
        {err && <div className="al-err">Identifiants incorrects.</div>}
        <button className="btn btn-primary btn-block" onClick={submit}>
          Connexion <span className="btn-arrow">→</span>
        </button>
        <div className="al-demo">Démo : <strong>admin</strong> / <strong>omega2024</strong></div>
      </div>
    </div>
  );
}

/* ---------- DASHBOARD ---------- */
function fmtDate(ds) {
  if (!ds) return "—";
  const [y, m, d] = ds.split("-");
  return `${d}/${m}/${y}`;
}

const MONTHS = ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
const DAYS = ["Lu","Ma","Me","Je","Ve","Sa","Di"];

function StatsRow({ rooms, bookings }) {
  const conf = bookings.filter(b => b.status === "Confirmée");
  const rev = conf.reduce((s, b) => s + (b.total || 0), 0);
  const av = rooms.filter(r => r.status === "available").length;
  const oc = rooms.filter(r => r.status === "occupied").length;
  const cl = rooms.filter(r => r.status === "cleaning").length;
  return (
    <div className="ad-stats">
      <div className="ad-stat ad-stat-hl">
        <div className="ad-stat-lbl">Réservations</div>
        <div className="ad-stat-val">{bookings.length}</div>
        <div className="ad-stat-sub">{conf.length} confirmées</div>
      </div>
      <div className="ad-stat">
        <div className="ad-stat-lbl">Revenus</div>
        <div className="ad-stat-val">{rev.toLocaleString("fr-FR")} <span>R$</span></div>
        <div className="ad-stat-sub">Total encaissé</div>
      </div>
      <div className="ad-stat">
        <div className="ad-stat-lbl">Disponibles</div>
        <div className="ad-stat-val ad-pos">{av}</div>
        <div className="ad-stat-sub">sur {rooms.length} chambres</div>
      </div>
      <div className="ad-stat">
        <div className="ad-stat-lbl">Occupées</div>
        <div className="ad-stat-val ad-neg">{oc}</div>
        <div className="ad-stat-sub">{cl} en nettoyage</div>
      </div>
    </div>
  );
}

function RoomsPanel({ rooms, bookings, onOpen }) {
  // Pour chaque chambre, trouver le client qui l'occupe (réservation confirmée
  // dont le séjour englobe aujourd'hui)
  const today = (() => {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
  })();

  const findGuest = (room) => {
    return bookings.find(b =>
      b.status === "Confirmée" &&
      b.roomNum === room.num &&
      b.checkin <= today && b.checkout > today
    );
  };

  // Grouper par étage
  const floors = [1, 2, 3, 4];
  const byFloor = floors.map(f => ({
    floor: f,
    rooms: rooms.filter(r => r.floor === f),
  }));

  return (
    <div className="ad-panel">
      <div className="ad-panel-title">État des chambres</div>
      <div className="ad-rooms">
        {byFloor.map(({ floor, rooms: floorRooms }) => (
          <div key={floor} className="ad-floor">
            <div className="ad-floor-label">Étage {floor}</div>
            {floorRooms.map(r => {
              const guest = findGuest(r);
              return (
                <button key={r.id} className="ad-room-row" onClick={() => onOpen(r)}>
                  <div className="ad-room-num">{r.num}</div>
                  <div className="ad-room-mid">
                    <div className="ad-room-name">{r.name}</div>
                    <div className="ad-room-meta">
                      {r.type} · {r.capacity} pers. · {r.price} R$/nuit
                      {guest && <span className="ad-room-guest"> · {guest.firstName} {guest.lastName}</span>}
                    </div>
                  </div>
                  <span className={"ad-pill ad-pill-" + r.status}>{STATUS_LABEL[r.status]}</span>
                </button>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}

function CalendarPanel({ rooms, bookings }) {
  const now = new Date();
  const [y, setY] = useStateA(now.getFullYear());
  const [m, setM] = useStateA(now.getMonth());

  const first = new Date(y, m, 1).getDay();
  const offset = first === 0 ? 6 : first - 1;
  const days = new Date(y, m + 1, 0).getDate();
  const today = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;

  const total = rooms.length || 1;

  const cells = [];
  for (let i = 0; i < offset; i++) cells.push(null);
  for (let d = 1; d <= days; d++) {
    const ds = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
    const c = bookings.filter(b => b.status === "Confirmée" && b.checkin <= ds && b.checkout > ds).length;
    cells.push({ d, ds, c, today: ds === today });
  }

  const prev = () => { let nm = m - 1, ny = y; if (nm < 0) { nm = 11; ny--; } setM(nm); setY(ny); };
  const next = () => { let nm = m + 1, ny = y; if (nm > 11) { nm = 0; ny++; } setM(nm); setY(ny); };

  // Niveau d'occupation → couleur
  // vide : rien · vert : 1 à 33% · jaune : 34 à 66% · rouge : 67%+
  const levelClass = (count) => {
    if (count === 0) return "";
    const ratio = count / total;
    if (ratio >= 1) return " is-full";        // complet → rouge foncé
    if (ratio > 0.66) return " is-full";      // ≥ 67% → rouge
    if (ratio > 0.33) return " is-mid";       // 34-66% → jaune
    return " is-low";                          // 1-33% → vert
  };

  return (
    <div className="ad-panel">
      <div className="ad-panel-title">Calendrier</div>
      <div className="ad-cal-head">
        <button className="ad-cal-nav" onClick={prev} aria-label="Mois précédent">‹</button>
        <div className="ad-cal-month">{MONTHS[m]} {y}</div>
        <button className="ad-cal-nav" onClick={next} aria-label="Mois suivant">›</button>
      </div>
      <div className="ad-cal-grid">
        {DAYS.map(d => <div key={d} className="ad-cal-dn">{d}</div>)}
        {cells.map((c, i) => {
          if (!c) return <div key={"e" + i} />;
          const cls = "ad-cal-day"
            + (c.today ? " is-today" : "")
            + levelClass(c.c);
          const tip = c.c === 0
            ? "Aucune réservation"
            : `${c.c}/${total} chambres occupées`;
          return (
            <div key={c.ds} className={cls} title={tip}>
              <span className="ad-cal-d">{c.d}</span>
              {c.c > 0 && <span className="ad-cal-c">{c.c}</span>}
            </div>
          );
        })}
      </div>
      <div className="ad-cal-legend">
        <span><span className="lg lg-low"></span>Peu d'occupation</span>
        <span><span className="lg lg-mid"></span>Moitié</span>
        <span><span className="lg lg-full"></span>Complet</span>
        <span><span className="lg lg-today"></span>Aujourd'hui</span>
      </div>
    </div>
  );
}

function BookingsTable({ bookings, onCancel }) {
  const [search, setSearch] = useStateA("");
  const [stat, setStat] = useStateA("");
  const [type, setType] = useStateA("");

  const filtered = bookings.filter(b =>
    (!search || ((b.firstName + " " + b.lastName + " " + b.email).toLowerCase().includes(search.toLowerCase())))
    && (!stat || b.status === stat)
    && (!type || b.roomType === type)
  );

  return (
    <div className="ad-panel ad-panel-wide">
      <div className="ad-panel-title">Réservations</div>
      <div className="ad-filters">
        <input className="ad-input" placeholder="Recherche : nom, email…" value={search} onChange={e => setSearch(e.target.value)} />
        <select className="ad-input" value={stat} onChange={e => setStat(e.target.value)}>
          <option value="">Tous les statuts</option>
          <option>Confirmée</option>
          <option>Annulée</option>
        </select>
        <select className="ad-input" value={type} onChange={e => setType(e.target.value)}>
          <option value="">Toutes les chambres</option>
          <option>Double</option>
          <option>Triple</option>
        </select>
      </div>
      <div className="ad-table-wrap">
        <table className="ad-table">
          <thead>
            <tr>
              <th>#</th><th>Client</th><th>Chambre</th><th>Arrivée</th><th>Départ</th>
              <th>Nuits</th><th>Total</th><th>Paiement</th><th>Statut</th><th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr><td colSpan="10" className="ad-empty">Aucune réservation pour le moment.</td></tr>
            )}
            {filtered.map(b => (
              <tr key={b.id}>
                <td className="ad-mut">#{String(b.id).slice(-4)}</td>
                <td>
                  <div className="ad-name">{b.firstName} {b.lastName}</div>
                  <div className="ad-mut">{b.email}</div>
                </td>
                <td><div className="ad-room-tag">N°{b.roomNum || "—"} · {b.roomType}</div></td>
                <td className="ad-mut">{fmtDate(b.checkin)}</td>
                <td className="ad-mut">{fmtDate(b.checkout)}</td>
                <td className="ad-c">{b.nights}</td>
                <td className="ad-amt">{b.total} R$</td>
                <td><span className={"ad-meth ad-meth-" + (b.method || "card")}>{b.method || "card"}</span></td>
                <td>
                  <span className={"ad-pill " + (b.status === "Confirmée" ? "ad-pill-available" : "ad-pill-occupied")}>
                    {b.status}
                  </span>
                </td>
                <td>
                  {b.status === "Confirmée" ? (
                    <button className="ad-btn ad-btn-danger" onClick={() => onCancel(b.id)}>Annuler</button>
                  ) : "—"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function RoomEditModal({ room, onClose, onSave, bookings }) {
  const [status, setStatus] = useStateA(room.status);
  const list = bookings.filter(b => b.roomType === room.type && b.status === "Confirmée");
  return (
    <div className="ad-modal-veil" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="ad-modal">
        <div className="ad-modal-head">
          <div>
            <div className="ad-modal-eyebrow">Chambre N°{room.num}</div>
            <div className="ad-modal-title">{room.name}</div>
          </div>
          <button className="drawer-close" onClick={onClose}>✕</button>
        </div>
        <div className="ad-modal-section">Changer le statut</div>
        <div className="ad-status-toggle">
          {ROOM_STATUS.map(s => (
            <button
              key={s}
              className={"ad-status-opt ad-status-" + s + (status === s ? " is-active" : "")}
              onClick={() => setStatus(s)}
            >
              {STATUS_LABEL[s]}
            </button>
          ))}
        </div>
        <div className="ad-modal-section">Réservations actives</div>
        <div className="ad-modal-bookings">
          {list.length === 0 ? (
            <div className="ad-empty-soft">Aucune réservation active.</div>
          ) : list.map(b => (
            <div key={b.id} className="ad-mb-row">
              <div className="ad-name">{b.firstName} {b.lastName}</div>
              <div className="ad-mut">{fmtDate(b.checkin)} → {fmtDate(b.checkout)} · {b.total} R$</div>
            </div>
          ))}
        </div>
        <button className="btn btn-primary btn-block" onClick={() => onSave(status)}>
          Enregistrer
        </button>
      </div>
    </div>
  );
}

function AdminDashboard({ onLogout, hideLogout }) {
  const [rooms, setRooms] = useStateA(loadRooms());
  const [bookings, setBookings] = useStateA(loadBookings());
  const [edit, setEdit] = useStateA(null);

  // Listen to store changes (new bookings from drawer)
  useEffectA(() => {
    const handler = () => { setRooms(loadRooms()); setBookings(loadBookings()); };
    window.addEventListener("omega-store-changed", handler);
    return () => window.removeEventListener("omega-store-changed", handler);
  }, []);

  const cancelBooking = (id) => {
    if (!window.confirm("Annuler cette réservation ?")) return;
    const cancelled = bookings.find(b => b.id === id);
    if (window.OmegaDB) {
      window.OmegaDB.updateBooking(id, { status: "Annulée" }).catch(() => {});
    }
    // Free a matching occupied room if no other confirmed for that type
    if (cancelled) {
      const next = bookings.map(b => b.id === id ? { ...b, status: "Annulée" } : b);
      const stillBooked = next.some(b => b.id !== id && b.roomType === cancelled.roomType && b.status === "Confirmée");
      if (!stillBooked) {
        // Flip ONE matching occupied room back to available
        let flipped = false;
        const nr2 = rooms.map(r => {
          if (!flipped && r.type === cancelled.roomType && r.status === "occupied") {
            flipped = true;
            return { ...r, status: "available" };
          }
          return r;
        });
        setRooms(nr2); saveRooms(nr2);
      }
    }
  };

  const saveRoomStatus = (newStatus) => {
    const nr = rooms.map(r => r.id === edit.id ? { ...r, status: newStatus } : r);
    setRooms(nr); saveRooms(nr);
    setEdit(null);
  };

  return (
    <section className="page admin-page" data-screen-label="Admin · Dashboard">
      <header className="ad-head">
        <div>
          <div className="page-eyebrow">Administration</div>
          <h1 className="ad-h1">Tableau de bord — <em>Hôtel Oméga</em></h1>
        </div>
        <button className="btn btn-ghost" onClick={onLogout} style={{ display: hideLogout ? "none" : "" }}>Déconnexion ↩</button>
      </header>

      <StatsRow rooms={rooms} bookings={bookings} />

      <div className="ad-grid">
        <RoomsPanel rooms={rooms} bookings={bookings} onOpen={setEdit} />
        <CalendarPanel rooms={rooms} bookings={bookings} />
      </div>

      <BookingsTable bookings={bookings} onCancel={cancelBooking} />

      {edit && (
        <RoomEditModal
          room={edit}
          bookings={bookings}
          onClose={() => setEdit(null)}
          onSave={saveRoomStatus}
        />
      )}
    </section>
  );
}

function AdminPage() {
  const [auth, setAuth] = useStateA(false);
  const [tab, setTab] = useStateA("dashboard");

  if (!auth) return <AdminLogin onLogin={() => setAuth(true)} />;

  return (
    <div className="ad-shell">
      <nav className="ad-tabs">
        <button
          className={"ad-tab" + (tab === "dashboard" ? " is-active" : "")}
          onClick={() => setTab("dashboard")}
        >
          <span className="ad-tab-icon">▦</span>
          <span>Tableau de bord</span>
        </button>
        <button
          className={"ad-tab" + (tab === "config" ? " is-active" : "")}
          onClick={() => setTab("config")}
        >
          <span className="ad-tab-icon">⚙</span>
          <span>Configuration</span>
        </button>
        <div className="ad-tabs-spacer" />
        <button className="ad-tab ad-tab-logout" onClick={() => setAuth(false)}>
          Déconnexion ↩
        </button>
      </nav>

      {tab === "dashboard" && <AdminDashboard onLogout={() => setAuth(false)} hideLogout />}
      {tab === "config" && (window.ConfigPanel ? <window.ConfigPanel /> : <div className="ad-loading">Chargement…</div>)}
    </div>
  );
}

window.AdminPage = AdminPage;