const STAGE_PILL = {
  "Wishlist":     "pill-draft",
  "Reached Out":  "pill-ready",
  "In Talks":     "pill-ready",
  "Active":       "pill-approved",
  "Past":         "pill-draft",
};

const Brands = ({ brands, setBrands, mediaKitUrl, setMediaKitUrl }) => {
  const [editId, setEditId] = useState(null);
  const [addingNew, setAddingNew] = useState(false);
  const [showMkModal, setShowMkModal] = useState(false);

  const add = (b) => { setBrands(bs => [...bs, { id: "b-" + Date.now(), ...b }]); setAddingNew(false); };
  const update = (id, patch) => setBrands(bs => bs.map(b => b.id === id ? { ...b, ...patch } : b));
  const remove = (id) => { setBrands(bs => bs.filter(b => b.id !== id)); setEditId(null); };

  return (
    <div>
      <div className="pagehead">
        <div>
          <div className="eyebrow">Brand Partnerships</div>
          <h1>Brands</h1>
          <p className="sub">Track outreach and manage your brand relationships.</p>
        </div>
        <div className="pagehead-actions">
          {mediaKitUrl
            ? <a href={mediaKitUrl} target="_blank" rel="noreferrer" className="btn btn-ghost">Media Kit ↗</a>
            : <button className="btn btn-ghost" onClick={() => setShowMkModal(true)}>+ Add media kit link</button>
          }
          {mediaKitUrl && (
            <button className="btn btn-ghost btn-sm" onClick={() => setShowMkModal(true)} style={{ fontSize: 11 }}>Edit link</button>
          )}
          <button className="btn btn-primary" onClick={() => { setAddingNew(true); setEditId(null); }}>
            <Icon name="plus" size={14} /> Add brand
          </button>
        </div>
      </div>

      {brands.length === 0 && !addingNew && (
        <div className="dash-empty" style={{ textAlign: "center", padding: "60px 0" }}>
          <div style={{ fontSize: "2rem", marginBottom: 12 }}>✦</div>
          <p>No brands yet — add brands you want to work with.</p>
          <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => setAddingNew(true)}>
            <Icon name="plus" size={14} /> Add brand
          </button>
        </div>
      )}

      <div className="brand-grid">
        {addingNew && (
          <BrandForm
            brand={{ name: "", stage: "Wishlist", niche: "", notes: "" }}
            onSave={add}
            onCancel={() => setAddingNew(false)}
            isNew
          />
        )}
        {brands.map(b => (
          editId === b.id ? (
            <BrandForm key={b.id} brand={b}
              onSave={patch => { update(b.id, patch); setEditId(null); }}
              onDelete={() => remove(b.id)}
              onCancel={() => setEditId(null)}
            />
          ) : (
            <div key={b.id} className="brand-card card card-pad" onClick={() => { setEditId(b.id); setAddingNew(false); }}>
              <div className="row-sb" style={{ marginBottom: 8 }}>
                <div className="brand-card-name serif">{b.name}</div>
                <span className={`pill ${STAGE_PILL[b.stage] || "pill-draft"}`}>{b.stage}</span>
              </div>
              {b.niche && <div style={{ marginBottom: 8 }}><NicheTag niche={b.niche} /></div>}
              {b.notes && <p style={{ fontSize: 12.5, color: "var(--muted)", lineHeight: 1.5 }}>{b.notes}</p>}
            </div>
          )
        ))}
      </div>

      {showMkModal && (
        <MediaKitModal url={mediaKitUrl} onSave={url => { setMediaKitUrl(url); setShowMkModal(false); }} onClose={() => setShowMkModal(false)} />
      )}
    </div>
  );
};

const BrandForm = ({ brand, onSave, onDelete, onCancel, isNew }) => {
  const [form, setForm] = useState(brand);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  return (
    <div className="brand-card card card-pad" style={{ border: "1.5px solid var(--accent)" }}>
      <div className="field" style={{ marginBottom: 10 }}>
        <input className="input" autoFocus placeholder="Brand name" value={form.name}
          onChange={e => set("name", e.target.value)} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 10 }}>
        <select className="input" value={form.stage} onChange={e => set("stage", e.target.value)}>
          {BRAND_STAGES.map(s => <option key={s}>{s}</option>)}
        </select>
        <NicheSelect value={form.niche} onChange={v => set("niche", v)} />
      </div>
      <textarea className="textarea" placeholder="Notes…" value={form.notes}
        onChange={e => set("notes", e.target.value)}
        style={{ marginBottom: 12, minHeight: 60 }} />
      <div style={{ display: "flex", gap: 8 }}>
        <button className="btn btn-primary btn-sm" style={{ flex: 1 }}
          disabled={!form.name.trim()} onClick={() => onSave(form)}>Save</button>
        {!isNew && <button className="btn btn-ghost btn-sm" style={{ color: "var(--accent)" }} onClick={onDelete}>Delete</button>}
        <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
      </div>
    </div>
  );
};

const MediaKitModal = ({ url, onSave, onClose }) => {
  const [draft, setDraft] = useState(url || "");
  return (
    <>
      <div className="drawer-veil" onClick={onClose} />
      <div className="quick-add-modal">
        <div className="row-sb" style={{ marginBottom: 16 }}>
          <div className="eyebrow">Media Kit Link</div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <input className="input" autoFocus placeholder="https://www.dropbox.com/…"
          value={draft} onChange={e => setDraft(e.target.value)}
          style={{ marginBottom: 12 }} />
        <button className="btn btn-primary" style={{ width: "100%" }} onClick={() => onSave(draft)}>Save</button>
      </div>
    </>
  );
};

window.Brands = Brands;