/* client.jsx — Khách / Cô dâu chú rể flow: pick a project, browse,
   rate & select, with a running selection summary bar. */

function ClientProjectCard({ project, store, onOpen }) {
  const photos = store.projectPhotos(project.id);
  const picked = photos.filter((p) => p.status === "pick").length;
  const d = new Date(project.date);
  const cover = photos[0] ? store.src(photos[0]) : null;
  return (
    <div className="project-card" onClick={onOpen}>
      <div className="project-cover" style={{ aspectRatio: "16/11" }}>
        {cover ? <img src={cover} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <div style={{ position: "absolute", inset: 0, background: project.cover }} />}
        <div className="pc-veil" />
        <div style={{ position: "absolute", left: 18, bottom: 16, color: "#fff" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", opacity: 0.85 }}>Album của bạn</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 600, lineHeight: 1.1, textShadow: "0 2px 12px rgba(0,0,0,0.4)" }}>{project.name}</div>
        </div>
      </div>
      <div className="project-body">
        <div className="project-meta" style={{ marginTop: 0 }}>
          <span>{d.toLocaleDateString("vi-VN", { day: "2-digit", month: "long", year: "numeric" })}</span>
          <span className="dot" /><span>{photos.length} ảnh</span>
          {picked > 0 && <><span className="dot" /><span style={{ color: "var(--accent)", fontWeight: 600 }}>{picked} đã chọn</span></>}
        </div>
        <button className="btn btn-ghost btn-sm" style={{ marginTop: 14, width: "100%" }}>
          {picked > 0 ? "Tiếp tục chọn ảnh" : "Bắt đầu chọn ảnh"} <Icon name="right" size={15} />
        </button>
      </div>
    </div>
  );
}

function AddCodeModal({ store, auth, onClose, onAdded }) {
  const [code, setCode] = React.useState("");
  const [err, setErr] = React.useState("");
  const add = async () => {
    if (window.cpConfigured && window.cpConfigured()) {
      try {
        const pid = await window.CP_CLOUD.db.redeemCode(code.trim());
        await store.reload();
        onAdded(store.project(pid) || { id: pid, name: "album" });
      } catch (e) { setErr("Mã không đúng hoặc đã hết hạn."); }
      return;
    }
    const p = store.projectByCode(code);
    if (!p) { setErr("Mã không đúng. Kiểm tra lại mã studio đã gửi."); return; }
    auth.grantProject(p.id); onAdded(p);
  };
  return (
    <Modal onClose={onClose} max={400}>
      <div className="modal-head"><h2>Thêm album</h2><p>Nhập mã truy cập studio đã gửi để mở thêm album.</p></div>
      <div className="modal-body">
        <div className="input-group"><label>Mã truy cập</label>
          <input value={code} onChange={(e) => { setCode(e.target.value.toUpperCase()); setErr(""); }} autoFocus
            style={{ letterSpacing: "0.18em", fontWeight: 700 }} onKeyDown={(e) => e.key === "Enter" && add()} /></div>
        {err && <div className="login-err"><Icon name="info" size={15} /> {err}</div>}
      </div>
      <div className="modal-foot">
        <button className="btn btn-ghost" onClick={onClose}>Huỷ</button>
        <button className="btn btn-primary" onClick={add} disabled={!code.trim()}>Mở album</button>
      </div>
    </Modal>
  );
}

function ClientDashboard({ store, onOpen, allowedIds, auth }) {
  const [modal, setModal] = React.useState(false);
  const toast = useToast();
  const projects = store._data.projects.filter((p) => !allowedIds || allowedIds.includes(p.id));
  const uname = ((auth && auth.user && auth.user.name) || "");
  const firstName = (uname && uname !== "Cô dâu & chú rể") ? uname.split(" ").slice(-1)[0] : "";
  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Khách hàng · Album của bạn</div>
          <h1 className="page-title">{firstName ? "Chào " + firstName : "Chào mừng cô dâu & chú rể"}</h1>
          <p className="page-sub">Đây là (những) album studio đã cấp quyền cho bạn. Hãy thả tim, chấm sao và đánh dấu ảnh muốn giữ.</p>
        </div>
        <button className="btn btn-ghost" onClick={() => setModal(true)}><Icon name="plus" size={16} /> Thêm album bằng mã</button>
      </div>
      {projects.length === 0 ? (
        <div className="empty">
          <Icon name="folder" size={52} className="em-ic" sw={1.2} />
          <h3>Chưa có album nào</h3>
          <p>Nhập mã truy cập studio đã gửi để mở album của bạn.</p>
          <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => setModal(true)}><Icon name="plus" size={16} /> Nhập mã album</button>
        </div>
      ) : (
        <div className="project-grid">
          {projects.map((p) => (
            <ClientProjectCard key={p.id} project={p} store={store} onOpen={() => onOpen(p.id)} />
          ))}
        </div>
      )}
      {modal && <AddCodeModal store={store} auth={auth} onClose={() => setModal(false)} onAdded={(p) => { setModal(false); toast("Đã mở album " + p.name, "check"); }} />}
    </div>
  );
}

function SummaryBar({ photos, onSend }) {
  const liked = photos.filter((p) => p.liked).length;
  const picked = photos.filter((p) => p.status === "pick").length;
  const reviewed = photos.filter((p) => p.stars > 0 || p.status !== "none" || p.liked).length;
  return (
    <div className="summary-bar">
      <div className="summary-stat"><span className="ss-num">{liked}</span><span className="ss-lbl">yêu thích</span></div>
      <div className="summary-stat"><span className="ss-num pick">{picked}</span><span className="ss-lbl">đã chọn</span></div>
      <div className="summary-stat"><span className="ss-num">{reviewed}</span><span className="ss-lbl">đã xem</span></div>
      <div style={{ flex: 1 }} />
      <span style={{ fontSize: 13, color: "var(--ink-3)", marginRight: 4 }}>Lựa chọn được lưu tự động</span>
      <button className="btn btn-primary" onClick={onSend} disabled={picked === 0}>
        <Icon name="send" size={16} /> Gửi lựa chọn cho studio
      </button>
    </div>
  );
}

function ClientProjectView({ projectId, store, onBack }) {
  const project = store.project(projectId);
  const photos = store.projectPhotos(projectId);
  const toast = useToast();
  return (
    <div className="page" style={{ paddingBottom: 110 }}>
      <div className="page-head">
        <div>
          <div className="breadcrumb" style={{ marginBottom: 10 }}>
            <button onClick={onBack}>Album của tôi</button><span className="sep">/</span><span className="crumb-current">{project.name}</span>
          </div>
          <h1 className="page-title serif">{project.name}</h1>
          <p className="page-sub">Thả <Icon name="heart" size={14} style={{ verticalAlign: "-2px", color: "oklch(0.62 0.2 18)" }} fill /> để lưu nhanh ảnh thích · chấm sao để xếp hạng · bấm <b style={{ color: "var(--accent)" }}>Chọn</b> cho ảnh muốn in. Bấm vào ảnh để xem lớn &amp; ghi chú.</p>
        </div>
      </div>
      <Gallery projectId={projectId} store={store} role="client" />
      <SummaryBar photos={photos} onSend={() => toast("Đã gửi lựa chọn cho studio 💌", "send")} />
    </div>
  );
}

Object.assign(window, { ClientDashboard, ClientProjectView });