/* =========================================================================
   Çevik Yaşam — PORTFÖY (multiligo.com · 23 platform · 9 sektör · 5 pazar)
   Platformları çevik yaşam mantığına bağla: odak / izle / park / bekliyor
   ========================================================================= */

const FOCUS_ORDER = ["Aktif odak", "İzlemede", "Park", "Bekliyor"];
const FOCUS_TONE = { "Aktif odak": "green", "İzlemede": "info", "Park": "warn", "Bekliyor": "" };
const MKT_LABEL = { TR: "TR", UK: "UK", DE: "DE", PL: "PL", Global: "Global" };

function FocusSetter({ value, onSet }) {
  return (
    <div className="cy-focus-set">
      {FOCUS_ORDER.map((f) => (
        <button key={f} className={"cy-focus-opt" + (value === f ? " on " + (FOCUS_TONE[f] || "") : "")}
          onClick={() => onSet(f)} title={f}>
          {f === "Aktif odak" ? "Odak" : f === "İzlemede" ? "İzle" : f}
        </button>
      ))}
    </div>
  );
}

function PlatformCard({ p, focus, onSet, onEdit, onArchive, onRestore, onDelete }) {
  const s = CY.sector(p.sec);
  return (
    <div className="cy-plat">
      <div className="cy-between" style={{ alignItems: "flex-start", gap: 10 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <i className="cy-proj-dot" style={{ background: s.color, width: 9, height: 9 }} />
            <a className="cy-plat-name" href={"https://" + p.name} target="_blank" rel="noreferrer">{p.name}</a>
          </div>
          <div className="cy-muted" style={{ fontSize: 12.5, marginTop: 6, lineHeight: 1.4 }}>{p.desc}</div>
        </div>
        <div style={{ display: "flex", gap: 4, alignItems: "center", flex: "none" }}>
          <span className="cy-tag-mini" style={{ fontSize: 10.5 }}>{MKT_LABEL[p.mkt] || p.mkt}</span>
          <RowMenu onEdit={onEdit} onArchive={onArchive} onRestore={onRestore} onDelete={onDelete} archived={p.archived} />
        </div>
      </div>
      <div className="cy-divider" style={{ margin: "14px 0 11px" }} />
      {!p.archived ? <FocusSetter value={focus} onSet={(f) => onSet(p.id, f)} /> : <Pill dot>Arşivde</Pill>}
    </div>
  );
}

const PLATFORM_FIELDS = [
  { name: "name", label: "Alan adı", type: "text", placeholder: "örn. yenisite.com" },
  { name: "sec", label: "Sektör", type: "dropdown", options: CY.sectors.map((s) => ({ value: s.key, label: s.label })), default: "tech" },
  { name: "mkt", label: "Pazar", type: "select", options: ["TR", "UK", "DE", "PL", "Global"], default: "TR" },
  { name: "desc", label: "Açıklama", type: "textarea", placeholder: "Platform ne yapıyor?" },
  { name: "focus", label: "Odak durumu", type: "select", options: FOCUS_ORDER, default: "Bekliyor" },
];

function Portfoy() {
  const P = useCollection("platforms", CY.platforms);
  const [secF, setSecF] = useState("all");
  const [mktF, setMktF] = useState("all");
  const [focF, setFocF] = useState("all");
  const [edit, setEdit] = useState(null);
  const [del, setDel] = useState(null);
  const [showArc, setShowArc] = useState(false);

  const focusOf = (p) => p.focus;
  const setFocus = (id, f) => P.update(id, { focus: f });

  const list = P.active.filter((p) =>
    (secF === "all" || p.sec === secF) &&
    (mktF === "all" || p.mkt === mktF) &&
    (focF === "all" || focusOf(p) === focF)
  );

  const counts = useMemo(() => {
    const c = { "Aktif odak": 0, "İzlemede": 0, "Park": 0, "Bekliyor": 0 };
    P.active.forEach((p) => { if (c[focusOf(p)] != null) c[focusOf(p)]++; });
    return c;
  }, [P.items]);

  const markets = ["TR", "UK", "DE", "PL", "Global"];
  const grouped = secF === "all" && mktF === "all" && focF === "all";

  const Chip = ({ active, onClick, color, children }) => (
    <button className={"cy-fchip" + (active ? " on" : "")} onClick={onClick}>
      {color && <i className="cy-proj-dot" style={{ background: color, width: 8, height: 8 }} />}{children}
    </button>
  );
  const cardProps = (p) => ({ p, focus: focusOf(p), onSet: setFocus, onEdit: () => setEdit(p), onArchive: () => P.archive(p.id), onRestore: () => P.restore(p.id), onDelete: () => setDel(p) });

  return (
    <div className="cy-canvas cy-fade-in">
      <SectionHead eyebrow="multiligo.com · canlı portföy"
        title="Platform portföyü"
        sub="23 aktif platform · 9 sektör · 5 ülke pazarı. Hepsini aynı anda taşıyamazsın — her birine bir çalışma mesafesi ver: odak, izle, park ya da bekliyor."
        right={<div style={{ display: "flex", gap: 8 }}><Btn variant="ghost" size="sm" icon="repeat" onClick={() => P.setItems(CY.platforms)}>Sıfırla</Btn><Btn variant="primary" size="sm" icon="plus" onClick={() => setEdit({})}>Platform ekle</Btn></div>} />

      {/* özet sayaçlar + 2 platform kuralı */}
      <div className="cy-grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 14 }}>
        {FOCUS_ORDER.map((f) => (
          <Card key={f} className="flat" style={{ padding: "16px 18px", cursor: "pointer", borderColor: focF === f ? "var(--ml-ink)" : "var(--ml-line)" }} onClick={() => setFocF(focF === f ? "all" : f)}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}><i className="cy-proj-dot" style={{ width: 9, height: 9, background: f === "Aktif odak" ? "var(--ml-success)" : f === "İzlemede" ? "var(--ml-info)" : f === "Park" ? "var(--ml-warn)" : "var(--ml-ink-4)" }} /><span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--ml-ink-2)" }}>{f}</span></div>
            <div style={{ fontSize: 30, fontWeight: 700, letterSpacing: "-0.02em", marginTop: 8 }}>{counts[f]}</div>
          </Card>
        ))}
      </div>

      {counts["Aktif odak"] > 2 && (
        <Card className="tint" style={{ padding: "12px 16px", marginBottom: 18, display: "flex", gap: 10, alignItems: "center", borderLeft: "3px solid var(--ml-red)" }}>
          <Icon name="alert" style={{ width: 18, color: "var(--ml-red)", flex: "none" }} />
          <div style={{ fontSize: 13.5, color: "var(--ml-ink-2)" }}><strong>2 platform kuralı:</strong> {counts["Aktif odak"]} platform aktif odakta. Geçiş maliyetini düşürmek için 2'ye indir; gerisini izle/park.</div>
        </Card>
      )}

      {/* filtreler */}
      <div className="cy-filterbar">
        <div className="cy-fgroup">
          <span className="cy-fglabel">Sektör</span>
          <Chip active={secF === "all"} onClick={() => setSecF("all")}>Tümü</Chip>
          {CY.sectors.map((s) => <Chip key={s.key} active={secF === s.key} onClick={() => setSecF(secF === s.key ? "all" : s.key)} color={s.color}>{s.label}</Chip>)}
        </div>
        <div className="cy-fgroup">
          <span className="cy-fglabel">Pazar</span>
          <Chip active={mktF === "all"} onClick={() => setMktF("all")}>Tümü</Chip>
          {markets.map((m) => <Chip key={m} active={mktF === m} onClick={() => setMktF(mktF === m ? "all" : m)}>{MKT_LABEL[m]}</Chip>)}
        </div>
      </div>

      {/* liste */}
      {grouped ? (
        CY.sectors.map((s) => {
          const items = list.filter((p) => p.sec === s.key);
          if (!items.length) return null;
          return (
            <div key={s.key} style={{ marginTop: 26 }}>
              <div className="cy-sec-head">
                <i style={{ width: 11, height: 11, borderRadius: 3, background: s.color }} />
                <h3 className="cy-h4" style={{ fontSize: 15 }}>{s.label}</h3>
                <span className="cy-mono cy-muted" style={{ fontSize: 12 }}>{items.length}</span>
                <span className="cy-muted" style={{ fontSize: 12.5, marginLeft: 6 }}>{s.blurb}</span>
              </div>
              <div className="cy-plat-grid">
                {items.map((p) => <PlatformCard key={p.id} {...cardProps(p)} />)}
              </div>
            </div>
          );
        })
      ) : (
        <div className="cy-plat-grid" style={{ marginTop: 22 }}>
          {list.map((p) => <PlatformCard key={p.id} {...cardProps(p)} />)}
          {!list.length && <div className="cy-empty" style={{ gridColumn: "1/-1" }}>Bu filtreye uyan platform yok.</div>}
        </div>
      )}

      <ArchiveToggle count={P.archived.length} show={showArc} onToggle={() => setShowArc((s) => !s)} />
      {showArc && (
        <div className="cy-plat-grid" style={{ marginTop: 14 }}>
          {P.archived.map((p) => <PlatformCard key={p.id} {...cardProps(p)} />)}
          {!P.archived.length && <div className="cy-empty" style={{ gridColumn: "1/-1" }}>Arşiv boş.</div>}
        </div>
      )}

      {edit && <EditSheet eyebrow={edit.id ? "Platformu düzenle" : "Yeni platform"} title={edit.id ? "Platformu düzenle" : "Portföye platform ekle"}
        fields={PLATFORM_FIELDS} initial={edit.id ? edit : null}
        onClose={() => setEdit(null)}
        onSave={(v) => { edit.id ? P.update(edit.id, v) : P.add({ ...v, traffic: v.traffic || "0", trend: 0, leads: 0 }); setEdit(null); }} />}
      {del && <ConfirmSheet body={`"${del.name}" portföyden silinecek.`} onClose={() => setDel(null)} onConfirm={() => { P.remove(del.id); setDel(null); }} />}
    </div>
  );
}

Object.assign(window, { Portfoy });