/* ============================================================
   Admin panel — dashboard, parcele, stări celule, upload foto, comenzi
   ============================================================ */
function Admin({ go, parcels, totals, setCellStatus }) {
  const [tab, setTab] = useState("dash");
  const TABS = [
    ["dash", "Dashboard", "chart"],
    ["parcels", "Parcele", "grid"],
    ["editor", "Editor stări", "edit"],
    ["photos", "Upload foto", "camera"],
    ["orders", "Comenzi", "list"],
    ["settings", "Setări", "settings"],
  ];
  return (
    <div className="view admin-shell">
      <aside className="admin-side">
        <div className="brand" style={{ fontSize: 18, padding: "4px 8px 18px" }} onClick={() => go("home")}>
          <Logo size={30} /><span>Admin</span>
        </div>
        <nav className="col gap4">
          {TABS.map(([k, l, ic]) => (
            <button key={k} className={"aside-link" + (tab === k ? " on" : "")} onClick={() => setTab(k)}>
              <Icon name={ic} size={18} /> {l}
            </button>
          ))}
        </nav>
        <div style={{ marginTop: "auto" }}>
          <button className="aside-link" onClick={() => go("home")}><Icon name="logout" size={18} /> Înapoi pe site</button>
        </div>
      </aside>

      <main className="admin-main">
        {tab === "dash" && <AdminDash parcels={parcels} totals={totals} />}
        {tab === "parcels" && <AdminParcels parcels={parcels} />}
        {tab === "editor" && <AdminEditor parcels={parcels} setCellStatus={setCellStatus} />}
        {tab === "photos" && <AdminPhotos parcels={parcels} />}
        {tab === "orders" && <AdminOrders />}
        {tab === "settings" && <AdminSettings />}
      </main>
    </div>
  );
}

function AdminTopbar({ title, sub, action }) {
  return (
    <div className="row between center wrapf" style={{ gap: 14, marginBottom: 28 }}>
      <div className="col gap4">
        <h1 style={{ fontSize: 28 }}>{title}</h1>
        {sub && <span className="muted" style={{ fontSize: 15 }}>{sub}</span>}
      </div>
      {action}
    </div>
  );
}

function AdminDash({ parcels, totals }) {
  const revenue = DATA.ORDERS.filter(o => o.status === "platit").reduce((a, o) => a + o.amount, 0);
  const cards = [
    { n: totals.adopted.toLocaleString("ro-RO"), l: "Copaci adoptați", s: "+128 luna asta", ic: "leaf", c: "var(--green)" },
    { n: revenue.toLocaleString("ro-RO") + " lei", l: "Venituri (confirmate)", s: "din " + DATA.ORDERS.length + " comenzi", ic: "chart", c: "var(--clay-deep)" },
    { n: totals.available.toLocaleString("ro-RO"), l: "Sloturi disponibile", s: "în 3 parcele", ic: "grid", c: "var(--green)" },
    { n: totals.reserved, l: "Rezervări în așteptare", s: "necesită confirmare", ic: "clock", c: "var(--clay-deep)" },
  ];
  return (
    <div className="col gap24">
      <AdminTopbar title="Dashboard" sub="Privire de ansamblu asupra activității ONG-ului" action={<button className="btn btn-ghost btn-sm"><Icon name="download" size={15} /> Export raport</button>} />
      <div className="kpi-grid">
        {cards.map((c, i) => (
          <div key={i} className="card" style={{ padding: 22 }}>
            <div className="row between center" style={{ marginBottom: 16 }}>
              <span style={{ width: 44, height: 44, borderRadius: 13, background: "var(--green-tint)", color: c.c, display: "grid", placeItems: "center" }}><Icon name={c.ic} size={21} /></span>
            </div>
            <div className="stat-num" style={{ fontSize: 34, color: c.c }}>{c.n}</div>
            <div style={{ fontWeight: 600, fontSize: 14.5, marginTop: 4 }}>{c.l}</div>
            <div className="faint" style={{ fontSize: 12.5, marginTop: 2 }}>{c.s}</div>
          </div>
        ))}
      </div>

      <div className="admin-2col">
        <div className="card" style={{ padding: 24 }}>
          <h3 style={{ fontSize: 18, marginBottom: 18 }}>Adopții pe parcelă</h3>
          <div className="col gap16">
            {parcels.map(p => {
              const pct = Math.round((p.adopted / p.total) * 100);
              return (
                <div key={p.id} className="col gap8">
                  <div className="row between" style={{ fontSize: 14, gap: 12, whiteSpace: "nowrap" }}>
                    <span style={{ fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</span>
                    <span className="muted" style={{ flex: "none" }}>{p.adopted}/{p.total} · {pct}%</span>
                  </div>
                  <div style={{ height: 10, background: "var(--surface-2)", borderRadius: 10, overflow: "hidden" }}>
                    <div style={{ width: pct + "%", height: "100%", background: "var(--green)", borderRadius: 10 }}></div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card" style={{ padding: 24 }}>
          <h3 style={{ fontSize: 18, marginBottom: 18 }}>Activitate recentă</h3>
          <div className="col gap14">
            {[
              ["heart", "Comandă nouă ADT-2041 · 2 copaci", "acum 2 ore"],
              ["camera", "12 fotografii încărcate · Lunca Argeșului", "acum 5 ore"],
              ["mail", "Transfer confirmat · ADT-2038", "ieri"],
              ["grid", "Parcelă nouă creată · Pădurea Copiilor", "acum 3 zile"],
            ].map(([ic, t, time], i) => (
              <div key={i} className="row gap12 center">
                <span style={{ width: 36, height: 36, borderRadius: 10, background: "var(--surface-2)", color: "var(--ink-soft)", display: "grid", placeItems: "center", flex: "none" }}><Icon name={ic} size={16} /></span>
                <span className="grow" style={{ fontSize: 14 }}>{t}</span>
                <span className="faint" style={{ fontSize: 12.5, whiteSpace: "nowrap" }}>{time}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function AdminParcels({ parcels }) {
  const [creating, setCreating] = useState(false);
  return (
    <div className="col gap24">
      <AdminTopbar title="Parcele" sub="Creează și administrează parcelele de teren"
        action={<button className="btn btn-primary" onClick={() => setCreating(!creating)}><Icon name="plus" size={16} /> Parcelă nouă</button>} />
      {creating && (
        <div className="card" style={{ padding: 24, border: "1.5px solid var(--green-mid)" }}>
          <h3 style={{ fontSize: 18, marginBottom: 16 }}>Creează parcelă</h3>
          <div className="form-grid">
            <div className="field"><label>Denumire</label><input className="input" placeholder="Ex: Valea Mureșului" /></div>
            <div className="field"><label>Județ / localitate</label><input className="input" placeholder="Ex: Mureș, Târgu Mureș" /></div>
            <div className="field"><label>Rânduri</label><input className="input" type="number" defaultValue="10" /></div>
            <div className="field"><label>Coloane</label><input className="input" type="number" defaultValue="14" /></div>
            <div className="field" style={{ gridColumn: "1 / -1" }}><label>Descriere</label><textarea className="input" rows="2" placeholder="Despre parcelă..."></textarea></div>
            <div className="field" style={{ gridColumn: "1 / -1" }}><label>Imagine satelit / plan</label>
              <div className="imgph" style={{ height: 90, borderStyle: "dashed", border: "1.5px dashed var(--line)" }}><Icon name="upload" size={18} /> trage o imagine sau apasă pentru upload</div>
            </div>
          </div>
          <div className="row gap12" style={{ marginTop: 16 }}>
            <button className="btn btn-primary" onClick={() => setCreating(false)}>Creează parcela</button>
            <button className="btn btn-ghost" onClick={() => setCreating(false)}>Anulează</button>
          </div>
        </div>
      )}
      <div className="card" style={{ overflow: "hidden" }}>
        <table className="tbl">
          <thead><tr><th>Parcelă</th><th>Locație</th><th>Grilă</th><th>Adoptați</th><th>Disponibili</th><th>Stare</th><th></th></tr></thead>
          <tbody>
            {parcels.map(p => (
              <tr key={p.id}>
                <td style={{ fontWeight: 700 }}>{p.name}</td>
                <td className="muted">{p.county}</td>
                <td className="mono">{p.rows}×{p.cols}</td>
                <td>{p.adopted}</td>
                <td>{p.available}</td>
                <td><span className="pill pill-adopted">activă</span></td>
                <td><button className="btn btn-ghost btn-sm"><Icon name="edit" size={14} /> Editează</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AdminEditor({ parcels, setCellStatus }) {
  const [pid, setPid] = useState(parcels[0].id);
  const [brush, setBrush] = useState("adopted");
  const parcel = parcels.find(p => p.id === pid);
  const BRUSHES = [["available", "Disponibil"], ["reserved", "Rezervat"], ["adopted", "Plantat"], ["review", "În verificare"]];
  return (
    <div className="col gap24">
      <AdminTopbar title="Editor stări celule" sub="Selectează o stare și apasă pe celule ca să le marchezi (plantat / în curs / erori)" />
      <div className="row gap16 wrapf between center">
        <div className="field" style={{ maxWidth: 280 }}>
          <select className="select" value={pid} onChange={e => setPid(e.target.value)}>
            {parcels.map(p => <option key={p.id} value={p.id}>{p.name} ({p.rows}×{p.cols})</option>)}
          </select>
        </div>
        <div className="row gap8 wrapf">
          <span className="muted" style={{ fontSize: 13, alignSelf: "center", fontWeight: 600 }}>Pensulă:</span>
          {BRUSHES.map(([k, l]) => (
            <button key={k} className="chip" style={chipStyle(brush === k)} onClick={() => setBrush(k)}>
              <span className="dot" style={{ background: stColor(k) }}></span>{l}
            </button>
          ))}
        </div>
      </div>
      <div className="card" style={{ padding: 22, overflow: "auto" }}>
        <div className="parcel-grid" style={{ gridTemplateColumns: `repeat(${parcel.cols}, 30px)`, gap: 5, width: "max-content", margin: "0 auto" }}>
          {parcel.cells.map(c => (
            <button key={c.id} className={`cell is-${c.status}`} style={{ width: 30, height: 30 }}
              title={`R${c.row + 1}·C${c.col + 1}`}
              onClick={() => setCellStatus(pid, c.id, brush)}>
              <span className="canopy"></span>
            </button>
          ))}
        </div>
        <div className="row between center wrapf" style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--line-soft)", gap: 12 }}>
          <Legend compact />
          <span className="faint" style={{ fontSize: 12.5 }}>Modificările se salvează automat</span>
        </div>
      </div>
    </div>
  );
}

function AdminPhotos({ parcels }) {
  const [pid, setPid] = useState(parcels[0].id);
  const parcel = parcels.find(p => p.id === pid);
  const adopted = parcel.cells.filter(c => c.status === "adopted" || c.status === "review").slice(0, 9);
  return (
    <div className="col gap24">
      <AdminTopbar title="Upload fotografii" sub="Încarcă fotografii periodice per copac sau per parcelă, cu dată și comentariu" />
      <div className="admin-2col" style={{ gridTemplateColumns: "1fr 360px" }}>
        <div className="col gap16">
          <div className="field" style={{ maxWidth: 300 }}>
            <label>Parcelă</label>
            <select className="select" value={pid} onChange={e => setPid(e.target.value)}>
              {parcels.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>
          <div className="card" style={{ padding: 24 }}>
            <h3 style={{ fontSize: 17, marginBottom: 14 }}>Copaci din {parcel.name}</h3>
            <div className="photo-grid">
              {adopted.map(c => (
                <div key={c.id} className="col gap8">
                  <div className="imgph green" style={{ aspectRatio: "1", borderRadius: 12, position: "relative", cursor: "pointer", fontSize: 10 }}>
                    foto
                    <span className="up-badge"><Icon name="upload" size={13} /></span>
                  </div>
                  <span className="faint mono" style={{ fontSize: 10.5, textAlign: "center" }}>{c.treeName}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
        <aside className="card" style={{ padding: 24, alignSelf: "start" }}>
          <h3 style={{ fontSize: 18, marginBottom: 16 }}>Încărcare nouă</h3>
          <div className="imgph" style={{ height: 150, borderStyle: "dashed", border: "1.5px dashed var(--line)", marginBottom: 16, flexDirection: "column", gap: 8 }}>
            <Icon name="upload" size={26} />
            <span>trage fotografii aici</span>
          </div>
          <div className="col gap14">
            <div className="field"><label>Aplică la</label>
              <select className="select"><option>Întreaga parcelă</option><option>Un singur copac</option></select></div>
            <div className="field"><label>Data fotografiei</label><input className="input" type="date" defaultValue="2026-06-10" /></div>
            <div className="field"><label>Comentariu</label><textarea className="input" rows="3" placeholder="Ex: prima înfrunzire, creștere ~12 cm..."></textarea></div>
            <label className="row gap8 center" style={{ fontSize: 13.5, cursor: "pointer" }}>
              <input type="checkbox" defaultChecked style={{ accentColor: "var(--green)", width: 17, height: 17 }} />
              Trimite notificare pe email tutorilor
            </label>
            <button className="btn btn-primary btn-block"><Icon name="check" size={16} /> Publică fotografiile</button>
          </div>
        </aside>
      </div>
    </div>
  );
}

function AdminOrders() {
  const statusPill = { platit: ["pill-adopted", "Plătit"], in_asteptare: ["pill-reserved", "În așteptare"], rambursat: ["pill-review", "Rambursat"] };
  return (
    <div className="col gap24">
      <AdminTopbar title="Comenzi & plăți" sub="Gestionează comenzile și confirmă transferurile bancare"
        action={<div className="row gap8 wrapf"><button className="btn btn-ghost btn-sm"><Icon name="search" size={15} /> Caută</button><button className="btn btn-ghost btn-sm"><Icon name="download" size={15} /> Export CSV</button></div>} />
      <div className="card" style={{ overflow: "auto" }}>
        <table className="tbl">
          <thead><tr><th>Comandă</th><th>Donor</th><th>Email</th><th>Copaci</th><th>Sumă</th><th>Metodă</th><th>Stare</th><th></th></tr></thead>
          <tbody>
            {DATA.ORDERS.map(o => {
              const [cls, lbl] = statusPill[o.status];
              return (
                <tr key={o.id}>
                  <td className="mono" style={{ fontWeight: 700 }}>{o.id}</td>
                  <td style={{ fontWeight: 600 }}>{o.donor}</td>
                  <td className="muted">{o.email}</td>
                  <td>{o.trees}</td>
                  <td style={{ fontWeight: 600 }}>{o.amount} lei</td>
                  <td><span className="badge">{o.method === "card" ? "card" : "transfer"}</span></td>
                  <td><span className={"pill " + cls}>{lbl}</span></td>
                  <td>{o.status === "in_asteptare"
                    ? <button className="btn btn-soft btn-sm"><Icon name="check" size={14} /> Confirmă</button>
                    : <button className="btn btn-ghost btn-sm">Detalii</button>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AdminSettings() {
  return (
    <div className="col gap24" style={{ maxWidth: 720 }}>
      <AdminTopbar title="Setări site" sub="Preț adopție, texte și șabloane de email" />
      <div className="card" style={{ padding: 24 }}>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>General</h3>
        <div className="form-grid">
          <div className="field"><label>Preț adopție (lei)</label><input className="input" defaultValue="120" /></div>
          <div className="field"><label>Monedă</label><select className="select"><option>RON (lei)</option><option>EUR</option></select></div>
          <div className="field" style={{ gridColumn: "1 / -1" }}><label>Titlu pagina principală</label><input className="input" defaultValue="Adoptă un copac. Crește o pădure." /></div>
        </div>
      </div>
      <div className="card" style={{ padding: 24 }}>
        <h3 style={{ fontSize: 18, marginBottom: 16 }}>Șabloane email</h3>
        <div className="col gap12">
          {["Confirmare adopție + certificat", "Notificare fotografie nouă", "Confirmare transfer bancar", "Raport anual de impact"].map((t, i) => (
            <div key={i} className="row between center" style={{ padding: "12px 14px", background: "var(--surface-2)", borderRadius: 12 }}>
              <span className="row gap12 center"><Icon name="mail" size={16} style={{ color: "var(--ink-soft)" }} /> <span style={{ fontWeight: 600, fontSize: 14.5 }}>{t}</span></span>
              <button className="btn btn-ghost btn-sm"><Icon name="edit" size={14} /> Editează</button>
            </div>
          ))}
        </div>
      </div>
      <div className="row gap12"><button className="btn btn-primary">Salvează setările</button></div>
    </div>
  );
}

Object.assign(window, { Admin });