/* ============================================================
   User profile — copacii mei, fotografii, mesaje, date GDPR
   ============================================================ */
function Profile({ go, user }) {
  const [tab, setTab] = useState("trees");
  const trees = DATA.MY_TREES;
  const TABS = [
    ["trees", "Copacii mei", "leaf"],
    ["photos", "Fotografii", "camera"],
    ["messages", "Mesaje", "mail"],
    ["data", "Date & GDPR", "shield"],
  ];
  return (
    <div className="view">
      {/* profile header */}
      <section style={{ background: "linear-gradient(180deg, var(--green-tint), var(--bg))", borderBottom: "1px solid var(--line-soft)" }}>
        <div className="wrap" style={{ padding: "44px 0 0" }}>
          <div className="row gap24 center wrapf">
            <span style={{ width: 78, height: 78, borderRadius: 26, background: "var(--green)", color: "#dfe8cf", display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 30, fontWeight: 700, flex: "none" }}>
              {user ? user.name.split(" ").map(w => w[0]).join("").slice(0, 2) : "AP"}
            </span>
            <div className="col gap4 grow">
              <h1 style={{ fontSize: "clamp(28px,3.6vw,40px)" }}>{user ? user.name : "Ana Popescu"}</h1>
              <span className="muted" style={{ fontSize: 15 }}>{user ? user.email : "ana.p@email.ro"} · tutore din martie 2025</span>
            </div>
            <div className="row gap24 wrapf">
              <Stat num={trees.length} label="copaci" />
              <Stat num={trees.reduce((a, t) => a + t.photos, 0)} label="fotografii" color="var(--clay-deep)" />
              <Stat num="51 kg" label="CO₂ / an" color="var(--clay-deep)" />
            </div>
          </div>
          <div className="row gap4" style={{ marginTop: 28, overflowX: "auto" }}>
            {TABS.map(([k, l, ic]) => (
              <button key={k} className={"ptab" + (tab === k ? " on" : "")} onClick={() => setTab(k)}>
                <Icon name={ic} size={16} /> {l}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 44 }}>
        <div className="wrap">
          {tab === "trees" && <MyTrees go={go} trees={trees} />}
          {tab === "photos" && <MyPhotos trees={trees} />}
          {tab === "messages" && <MyMessages />}
          {tab === "data" && <MyData user={user} />}
        </div>
      </section>
    </div>
  );
}

function MyTrees({ go, trees }) {
  return (
    <div className="col gap24">
      <div className="row between center wrapf" style={{ gap: 12 }}>
        <SectionHead eyebrow="Portofoliul meu verde" title="Copacii pe care i-am adoptat" />
        <button className="btn btn-primary" onClick={() => go("parcels")}><Icon name="plus" size={16} /> Adoptă încă unul</button>
      </div>
      <div className="feat-grid">
        {trees.map(t => (
          <div key={t.id} className="card" style={{ overflow: "hidden", cursor: "pointer" }}
            onClick={() => go("tree", { id: t.id, parcelId: t.parcelId, cellRef: t })}>
            <div className="imgph green" style={{ height: 150, borderRadius: 0, position: "relative" }}>
              foto · {t.name.toLowerCase()}
              <span className={`pill pill-${t.status}`} style={{ position: "absolute", left: 12, top: 12 }}>{HELP.statusLabel(t.status)}</span>
            </div>
            <div className="col gap12" style={{ padding: 20 }}>
              <div className="row between center">
                <h3 style={{ fontSize: 21 }}>{t.name}</h3>
                <span className="badge mono">{t.id}</span>
              </div>
              <span className="muted" style={{ fontSize: 14 }}>{t.species.name} · {t.parcel}</span>
              <p className="muted" style={{ fontSize: 13.5, fontStyle: "italic" }}>„{t.note}”</p>
              <div className="row between center" style={{ marginTop: 4 }}>
                <span className="badge"><Icon name="camera" size={12} /> {t.photos} foto</span>
                <span className="row gap8 center" style={{ fontSize: 13.5, fontWeight: 600, color: "var(--green)" }}>Vezi jurnalul <Icon name="arrowR" size={15} /></span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MyPhotos({ trees }) {
  const photos = [];
  trees.forEach(t => { for (let i = 0; i < t.photos; i++) photos.push({ tree: t.name, idx: i }); });
  return (
    <div className="col gap24">
      <SectionHead eyebrow="Galerie" title="Toate fotografiile copacilor mei" sub="Fiecare imagine e încărcată de echipa de teren la o vizită programată." />
      <div className="photo-grid">
        {photos.map((p, i) => (
          <div key={i} className="imgph green" style={{ aspectRatio: "1", borderRadius: 14, position: "relative" }}>
            foto
            <span className="badge" style={{ position: "absolute", left: 8, bottom: 8, background: "rgba(251,249,243,.9)" }}>{p.tree}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function MyMessages() {
  const msgs = [
    { from: "Echipa de teren · Lunca Argeșului", date: "2025-10-25", text: "Stejărel a trecut cu bine prima toamnă. Am adăugat o fotografie nouă în jurnalul lui. Înălțime ~0,9 m." },
    { from: "Admin · Adopt a Tree!", date: "2025-08-18", text: "Mulțumim pentru sprijin! În perioada secetoasă am udat suplimentar copacii din parcela ta." },
    { from: "Operator teren · Pădurea Copiilor", date: "2025-05-09", text: "Mugur a fost plantat azi împreună cu clasa locală. A fost un eveniment minunat — vezi pozele!" },
  ];
  return (
    <div className="col gap24" style={{ maxWidth: 760 }}>
      <SectionHead eyebrow="Inbox" title="Mesaje de la echipă" />
      <div className="col gap16">
        {msgs.map((m, i) => (
          <div key={i} className="card" style={{ padding: 20 }}>
            <div className="row between center wrapf" style={{ gap: 8, marginBottom: 8 }}>
              <span className="row gap12 center">
                <span style={{ width: 38, height: 38, borderRadius: 12, background: "var(--green-tint)", color: "var(--green)", display: "grid", placeItems: "center", flex: "none" }}><Icon name="leaf" size={18} /></span>
                <span style={{ fontWeight: 700, fontSize: 14.5 }}>{m.from}</span>
              </span>
              <span className="badge"><Icon name="clock" size={12} /> {HELP.fmtDate(m.date)}</span>
            </div>
            <p className="muted" style={{ fontSize: 15, paddingLeft: 50 }}>{m.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function MyData({ user }) {
  return (
    <div className="col gap24" style={{ maxWidth: 760 }}>
      <SectionHead eyebrow="Cont & confidențialitate" title="Datele tale personale" sub="Conform GDPR, ai control complet asupra datelor tale. Le poți exporta sau șterge oricând." />
      <div className="card" style={{ padding: 24 }}>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>Date personale</h3>
        <div className="form-grid">
          <div className="field"><label>Nume</label><input className="input" defaultValue={user ? user.name : "Ana Popescu"} /></div>
          <div className="field"><label>Email</label><input className="input" defaultValue={user ? user.email : "ana.p@email.ro"} /></div>
          <div className="field"><label>Telefon</label><input className="input" defaultValue="0722 123 456" /></div>
          <div className="field"><label>Oraș</label><input className="input" defaultValue="Pitești" /></div>
        </div>
        <button className="btn btn-primary" style={{ marginTop: 16 }}>Salvează modificările</button>
      </div>
      <div className="card" style={{ padding: 24 }}>
        <h3 style={{ fontSize: 18, marginBottom: 6 }}>Preferințe notificări</h3>
        <p className="muted" style={{ fontSize: 14, marginBottom: 16 }}>Alege când vrei să primești emailuri de la noi.</p>
        {[
          ["Fotografii noi cu copacii mei", true],
          ["Mesaje de la echipa de teren", true],
          ["Noutăți și campanii", false],
          ["Raport anual de impact", true],
        ].map(([l, on], i) => (
          <label key={i} className="row between center" style={{ padding: "12px 0", borderBottom: i < 3 ? "1px solid var(--line-soft)" : "none", cursor: "pointer" }}>
            <span style={{ fontSize: 14.5 }}>{l}</span>
            <Toggle on={on} />
          </label>
        ))}
      </div>
      <div className="card" style={{ padding: 24, border: "1px solid var(--clay-soft)", background: "var(--clay-tint)" }}>
        <h3 style={{ fontSize: 18, marginBottom: 6 }}>Drepturile tale GDPR</h3>
        <p className="muted" style={{ fontSize: 14, marginBottom: 16 }}>Exportă o copie a datelor tale sau solicită ștergerea contului.</p>
        <div className="row gap12 wrapf">
          <button className="btn btn-ghost"><Icon name="download" size={16} /> Exportă datele mele</button>
          <button className="btn btn-ghost" style={{ color: "#a3402f", borderColor: "#e3c4be" }}>Șterge contul</button>
        </div>
      </div>
    </div>
  );
}

function Toggle({ on: initial }) {
  const [on, setOn] = useState(initial);
  return (
    <button onClick={() => setOn(!on)} style={{ width: 44, height: 26, borderRadius: 20, border: "none", background: on ? "var(--green)" : "var(--line)", position: "relative", transition: "background .2s", flex: "none" }}>
      <span style={{ position: "absolute", top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: "50%", background: "#fff", transition: "left .2s", boxShadow: "0 1px 3px rgba(0,0,0,.2)" }}></span>
    </button>
  );
}

Object.assign(window, { Profile });