/* KitRate — kit content editor (bio, pillars, testimonials, case study)
   These fields live outside the Build wizard — edited from the kit editor,
   saving instantly so the document preview updates behind the modal. */

const EMPTY_CASE_STUDY = {
  title: "", context: "", deliverables: "",
  results: [{ metric: "", label: "" }, { metric: "", label: "" }, { metric: "", label: "" }]
};

function ContentGroup({ title, hint, action, children }) {
  return (
    <div style={{ marginBottom: 26 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 4 }}>
        <div className="kr-eyebrow">{title}</div>
        <div style={{ flex: 1 }}></div>
        {action}
      </div>
      {hint && <p style={{ fontSize: 12, color: "var(--muted)", marginBottom: 10 }}>{hint}</p>}
      {children}
    </div>
  );
}

function ContentModal({ onClose, profile, setProfile }) {
  const set = (patch) => setProfile({ ...profile, ...patch });

  const setPillar = (i, patch) => {
    const arr = [...(profile.pillars || [])]; arr[i] = { ...arr[i], ...patch };
    set({ pillars: arr });
  };
  const setTm = (i, patch) => {
    const arr = [...(profile.testimonials || [])]; arr[i] = { ...arr[i], ...patch };
    set({ testimonials: arr });
  };
  const cs = profile.caseStudy;
  const setCs = (patch) => set({ caseStudy: { ...cs, ...patch } });
  const setCsResult = (i, patch) => {
    const results = [...cs.results]; results[i] = { ...results[i], ...patch };
    setCs({ results });
  };

  return (
    <Modal title="Edit kit content" onClose={onClose} width={660}>
      <p style={{ fontSize: 13, color: "var(--muted)", marginBottom: 22 }}>
        Changes save instantly — the document updates behind this window. Name, metrics and audience live in the <strong>Build</strong> flow.
      </p>

      <ContentGroup title="About">
        <Field label="Tagline" hint="One line under your name on the cover.">
          <input className="kr-input" value={profile.tagline} onChange={(e) => set({ tagline: e.target.value })} />
        </Field>
        <Field label="Bio">
          <textarea className="kr-textarea" rows={4} value={profile.bio} onChange={(e) => set({ bio: e.target.value })}></textarea>
        </Field>
      </ContentGroup>

      <ContentGroup title="Content pillars" hint="Three is the sweet spot — what a brand can expect their placement to live inside."
        action={<button className="kr-btn kr-btn-secondary kr-btn-sm" onClick={() => set({ pillars: [...(profile.pillars || []), { title: "", desc: "" }] })}><KrIcon d={ICONS.plus} size={12} /> Add</button>}>
        {(profile.pillars || []).map((pl, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr auto", gap: 10, marginBottom: 10, alignItems: "start" }}>
            <input className="kr-input" value={pl.title} placeholder="Pillar title" onChange={(e) => setPillar(i, { title: e.target.value })} />
            <textarea className="kr-textarea" rows={2} style={{ minHeight: 0 }} value={pl.desc} placeholder="One sentence on what this covers." onChange={(e) => setPillar(i, { desc: e.target.value })}></textarea>
            <button className="kr-btn kr-btn-ghost kr-btn-sm" style={{ marginTop: 4 }} onClick={() => set({ pillars: profile.pillars.filter((_, j) => j !== i) })} aria-label="Remove pillar"><KrIcon d={ICONS.x} size={13} /></button>
          </div>
        ))}
        <Field label="Content formats" hint="Comma-separated — shown as chips under the pillars." style={{ marginTop: 14, marginBottom: 0 }}>
          <input className="kr-input" value={(profile.contentFormats || []).join(", ")} placeholder="Reels, Stories, UGC…"
            onChange={(e) => set({ contentFormats: e.target.value.split(",").map(s => s.trim()).filter(Boolean) })} />
        </Field>
      </ContentGroup>

      <ContentGroup title="Testimonials" hint="Short and attributed beats long and anonymous."
        action={<button className="kr-btn kr-btn-secondary kr-btn-sm" onClick={() => set({ testimonials: [...(profile.testimonials || []), { quote: "", author: "" }] })}><KrIcon d={ICONS.plus} size={12} /> Add</button>}>
        {(profile.testimonials || []).map((tm, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.8fr 1fr auto", gap: 10, marginBottom: 10, alignItems: "start" }}>
            <textarea className="kr-textarea" rows={2} style={{ minHeight: 0 }} value={tm.quote} placeholder="What they said…" onChange={(e) => setTm(i, { quote: e.target.value })}></textarea>
            <input className="kr-input" value={tm.author} placeholder="Role, Brand" onChange={(e) => setTm(i, { author: e.target.value })} />
            <button className="kr-btn kr-btn-ghost kr-btn-sm" style={{ marginTop: 4 }} onClick={() => set({ testimonials: profile.testimonials.filter((_, j) => j !== i) })} aria-label="Remove testimonial"><KrIcon d={ICONS.x} size={13} /></button>
          </div>
        ))}
        {(profile.testimonials || []).length === 0 && <p style={{ fontSize: 12.5, color: "var(--muted)" }}>No testimonials yet — the section hides itself until you add one.</p>}
      </ContentGroup>

      <ContentGroup title="Case study" hint="Your single best partnership, told in numbers."
        action={cs
          ? <button className="kr-btn kr-btn-ghost kr-btn-sm" onClick={() => set({ caseStudy: null })}><KrIcon d={ICONS.x} size={12} /> Remove</button>
          : <button className="kr-btn kr-btn-secondary kr-btn-sm" onClick={() => set({ caseStudy: JSON.parse(JSON.stringify(EMPTY_CASE_STUDY)) })}><KrIcon d={ICONS.plus} size={12} /> Add case study</button>}>
        {cs && (
          <div>
            <Field label="Title">
              <input className="kr-input" value={cs.title} placeholder="e.g. Fight-camp launch series — Brand" onChange={(e) => setCs({ title: e.target.value })} />
            </Field>
            <Field label="Context">
              <textarea className="kr-textarea" rows={2} style={{ minHeight: 0 }} value={cs.context} placeholder="What the campaign was, where it ran, for how long." onChange={(e) => setCs({ context: e.target.value })}></textarea>
            </Field>
            <Field label="Deliverables" hint="Shown as a single line, e.g. “4 Reels · 2 story sets · paid usage”.">
              <input className="kr-input" value={cs.deliverables} onChange={(e) => setCs({ deliverables: e.target.value })} />
            </Field>
            <label className="kr-label">Results (up to 3)</label>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
              {cs.results.map((r, i) => (
                <div key={i}>
                  <input className="kr-input" value={r.metric} placeholder="1.2M" style={{ marginBottom: 6 }} onChange={(e) => setCsResult(i, { metric: e.target.value })} />
                  <input className="kr-input" value={r.label} placeholder="combined views" style={{ fontSize: 12.5 }} onChange={(e) => setCsResult(i, { label: e.target.value })} />
                </div>
              ))}
            </div>
          </div>
        )}
      </ContentGroup>
    </Modal>
  );
}

window.ContentModal = ContentModal;