// Veri ve hesap silme sayfaları.
//
// Play Console iki ayrı bağlantı istiyor — "verilerin silinmesini talep et"
// ve "hesabın ve ilişkili verilerin silinmesini talep et" — ve ikisini de
// UYGULAMA BAŞINA soruyor. Bu yüzden her uygulamanın kendi adresi var
// (/veri-silme/<slug>); mağaza formuna hub değil, o adres girilir. Hub
// (/veri-silme) yalnızca insanlar için yol gösterici.
//
// Sayfadaki adımlar uygulamalardaki GERÇEK menü etiketleridir; etiket
// değişirse burası da değişmeli, yoksa inceleyici olmayan bir düğmeyi arar.

const DELETION_EMAIL = 'info@kolabs.tr';

// Dile bağlı olmayan kimlik: slug, paket adı, logo, vurgu rengi.
// Görünen ad `t.appsMeta[key].name`den geliyor (TR "Kelime Bul" / EN "Word Find").
const DELETION_APPS = [
  { key: 'zikirmatik', slug: 'zikirmatik', enSlug: 'zikirmatik',  pkg: 'com.kolabs.zikirmatik', logo: 'assets/zikirmatik-logo.png', accent: '#2E9E4A' },
  { key: 'noctavia',   slug: 'noctavia',   enSlug: 'noctavia',    pkg: 'com.kolabs.noctavia',   logo: 'assets/noctavia-logo.png',   accent: '#b69bff' },
  { key: 'kelimebul',  slug: 'kelime-bul', enSlug: 'word-find',   pkg: 'com.kolabs.kelimebul',  logo: 'assets/kelimebul-logo.jpg',  accent: '#ffb45a' },
  { key: 'tenax',      slug: 'tenax',      enSlug: 'tenax',       pkg: 'com.kolabs.tenax',      logo: 'assets/tenax-logo.png',      accent: '#b9ff3a' },
  { key: 'patisstray', slug: 'patisstray', enSlug: 'patisstray',  pkg: 'com.kolabs.patisstray', logo: 'assets/patisstray-logo.png', accent: '#8b5cf6' },
];

// Yönlendirici yardımcısı. app.jsx yolu TR'ye kanonikleştirip veriyor, ama
// /data-deletion (İngilizce, /en öneki olmadan) da tutsun diye iki kök de
// kabul ediliyor — /privacy ve /terms'te olduğu gibi.
function deletionRoute(path) {
  const p = path.length > 1 ? path.replace(/\/+$/, '') : path;
  const m = p.match(/^\/(?:veri-silme|data-deletion)(?:\/([^/]+))?$/);
  if (!m) return null;
  if (!m[1]) return { kind: 'hub' };
  const app = DELETION_APPS.find(a => a.slug === m[1] || a.enSlug === m[1]);
  return app ? { kind: 'app', app } : null;
}

function deletionPath(app) {
  return `/veri-silme/${app.slug}`;
}

// Konusu ve gövdesi hazır e-posta. Mağazanın istediği "talep bağlantısı"
// bu: tıklayan kişi boş bir posta kutusuyla değil, doldurulmuş bir taslakla
// karşılaşıyor ve hangi uygulamadan bahsettiği belirsiz kalmıyor.
function deletionMailHref(d, name, pkg, kind) {
  const subject = encodeURIComponent(d.mailSubject(name, kind));
  const body = encodeURIComponent(d.mailBody(name, pkg, kind));
  return `mailto:${DELETION_EMAIL}?subject=${subject}&body=${body}`;
}

function DeletionHeader({ logo, accent, eyebrow, title, subtitle, lastUpdated, lastUpdatedLabel }) {
  return (
    <header className="del-head" style={{'--page-accent': accent}}>
      {logo && <img className="del-logo" src={logo} alt="" />}
      <div>
        <div className="detail-eyebrow"><span className="pill">{eyebrow}</span></div>
        <h1 className="detail-h1" style={{fontSize:'clamp(34px, 5vw, 54px)', marginBottom: 14}}>{title}</h1>
        {subtitle}
        <p className="del-updated">{lastUpdatedLabel} {lastUpdated}</p>
      </div>
    </header>
  );
}

// İki kutudan biri: solda "yalnızca veriler", sağda "hesap + her şey".
// Kutunun içinde önce uygulama içi yol, sonra talep düğmesi var — sırası
// bilinçli: uygulamadan silmek anında, talep 30 güne kadar sürüyor.
function DeletionAction({ tag, title, flow, none, mailHref, btnLabel, inAppLabel, requestLabel, danger }) {
  return (
    <section className={`del-card${danger ? ' del-card-danger' : ''}`}>
      <div className="del-card-tag">{tag}</div>
      <h2 className="del-card-title">{title}</h2>
      {flow ? (
        <>
          <div className="del-sub">{inAppLabel}</div>
          <ol className="del-steps">
            {flow.steps.map((s, i) => <li key={i}>{s}</li>)}
          </ol>
          {flow.note && <p className="del-note">{flow.note}</p>}
        </>
      ) : (
        <p className="del-note del-note-solo">{none}</p>
      )}
      <div className="del-foot">
        <div className="del-sub">{requestLabel}</div>
        <a className={`btn ${danger ? 'btn-primary' : 'btn-ghost'} del-btn`} href={mailHref}>
          <span>{btnLabel}</span><span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

// ─── Hub: /veri-silme ─────────────────────────────────────────────
function DataDeletionHub() {
  const t = useT();
  const d = t.dataDeletion;
  return (
    <main>
      <div className="detail-wrap" style={{maxWidth: 900}}>
        <Crumbs items={[{label:'kolabs',to:'/'},{label:d.crumb}]} />
        <DeletionHeader
          eyebrow={d.eyebrow}
          title={d.hubTitle}
          subtitle={<p className="del-lead">{d.hubLead}</p>}
          lastUpdated={d.lastUpdated}
          lastUpdatedLabel={t.legalLastUpdated}
        />

        <section style={{marginTop: 56}}>
          <div className="section-head" style={{paddingTop: 0}}>
            <div className="section-num">[ 01 ] {d.crumb}</div>
            <h2 className="section-title-h">{d.pickTitle}</h2>
            <div className="section-desc">{d.pickDesc}</div>
          </div>
          <div className="del-apps">
            {DELETION_APPS.map(app => (
              <Link key={app.key} to={deletionPath(app)} className="del-app-card" style={{'--page-accent': app.accent}}>
                <img src={app.logo} alt="" />
                <div>
                  <div className="del-app-name">{t.appsMeta[app.key].name}</div>
                  <div className="del-app-pkg">{app.pkg}</div>
                </div>
                <span className="arrow">→</span>
              </Link>
            ))}
          </div>
        </section>

        <div className="legal-body">
          <h2>{d.generalTitle}</h2>
          <ul>{d.general.map((g, i) => <li key={i}>{g}</li>)}</ul>
        </div>

        <section className="cta-strip">
          <h3>{d.supportTitle}</h3>
          <p>{d.supportDesc}</p>
          <div className="row-flex" style={{justifyContent: 'center'}}>
            <a href={`mailto:${DELETION_EMAIL}`} className="btn btn-accent">
              <span>{DELETION_EMAIL}</span><span className="arrow">↗</span>
            </a>
            <Link to="/gizlilik" className="btn btn-ghost">{t.footer.privacy}</Link>
            <Link to="/kullanim-sartlari" className="btn btn-ghost">{t.footer.terms}</Link>
          </div>
        </section>
      </div>
    </main>
  );
}

// ─── Uygulama sayfası: /veri-silme/<slug> ─────────────────────────
function DataDeletionApp({ app }) {
  const t = useT();
  const d = t.dataDeletion;
  const a = d.apps[app.key];
  const name = t.appsMeta[app.key].name;
  const timing = a.timing || d.timing;

  return (
    <main>
      <div className="detail-wrap" style={{maxWidth: 900}}>
        <Crumbs items={[{label:'kolabs',to:'/'},{label:d.crumb,to:'/veri-silme'},{label:name}]} />
        <DeletionHeader
          logo={app.logo}
          accent={app.accent}
          eyebrow={d.eyebrow}
          title={`${d.appTitlePrefix} ${name}`}
          subtitle={<p className="del-pkg">{d.packageLabel}: <code>{app.pkg}</code></p>}
          lastUpdated={d.lastUpdated}
          lastUpdatedLabel={t.legalLastUpdated}
        />

        <p className="del-lead">{a.lead}</p>

        <div className="del-grid">
          <DeletionAction
            tag={d.dataOnlyLabel}
            title={d.dataOnlyTitle}
            flow={a.dataOnly}
            none={a.dataOnlyNone}
            mailHref={deletionMailHref(d, name, app.pkg, 'data')}
            btnLabel={d.dataBtn}
            inAppLabel={d.inAppLabel}
            requestLabel={d.requestLabel}
          />
          <DeletionAction
            danger
            tag={d.accountLabel}
            title={d.accountTitle}
            flow={a.account}
            none={a.accountNone}
            mailHref={deletionMailHref(d, name, app.pkg, 'account')}
            btnLabel={d.accountBtn}
            inAppLabel={d.inAppLabel}
            requestLabel={d.requestLabel}
          />
        </div>

        <div className="legal-body">
          <h2>{d.deletedTitle}</h2>
          <ul>{a.deleted.map((x, i) => <li key={i}>{x}</li>)}</ul>
          <h2>{d.keptTitle}</h2>
          <ul>{a.kept.map((x, i) => <li key={i}>{x}</li>)}</ul>
          <h2>{d.timingTitle}</h2>
          <ul>{timing.map((x, i) => <li key={i}>{x}</li>)}</ul>
          <h2>{d.howTitle}</h2>
          <p>{d.howBody}</p>
          <h2>{d.otherAppsTitle}</h2>
          <div className="row-flex" style={{marginTop: 4}}>
            {DELETION_APPS.filter(x => x.key !== app.key).map(x => (
              <Link key={x.key} to={deletionPath(x)} className="btn btn-ghost">
                <span>{t.appsMeta[x.key].name}</span><span className="arrow">→</span>
              </Link>
            ))}
          </div>
        </div>

        <section className="cta-strip">
          <h3>{d.supportTitle}</h3>
          <p>{d.supportDesc}</p>
          <div className="row-flex" style={{justifyContent: 'center'}}>
            <a href={`mailto:${DELETION_EMAIL}`} className="btn btn-accent">
              <span>{DELETION_EMAIL}</span><span className="arrow">↗</span>
            </a>
            <Link to="/gizlilik" className="btn btn-ghost">{t.footer.privacy}</Link>
            <Link to="/kullanim-sartlari" className="btn btn-ghost">{t.footer.terms}</Link>
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { DELETION_APPS, deletionRoute, deletionPath, DataDeletionHub, DataDeletionApp });