// ─────────────────────────────────────────────────────────
// ChefVerse · Briefs marketplace + detail
// ─────────────────────────────────────────────────────────
const { useState: useStateBr } = React;

const BRIEF_IMAGES = [
  "uploads/brief-1.jpg",
  "uploads/brief-2.jpg",
  "uploads/brief-3.jpg",
  "uploads/brief-4.jpg",
];
function briefImageFor(id) {
  const idx = (id.split("").reduce((a, c) => a + c.charCodeAt(0), 0)) % BRIEF_IMAGES.length;
  return BRIEF_IMAGES[idx];
}

function Briefs({ locale, onOpenBrief }) {
  const t = window.I18N[locale];
  const tb = t.briefs;
  const [pillar, setPillar] = useStateBr("all");
  const list = window.BRIEFS.filter(b => {
    if (pillar !== "all" && b.pillar !== pillar) return false;
    return true;
  });

  const featured = window.BRIEFS.find(b => b.featured) || window.BRIEFS[0];

  return (
    <div className="page page-briefs">
      <div className="page-head">
        <div>
          <h1>{tb.heading}</h1>
          <p className="lead display-italic">{tb.sub}</p>
        </div>
        <div className="head-actions">
          <button className="btn btn-outline"><Icon name="filter" size={14} /> {t.course.filter}</button>
          <button className="btn btn-outline"><Icon name="bookmark" size={14} /> Saved</button>
        </div>
      </div>

      {/* Featured brief band */}
      <div className="brief-featured">
        <div className="brief-featured-cover" style={{ background: `linear-gradient(135deg, ${window.PILLARS[featured.pillar].color}, var(--squid-ink))` }}>
          <img src={briefImageFor(featured.id)} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.7, zIndex: 0 }} />
          <div style={{ position: "absolute", inset: 0, zIndex: 1, background: "linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%)" }} />
          <span className="eyebrow" style={{ position: "relative", zIndex: 2, color: "#fff" }}>{tb.featured_brief.toUpperCase()}</span>
          <div className="bf-brand" style={{ position: "relative", zIndex: 2, color: "#fff" }}>{featured.brand}</div>
          <div className="bf-title" style={{ position: "relative", zIndex: 2, color: "#fff" }}>{featured.title[locale]}</div>
        </div>
        <div className="brief-featured-meta">
          <p className="display-italic" style={{ color: "var(--smoke)", margin: 0 }}>{featured.desc[locale]}</p>
          <div className="brief-featured-stats">
            <BriefStat label={tb.payout} value={featured.payout[locale]} highlight />
            <BriefStat label={tb.deadline} value={`${featured.deadline_days} days`} />
            <BriefStat label={tb.duration} value={featured.duration} />
            <BriefStat label={tb.submissions} value={featured.submissions} />
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-primary" onClick={() => onOpenBrief(featured.id)}>
              <Icon name="arrow-right" size={14} /> {tb.details}
            </button>
            <button className="btn btn-outline">
              <Icon name="bookmark-plus" size={14} /> Save
            </button>
          </div>
        </div>
      </div>

      {/* Filter row */}
      <div className="brief-filters">
        <div className="bf-group">
          <span className="bf-group-label">{tb.filter_pillar}</span>
          <div className="bf-pills">
            <FilterPill on={pillar === "all"} onClick={() => setPillar("all")}>{t.course.all}</FilterPill>
            {Object.entries(window.PILLARS).map(([k, p]) => (
              <FilterPill key={k} on={pillar === k} onClick={() => setPillar(k)}
                color={p.color} soft={p.soft}>
                {p.name[locale]}
              </FilterPill>
            ))}
          </div>
        </div>

      </div>

      {/* Brief grid */}
      <div className="brief-grid">
        {list.map(b => <BriefCard key={b.id} brief={b} locale={locale} onOpen={() => onOpenBrief(b.id)} />)}
      </div>
    </div>
  );
}

function BriefStat({ label, value, highlight }) {
  return (
    <div className={"brief-stat " + (highlight ? "high" : "")}>
      <div className="brief-stat-label">{label}</div>
      <div className="brief-stat-value">{value}</div>
    </div>
  );
}

function FilterPill({ on, onClick, children, color, soft }) {
  const style = on && color ? { background: soft, color, borderColor: color } : {};
  return (
    <button className={"filter-pill " + (on ? "on" : "")} style={style} onClick={onClick}>
      {children}
    </button>
  );
}

function BriefCard({ brief, locale, onOpen, layout }) {
  const t = window.I18N[locale];
  const tb = t.briefs;
  const pillar = window.PILLARS[brief.pillar];
  const urgent = brief.deadline_days <= 7;
  const claim = (window.BRIEF_CLAIMS && window.BRIEF_CLAIMS[brief.id]);
  const claimLab = claim && claim.status !== "open"
    ? (claim.status === "claimed" ? (locale === "de" ? "Übernommen" : locale === "id" ? "Diambil" : "Claimed")
      : claim.status === "submitted" ? (locale === "de" ? "Eingereicht" : locale === "id" ? "Dikirim" : "Submitted")
      : null)
    : null;
  const briefImg = briefImageFor(brief.id);
  return (
    <button className={"brief-card " + (layout === "list" ? "list" : "")} onClick={onOpen}>
      <div className="brief-card-stripe" style={{ background: pillar.color }} />
      {layout !== "list" && (
        <div className="brief-card-cover" style={{ position: "relative", overflow: "hidden" }}>
          <img src={briefImg} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 40%, ${pillar.color}cc 100%)` }} />
          {claimLab && (
            <span className={"claim-pill " + claim.status}>
              <Icon name={claim.status === "submitted" ? "check" : "bookmark"} size={10} /> {claimLab}
            </span>
          )}
        </div>
      )}
      <div className="brief-card-body">
        <div className="brief-card-head">
          <span className="brief-card-brand">{brief.brand}</span>
          <span className="brief-pill" style={{ background: pillar.soft, color: pillar.color }}>
            {pillar.name[locale]}
          </span>
          {layout === "list" && claimLab && (
            <span className={"claim-pill " + claim.status}>
              <Icon name={claim.status === "submitted" ? "check" : "bookmark"} size={10} /> {claimLab}
            </span>
          )}
        </div>
        <div className="brief-card-title">{brief.title[locale]}</div>
        <p className="brief-card-desc subtle">{brief.desc[locale]}</p>

        <div className="brief-card-markets">
          <span className="subtle">{tb.market}:</span>
          {brief.market.map(m => <span key={m} className="m-flag" title={window.I18N[m].market}>{window.I18N[m].flag}</span>)}
        </div>

        <div className="brief-card-foot">
          <div className="brief-card-payout">{brief.payout[locale]}</div>
          <div className="brief-card-meta">
            <span className={"brief-deadline " + (urgent ? "urgent" : "")}><Icon name="clock" size={11} /> {brief.deadline_days}d</span>
            <span className="subtle">·</span>
            <span className="subtle">{brief.duration}</span>
            <span className="subtle">·</span>
            <span className="subtle">{brief.submissions} {tb.submissions}</span>
          </div>
        </div>
      </div>
    </button>
  );
}

// ─────────────────────────────────────────────────────────
// Brief detail + submission
// ─────────────────────────────────────────────────────────
function BriefDetail({ briefId, locale, onBack, onSubmit }) {
  const t = window.I18N[locale];
  const tb = t.briefs;
  const brief = window.BRIEFS.find(b => b.id === briefId) || window.BRIEFS[0];
  const pillar = window.PILLARS[brief.pillar];
  const [submitOpen, setSubmitOpen] = useStateBr(false);

  return (
    <div className="page page-brief-detail">
      <div className="player-crumbs">
        <button className="link-btn" onClick={onBack}><Icon name="chevron-left" size={12} /> {tb.heading}</button>
        <span className="crumb-sep">/</span>
        <span className="display-italic" style={{ color: "var(--smoke)" }}>{brief.brand}</span>
      </div>

      <div className="brief-detail-grid">
        <div className="brief-detail-main">
          <div className="brief-detail-hero" style={{ background: `linear-gradient(135deg, ${pillar.color}, var(--squid-ink))` }}>
            <img src={briefImageFor(brief.id)} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.7, zIndex: 0, borderRadius: 14 }} />
            <div style={{ position: "absolute", inset: 0, borderRadius: 14, zIndex: 1, background: "linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%)" }} />
            <span className="brief-pill" style={{ position: "relative", zIndex: 2, background: "rgba(255,255,255,0.2)", color: "#fff", borderColor: "rgba(255,255,255,0.3)" }}>
              {pillar.name[locale]}
            </span>
            <div className="bdh-brand" style={{ position: "relative", zIndex: 2, color: "#fff" }}>{brief.brand}</div>
            <h1 className="bdh-title" style={{ position: "relative", zIndex: 2, color: "#fff" }}>{brief.title[locale]}</h1>
            <div className="bdh-markets" style={{ position: "relative", zIndex: 2 }}>
              {brief.market.map(m => (
                <span key={m} className="bdh-market">
                  {window.I18N[m].flag} {window.I18N[m].market}
                </span>
              ))}
            </div>
          </div>

          <div className="brief-block">
            <span className="eyebrow">THE BRIEF</span>
            <p className="lead display-italic">{brief.desc[locale]}</p>
          </div>

          <div className="brief-block">
            <span className="eyebrow">DELIVERABLES</span>
            <ul className="brief-list">
              {brief.deliverables.map((d, i) => (
                <li key={i}><Icon name="check-circle" size={14} style={{ color: "var(--ufs-orange)" }} /> {d}</li>
              ))}
            </ul>
          </div>

          <div className="brief-block">
            <span className="eyebrow">TONE</span>
            <p className="lead display-italic">{brief.tone}</p>
          </div>

          <div className="brief-block">
            <span className="eyebrow">DO'S & DON'TS</span>
            <div className="dos-dont">
              <div className="dos">
                <div className="dd-h"><Icon name="check" size={13} /> Do</div>
                <ul>
                  <li>Use the product visibly in at least one shot</li>
                  <li>Speak in your own voice — your team's energy</li>
                  <li>Caption in your market language</li>
                </ul>
              </div>
              <div className="donts">
                <div className="dd-h"><Icon name="x" size={13} /> Don't</div>
                <ul>
                  <li>Use competitor products in frame</li>
                  <li>Add licensed music without clearance</li>
                  <li>Submit late — deadline is firm</li>
                </ul>
              </div>
            </div>
          </div>

          <div className="brief-block">
            <span className="eyebrow">RECOMMENDED MODULES</span>
            <div className="rec-mods">
              <RecMod title={window.ACTIVE_MODULE.title[locale]} sub="Camera fundamentals · 6 min" />
              <RecMod title={locale === "de" ? "Eine Rezept-Story in 30 Sekunden" : locale === "id" ? "Cerita resep dalam 30 detik" : "Telling a recipe story in 30 seconds"} sub="Storytelling · 8 modules" />
            </div>
          </div>
        </div>

        <aside className="brief-detail-side">
          <div className="brief-side-card">
            <div className="bsc-payout">
              <span className="eyebrow">{tb.payout.toUpperCase()}</span>
              <div className="bsc-amount">{brief.payout[locale]}</div>
              <div className="subtle display-italic">on approval</div>
            </div>
            <div className="bsc-rows">
              <BriefSideRow label={tb.deadline} value={`${brief.deadline_days} days`} accent={brief.deadline_days <= 7} />
              <BriefSideRow label={tb.duration} value={brief.duration} />
              <BriefSideRow label={tb.submissions} value={brief.submissions} />
              <BriefSideRow label={tb.market} value={brief.market.map(m => window.I18N[m].flag).join(" ")} />
            </div>
            <button className="btn btn-primary btn-block" onClick={() => setSubmitOpen(true)}>
              <Icon name="upload" size={14} /> {tb.apply}
            </button>
            <button className="btn btn-outline btn-block">
              <Icon name="bookmark-plus" size={14} /> Save for later
            </button>
            <div className="bsc-note display-italic">
              Open marketplace · multiple chefs may submit. UFS picks one or more for their channels.
            </div>
          </div>

          <div className="brief-side-card">
            <span className="eyebrow">RECENT SUBMISSIONS</span>
            <div className="recent-subs">
              <RecentSub name="Élise L." pillar={pillar.color} score={4.8} />
              <RecentSub name="Bo P." pillar={pillar.color} score={4.6} />
              <RecentSub name="Lila T." pillar={pillar.color} score={4.4} />
            </div>
          </div>
        </aside>
      </div>

      {submitOpen && <SubmitDialog brief={brief} locale={locale} onClose={() => setSubmitOpen(false)} onSubmitted={() => { setSubmitOpen(false); onSubmit && onSubmit(); }} />}
    </div>
  );
}

function BriefSideRow({ label, value, accent }) {
  return (
    <div className="bsc-row">
      <span className="subtle">{label}</span>
      <span className={"bsc-row-val " + (accent ? "accent" : "")}>{value}</span>
    </div>
  );
}

function RecMod({ title, sub }) {
  return (
    <div className="rec-mod">
      <div className="rec-mod-cover" style={{ background: "linear-gradient(135deg,#ff8a3d,#cc4400)" }}>
        <Icon name="play" size={14} style={{ color: "#fff" }} />
      </div>
      <div>
        <div className="rec-mod-title">{title}</div>
        <div className="subtle">{sub}</div>
      </div>
    </div>
  );
}

function RecentSub({ name, pillar, score }) {
  const initials = name.split(" ").map(n => n[0]).join("");
  return (
    <div className="recent-sub">
      <Avatar name={name} initials={initials} cls="av-sm" />
      <div className="recent-sub-body">
        <div className="recent-sub-name">{name}</div>
        <div className="subtle">★ {score} · approved</div>
      </div>
      <div className="rs-thumb" style={{ background: `linear-gradient(135deg, ${pillar}99, var(--squid-ink))` }} />
    </div>
  );
}

function SubmitDialog({ brief, locale, onClose, onSubmitted }) {
  const [step, setStep] = useStateBr(1);
  const [caption, setCaption] = useStateBr("");
  const [hashtags, setHashtags] = useStateBr("");

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <span className="eyebrow">SUBMIT TO BRIEF</span>
            <h2 style={{ margin: "4px 0 0" }}>{brief.title[locale]}</h2>
          </div>
          <button className="icon-btn ghost" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        <div className="modal-progress">
          {["Upload", "Captions", "Review"].map((label, i) => (
            <div key={i} className={"mp-step " + (step >= i + 1 ? "on" : "")}>
              <div className="mp-num">{step > i + 1 ? <Icon name="check" size={11} /> : i + 1}</div>
              <span>{label}</span>
            </div>
          ))}
        </div>

        <div className="modal-body">
          {step === 1 && (
            <>
              <div className="upload-zone">
                <Icon name="upload" size={28} style={{ color: "var(--smoke)" }} />
                <div className="upload-h">Drop your video, or click to browse</div>
                <div className="subtle">MP4 or MOV · vertical 9:16 · up to 500 MB</div>
                <button className="btn btn-outline" style={{ marginTop: 12 }}>Choose file</button>
              </div>
              <div className="upload-checklist">
                <ChecklistItem on text={`${brief.duration} long`} />
                <ChecklistItem on text="9:16 vertical" />
                <ChecklistItem text={`Captions in ${window.I18N[locale].locale}`} />
                <ChecklistItem text="Product visible in at least one shot" />
              </div>
            </>
          )}
          {step === 2 && (
            <>
              <div className="ob-form">
                <label className="ob-field">
                  <span className="ob-field-label">Caption ({window.I18N[locale].locale})</span>
                  <textarea rows={4} value={caption} onChange={e => setCaption(e.target.value)}
                    placeholder={locale === "de"
                      ? "Zwei Sätze, die das Gericht und deinen Twist beschreiben…"
                      : locale === "id"
                      ? "Dua kalimat yang gambarkan hidangan dan twist-mu…"
                      : "Two sentences that describe the dish and your twist…"} />
                </label>
                <label className="ob-field">
                  <span className="ob-field-label">Hashtags (5 max)</span>
                  <input value={hashtags} onChange={e => setHashtags(e.target.value)} placeholder="#chefverse #knorr #broth …" />
                </label>
                <label className="ob-field">
                  <span className="ob-field-label">Closed captions file</span>
                  <div className="cc-upload">
                    <Icon name="captions" size={14} />
                    <span style={{ flex: 1 }}>captions_{locale}.vtt</span>
                    <button className="btn btn-ghost btn-sm">Replace</button>
                  </div>
                </label>
              </div>
            </>
          )}
          {step === 3 && (
            <div className="review">
              <div className="review-thumb" style={{ background: `linear-gradient(135deg, ${window.PILLARS[brief.pillar].color}, var(--squid-ink))` }}>
                <Icon name="play" size={28} style={{ color: "#fff" }} />
              </div>
              <div className="review-rows">
                <div className="rev-row"><span className="subtle">Brief</span><span>{brief.title[locale]}</span></div>
                <div className="rev-row"><span className="subtle">Market</span><span>{window.I18N[locale].flag} {window.I18N[locale].market}</span></div>
                <div className="rev-row"><span className="subtle">Caption</span><span style={{ maxWidth: 280, textAlign: "right" }}>{caption || "—"}</span></div>
                <div className="rev-row"><span className="subtle">Hashtags</span><span>{hashtags || "—"}</span></div>
                <div className="rev-row"><span className="subtle">CC</span><span>captions_{locale}.vtt</span></div>
                <div className="rev-row"><span className="subtle">Payout on approval</span><span style={{ color: "var(--ufs-orange)", fontWeight: 700 }}>{brief.payout[locale]}</span></div>
              </div>
            </div>
          )}
        </div>

        <div className="modal-foot">
          <button className="btn btn-ghost" disabled={step === 1} onClick={() => setStep(s => s - 1)}>Back</button>
          {step < 3 ? (
            <button className="btn btn-primary" onClick={() => setStep(s => s + 1)}>Continue <Icon name="arrow-right" size={12} /></button>
          ) : (
            <button className="btn btn-primary" onClick={onSubmitted}><Icon name="send" size={12} /> Submit to UFS</button>
          )}
        </div>
      </div>
    </div>
  );
}

function ChecklistItem({ on, text }) {
  return (
    <div className={"checklist " + (on ? "on" : "")}>
      <div className="cl-icon">{on ? <Icon name="check" size={11} /> : <Icon name="circle" size={11} />}</div>
      <span>{text}</span>
    </div>
  );
}

window.Briefs = Briefs;
window.BriefDetail = BriefDetail;