/* Klipzy.lv — Brand dashboard, create campaign, submission review */
const BRAND_NAV = [
  { key: 'panel', label: 'Panelis', enLabel: 'Dashboard', icon: 'grid' },
  { key: 'campaigns', label: 'Manas kampaņas', enLabel: 'My campaigns', icon: 'megaphone' },
  { key: 'clippers', label: 'Klipotāji', enLabel: 'Clippers', icon: 'users' },
  { key: 'review', label: 'Iesniegtie klipi', enLabel: 'Submitted clips', icon: 'inbox', badge: 4 },
  { key: 'payments', label: 'Maksājumi', enLabel: 'Payments', icon: 'wallet' },
  { key: 'settings', label: 'Iestatījumi', enLabel: 'Settings', icon: 'gear' },
];

function BrandApp({ go, params, user }) {
  const lang = useLang();
  const [tab, setTab] = useState(params.tab || 'panel');
  const [openId, setOpenId] = useState(null);
  const [appToast, setAppToast] = useState('');
  useEffect(() => { try { const t = sessionStorage.getItem('klipzy_toast'); if (t) { setAppToast(t); sessionStorage.removeItem('klipzy_toast'); setTimeout(() => setAppToast(''), 4000); } } catch (_) {} }, [tab, openId]);
  const uid = (user && user.user && user.user.uid) || null;
  const bverify = useVerify(uid, (user && user.profile) || {}, 'brand');
  const { campaigns, loading: campLoading, reload: reloadCamps } = useBrandCampaigns(uid);
  const { subs, loading: subsLoading, reload: reloadSubs } = useBrandSubmissions(uid);
  const { txns } = useTransactions(uid);
  useEffect(() => { if (params.tab) setTab(params.tab); }, [params.tab]);

  // Konta atlikums (available): deposits + refunds − reserves − cashouts.
  const sumT = (t) => txns.filter((x) => x.type === t && x.status !== 'declined').reduce((s, x) => s + x.amount, 0);
  const available = sumT('deposit') - sumT('cashout') - sumT('reserve') + sumT('refund') - sumT('fee');
  const balanceNegative = available < 0;

  // When the balance goes negative, auto-pause all active campaigns (funds stay
  // reserved). One-shot per negative episode.
  const pausedForBalanceRef = React.useRef(false);
  useEffect(() => {
    if (balanceNegative && !pausedForBalanceRef.current && campaigns.some((c) => c.status === 'active')) {
      pausedForBalanceRef.current = true;
      (async () => {
        try { if (window.KlipzyFirebase && uid) await window.KlipzyFirebase.pauseBrandCampaigns(uid); } catch (_) {}
        reloadCamps();
      })();
    }
    if (!balanceNegative) pausedForBalanceRef.current = false;
  }, [balanceNegative, campaigns.length]);

  const openCampaign = (c) => { setOpenId(c.id); setTab('campaigns'); };

  // Per-campaign "Skatījumi" = sum of viewCount across that campaign's submissions.
  const viewsByCampaign = {};
  const paidByCampaign = {};
  const clippersByCampaign = {};
  subs.forEach((s) => {
    if (!s.campaignId) return;
    viewsByCampaign[s.campaignId] = (viewsByCampaign[s.campaignId] || 0) + (s.viewCount || 0);
    paidByCampaign[s.campaignId] = (paidByCampaign[s.campaignId] || 0) + (s.paidAmount || 0);
    // Count a clipper once per campaign if they have a validated (approved) clip.
    if (s.review === 'approved' && (s.clipperUid || s.clipper)) {
      (clippersByCampaign[s.campaignId] = clippersByCampaign[s.campaignId] || new Set()).add(s.clipperUid || s.clipper);
    }
  });
  const campaignsWithViews = campaigns.map((c) => ({
    ...c,
    views: viewsByCampaign[c.id] || 0,
    // Derived (live) figures override stale stored fields so the table matches
    // each campaign's detail page.
    spent: Math.round(((paidByCampaign[c.id] != null ? paidByCampaign[c.id] : (c.spent || 0)) + Number.EPSILON) * 100) / 100,
    clippers: clippersByCampaign[c.id] ? clippersByCampaign[c.id].size : 0,
  }));

  return (
    <div className="dash-shell" style={{ display: 'flex', height: '100%' }}>
      <Sidebar items={BRAND_NAV.map((n) => ({ ...n, label: lang === 'en' ? (n.enLabel || n.label) : n.label, badge: n.key === 'review' ? (subs.filter((s) => s.review === 'pending').length || undefined) : n.badge }))} active={tab} onNav={(k) => { setOpenId(null); setTab(k); }} role="brand" go={go} user={user} />
      <div className="app-scroll" style={{ flex: 1 }}>
        {tab === 'panel' && <BrandPanel go={go} setTab={setTab} subs={subs} campaigns={campaignsWithViews} created={params.created} user={user} onOpen={openCampaign} balanceNegative={balanceNegative} available={available} reload={() => { reloadCamps(); reloadSubs(); }} />}
        {tab === 'campaigns' && <BrandCampaigns go={go} setTab={setTab} user={user} campaigns={campaignsWithViews} loading={campLoading} subs={subs} openId={openId} onOpen={setOpenId} onBack={() => setOpenId(null)} reload={() => { reloadCamps(); reloadSubs(); }} />}
        {tab === 'clippers' && <BrandClippers subs={subs} />}
        {tab === 'review' && <SubmissionReview subs={subs} reload={reloadSubs} />}
        {tab === 'create' && (!bverify.both
          ? <VerifyRequiredBlock setTab={setTab} verify={bverify} lang={lang} />
          : balanceNegative
          ? <NegativeBalanceBlock go={go} setTab={setTab} available={available} />
          : <CreateCampaign go={go} setTab={setTab} user={user} />)}
        {tab === 'payments' && <BrandPayments uid={uid} user={user} campaigns={campaignsWithViews} subs={subs} verify={bverify} setTab={setTab} />}
        {tab === 'settings' && <SettingsStub title={tr('Iestatījumi', lang)} user={user} role="brand" />}
      </div>
      <Toast msg={appToast} onClose={() => setAppToast('')} />
    </div>
  );
}

function BrandPanel({ go, setTab, subs, campaigns, created, user, onOpen, balanceNegative, available, reload }) {
  const K = window.KLIPZY;
  const lang = useLang();
  const [editCampaign, setEditCampaign] = useState(null);
  const [delCampaign, setDelCampaign] = useState(null);
  // Only active campaigns show in the panel table.
  const activeCampaigns = campaigns.filter((c) => (c.status || 'active') === 'active');
  const profile = (user && user.profile) || {};
  const fbUser = (user && user.user) || {};
  const brandName = profile.displayName || fbUser.displayName || 'Zīmols';
  const uid = (user && user.user && user.user.uid) || null;
  const verify = useVerify(uid, profile);
  const clippers = clippersFromSubmissions(subs);
  // Views are derived from the brand's submissions (scoped to this brand only),
  // so deleted-campaign clips still count toward the brand's totals + chart.
  const totalViews = subs.reduce((s, x) => s + (x.viewCount || 0), 0);
  // Spent persists via each submission's paidAmount (survives campaign deletion),
  // falling back to live campaigns' spent when submissions predate that field.
  const spentFromSubs = subs.reduce((s, x) => s + (x.paidAmount || 0), 0);
  const totalSpent = Math.max(spentFromSubs, campaigns.reduce((s, c) => s + (c.spent || 0), 0));
  const totalBudget = campaigns.reduce((s, c) => s + (c.budget || 0), 0);
  // 30-day daily views series (one dot per day) — updates whenever views refresh.
  const brandViewsPerDay = (() => {
    const DAYS = 30, dayMs = 86400000;
    const today = new Date(); today.setHours(0, 0, 0, 0);
    const arr = new Array(DAYS).fill(0);
    subs.forEach((s) => {
      const secs = s.createdAt && s.createdAt.seconds; if (!secs) return;
      const d = new Date(secs * 1000); d.setHours(0, 0, 0, 0);
      const idx = DAYS - 1 - Math.round((today - d) / dayMs);
      if (idx >= 0 && idx < DAYS) arr[idx] += (s.viewCount || 0);
    });
    return arr;
  })();
  const pendingSubs = subs.filter((s) => s.review === 'pending');
  const { notes, reload: reloadNotes } = useUserNotifications(uid);
  const resolveNote = async (n) => { try { if (window.KlipzyFirebase) await window.KlipzyFirebase.resolveNotification(n.id); } catch (_) {} reloadNotes(); };
  return (
    <div className="fade-in">
      <TopBar title={brandName} subtitle={tr('Pārskats par taviem kampaņu rezultātiem.', lang)} notif={{ notes, onResolve: resolveNote }}>
        <button className="btn btn-secondary" onClick={() => setTab('review')}>{tr('Iesniegtie klipi', lang)} {pendingSubs.length ? <span className="badge badge-blue" style={{ marginLeft: 4 }}>{pendingSubs.length}</span> : null}</button>
        <button className="btn btn-primary" disabled={!verify.both} title={!verify.both ? tr('Vispirms verificē e-pastu.', lang) : undefined} onClick={() => setTab('create')}><Icon d={I.plus} size={17} /> {tr('Izveidot kampaņu', lang)}</button>
      </TopBar>
      <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
        <NotifBanner notes={notes} onResolve={resolveNote} />
        {!verify.both && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--amber-tint)', border: '1px solid #FDE68A', borderRadius: 12, padding: '14px 18px' }}>
            <span style={{ color: 'var(--amber)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ flex: 1, fontSize: 13.5, color: '#92400E' }}>{tr('Lai izveidotu kampaņas un pievienotu līdzekļus, vispirms verificē savu e-pastu.', lang)} {verify.emailOk ? '' : tr('E-pasts nav verificēts.', lang)} {verify.phoneOk ? '' : tr('Tālrunis nav verificēts.', lang)}</div>
            <button className="btn btn-secondary btn-sm" style={{ flex: 'none' }} onClick={() => setTab('settings')}>{tr('Iestatījumi', lang)}</button>
          </div>
        )}
        {!balanceNegative && campaigns.some((c) => c.isLowBudget && c.status !== 'finished') && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--amber-tint)', border: '1px solid #FDE68A', borderRadius: 12, padding: '14px 18px' }}>
            <span style={{ color: 'var(--amber)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ flex: 1, fontSize: 13.5, color: '#92400E' }}>Kādai kampaņai budžets ir zems (atlicis mazāk par 10%). Papildini budžetu, lai tā turpinātu pieņemt jaunus klipus.</div>
            <button className="btn btn-secondary btn-sm" style={{ flex: 'none' }} onClick={() => setTab('campaigns')}>Skatīt kampaņas</button>
          </div>
        )}
        {balanceNegative && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 12, padding: '14px 18px' }}>
            <span style={{ color: 'var(--red)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ flex: 1, fontSize: 13.5, color: '#B91C1C' }}>Konta atlikums ir negatīvs ({eur(available)}). Visas kampaņas ir apturētas un jaunas nevar izveidot, līdz atlikums ir vismaz €0.</div>
            <button className="btn btn-primary btn-sm" style={{ flex: 'none' }} onClick={() => setTab('payments')}><Icon d={I.plus} size={15} /> Pievienot līdzekļus</button>
          </div>
        )}
        {created && (
          <div className="fade-in" style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--green-tint)', border: '1px solid #BBF7D0', borderRadius: 12, padding: '14px 18px' }}>
            <span style={{ width: 34, height: 34, borderRadius: 9, background: '#fff', color: 'var(--green)', display: 'grid', placeItems: 'center', flex: 'none' }}><Icon d={I.check} size={18} sw={2.4} /></span>
            <div><div style={{ fontWeight: 560, fontSize: 14.5, color: '#166534' }}>Kampaņa “{created}” ir publicēta!</div><div style={{ fontSize: 13, color: '#15803D' }}>Klipotāji jau var to atrast tirgū.</div></div>
          </div>
        )}

        <div className="r-grid4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
          <StatCard label={tr('Kopējie skatījumi', lang)} value={views(totalViews)} icon="chart" />
          <StatCard label={tr('Aktīvie klipi', lang)} value={clippers.length} icon="users" />
          <StatCard label={tr('Iztērēts / Budžets', lang)} value={eur0(totalSpent)} icon="wallet" />
          <StatCard label={tr('Gaida pārbaudi', lang)} value={pendingSubs.length} icon="inbox" />
        </div>

        {/* chart */}
        <div className="card" style={{ padding: 22 }}>
          <div className="spread" style={{ marginBottom: 18 }}>
            <div>
              <h3 style={{ fontSize: 16 }}>{tr('Skatījumi laikā', lang)}</h3>
              <p className="muted" style={{ fontSize: 13, marginTop: 2 }}>{tr('Pēdējās 30 dienas', lang)}</p>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10 }}>
            <span className="tnum" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.03em' }}>{views(totalViews)}</span>
          </div>
          <AreaChart data={brandViewsPerDay} height={230} />
        </div>

        <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '2.3fr 1fr', gap: 24 }}>
          {/* campaigns table */}
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div className="spread" style={{ padding: '18px 22px', borderBottom: '1px solid var(--border)' }}>
              <h3 style={{ fontSize: 16 }}>{tr('Manas aktīvās kampaņas', lang)}</h3>
              <button className="btn btn-ghost btn-sm" style={{ color: 'var(--accent-700)' }} onClick={() => setTab('campaigns')}>{tr('Visas', lang)}</button>
            </div>
            {activeCampaigns.length === 0
              ? <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Nav aktīvu kampaņu.', lang)}</div>
              : <CampaignsTable rows={activeCampaigns} onOpen={onOpen} lang={lang} onEditCampaign={(c) => setEditCampaign(c)} onDeleteCampaign={(c) => setDelCampaign(c)} />}
          </div>

          {/* leaderboard */}
          <div className="card" style={{ padding: 20 }}>
            <div className="spread" style={{ marginBottom: 14 }}>
              <h3 style={{ fontSize: 16 }}>{tr('Top klipotāji', lang)}</h3>
              <span style={{ color: 'var(--amber)' }}><Icon d={I.trophy} size={18} /></span>
            </div>
            {clippers.length === 0
              ? <div className="muted" style={{ fontSize: 13.5, padding: '8px 0' }}>Vēl nav klipotāju.</div>
              : (
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {clippers.slice(0, 6).map((c, i) => (
                  <div key={c.uid || c.name} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderTop: i ? '1px solid var(--border)' : 'none' }}>
                    <span className="tnum" style={{ width: 18, fontSize: 13, fontWeight: 600, color: i < 3 ? 'var(--accent)' : 'var(--muted-2)' }}>{i + 1}</span>
                    <BrandLogo initials={(c.name || '?').slice(0, 2).toUpperCase()} grad={['#2563EB', '#3B82F6']} size={34} radius={9} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 540 }}>{c.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{c.clips} klipi · {views(c.views)}</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
      {editCampaign && <EditCampaignModal campaign={editCampaign} onClose={() => setEditCampaign(null)} onDone={() => { setEditCampaign(null); if (reload) reload(); }} />}
      {delCampaign && <DeleteCampaignModal campaign={delCampaign} subs={(subs || []).filter((s) => s.campaignId === delCampaign.id)} onClose={() => setDelCampaign(null)} onDone={() => { setDelCampaign(null); if (reload) reload(); }} />}
    </div>
  );
}

function CampaignsTable({ rows, onOpen, showRemaining, lang, onDeleteDraft, onDeleteCampaign, onEditCampaign }) {
  const [del, setDel] = useState(null);
  const colsLv = showRemaining
    ? ['Kampaņa', 'Statuss', 'Skatījumi', 'Iztērēts', 'Atlikušais budžets', 'Klipotāji']
    : ['Kampaņa', 'Statuss', 'Skatījumi', 'Iztērēts', 'Klipotāji'];
  const cols = colsLv.map((c) => tr(c, lang));
  return (
    <table className="r-fit">
      <thead><tr style={{ background: '#FAFBFC' }}>{cols.map((h, i) => <th key={h} style={{ textAlign: i >= 2 ? 'right' : 'left', padding: '11px 22px', fontSize: 11.5, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--muted)' }}>{h}</th>)}{onOpen && <th style={{ padding: '11px 22px' }}></th>}</tr></thead>
      <tbody>
        {rows.map((r, i) => {
          const remaining = r.budgetRemaining != null ? r.budgetRemaining : (r.budget || 0) - (r.spent || 0);
          const isDraft = r.status === 'draft';
          return (
          <tr key={r.id || i} onClick={onOpen ? () => onOpen(r) : undefined} style={{ borderTop: '1px solid var(--border)', cursor: onOpen ? 'pointer' : 'default' }}
            onMouseEnter={onOpen ? (e) => e.currentTarget.style.background = '#FAFBFC' : undefined}
            onMouseLeave={onOpen ? (e) => e.currentTarget.style.background = 'transparent' : undefined}>
            <td style={{ padding: '13px 22px', fontSize: 14, fontWeight: 540 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>{onOpen && <Icon d={I.chevronR} size={15} style={{ color: 'var(--muted-2)' }} />}{r.name}</span>
            </td>
            <td style={{ padding: '13px 22px' }}><StatusBadge status={campaignState(r)} lang={lang} /></td>
            <td style={{ padding: '13px 22px', textAlign: 'right' }} className="tnum">{views(r.views)}</td>
            <td style={{ padding: '13px 22px', textAlign: 'right' }} className="tnum">{eur0(r.spent)} <span className="muted" style={{ fontSize: 12 }}>/ {eur0(r.budget)}</span></td>
            {showRemaining && <td style={{ padding: '13px 22px', textAlign: 'right' }} className="tnum">{eur0(Math.max(0, remaining))}</td>}
            <td style={{ padding: '13px 22px', textAlign: 'right' }} className="tnum">{r.clippers}</td>
            {onOpen && (
              <td style={{ padding: '13px 16px', textAlign: 'right', whiteSpace: 'nowrap' }} onClick={(e) => e.stopPropagation()}>
                <button className="btn btn-ghost btn-sm" title={tr(isDraft ? 'Rediģēt melnrakstu' : 'Rediģēt kampaņu', lang)} onClick={() => isDraft ? onOpen(r) : (onEditCampaign ? onEditCampaign(r) : onOpen(r))} style={{ padding: 6, color: 'var(--muted)' }}><Icon d={I.edit} size={16} /></button>
                <button className="btn btn-ghost btn-sm" title={tr(isDraft ? 'Dzēst melnrakstu' : 'Dzēst kampaņu', lang)} onClick={() => isDraft ? (onDeleteDraft && setDel(r)) : (onDeleteCampaign ? onDeleteCampaign(r) : onOpen(r))} style={{ padding: 6, color: 'var(--red)' }}><Icon d={I.trash} size={16} /></button>
              </td>
            )}
          </tr>
          );
        })}
      </tbody>
      {del && ReactDOM.createPortal(
        <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(15,23,42,.5)', display: 'grid', placeItems: 'center', padding: 20 }} onClick={() => setDel(null)}>
          <div className="card" style={{ maxWidth: 380, width: '100%', padding: 24 }} onClick={(e) => e.stopPropagation()}>
            <h3 style={{ fontSize: 17, margin: 0 }}>{tr('Dzēst melnrakstu?', lang)}</h3>
            <p className="muted" style={{ fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>{tr('Šo darbību nevar atsaukt.', lang)}</p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 18 }}>
              <button className="btn btn-secondary" onClick={() => setDel(null)}>{tr('Atcelt', lang)}</button>
              <button className="btn btn-primary" style={{ background: 'var(--red)', borderColor: 'var(--red)' }} onClick={() => { const c = del; setDel(null); onDeleteDraft(c); }}>{tr('Dzēst', lang)}</button>
            </div>
          </div>
        </div>, document.body)}
    </table>
  );
}

function BrandCampaigns({ go, setTab, user, campaigns, loading, subs, openId, onOpen, onBack, reload }) {
  const lang = useLang();
  const [delIntent, setDelIntent] = useState(null);
  const [editIntent, setEditIntent] = useState(null);
  const [editCampaign, setEditCampaign] = useState(null);
  const [delCampaign, setDelCampaign] = useState(null);
  const open = openId ? campaigns.find((c) => c.id === openId) : null;
  if (openId && open && (open.status === 'draft')) {
    return <CreateCampaign go={go} setTab={setTab} user={user} draftCampaign={open} />;
  }
  if (openId && open) {
    return <BrandCampaignDetail campaign={open} subs={(subs || []).filter((s) => s.campaignId === openId)} onBack={onBack} reload={reload} autoDelete={delIntent === openId} onAutoDeleteHandled={() => setDelIntent(null)} autoEdit={editIntent === openId} onAutoEditHandled={() => setEditIntent(null)} />;
  }
  return (
    <div className="fade-in">
      <TopBar title={tr('Manas kampaņas', lang)} subtitle={tr('Visas tavas izveidotās kampaņas.', lang)}>
        <button className="btn btn-primary" onClick={() => setTab('create')}><Icon d={I.plus} size={17} /> {tr('Izveidot kampaņu', lang)}</button>
      </TopBar>
      <div style={{ padding: 32 }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          {loading
            ? <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Ielādē…', lang)}</div>
            : campaigns.length === 0
              ? <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Veēl nav kampaņu. Izveido savu pirmo!', lang)}</div>
              : <CampaignsTable rows={campaigns} onOpen={onOpen ? (c) => onOpen(c.id) : undefined} lang={lang} onEditCampaign={(c) => setEditCampaign(c)} onDeleteCampaign={(c) => setDelCampaign(c)} onDeleteDraft={async (c) => { try { if (window.KlipzyFirebase) await window.KlipzyFirebase.deleteDraft(c.id); } catch (_) {} try { sessionStorage.setItem('klipzy_toast', tr('Melnraksts dzēsts.', lang)); } catch (_) {} if (reload) reload(); }} />}
        </div>
      </div>
      {editCampaign && <EditCampaignModal campaign={editCampaign} onClose={() => setEditCampaign(null)} onDone={() => { setEditCampaign(null); if (reload) reload(); }} />}
      {delCampaign && <DeleteCampaignModal campaign={delCampaign} subs={(subs || []).filter((s) => s.campaignId === delCampaign.id)} onClose={() => setDelCampaign(null)} onDone={() => { setDelCampaign(null); if (reload) reload(); }} />}
    </div>
  );
}

function VerifyRequiredBlock({ setTab, verify, lang }) {
  return (
    <div className="fade-in">
      <TopBar title={tr('Izveidot kampaņu', lang)} subtitle={tr('Iestati kampaņu — klipotāji to redzēs tirgū.', lang)} />
      <div style={{ padding: 32, maxWidth: 560 }}>
        <div className="card" style={{ padding: 40, textAlign: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--amber-tint)', color: 'var(--amber)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><Icon d={I.alert} size={28} /></div>
          <h3 style={{ fontSize: 18 }}>{tr('Vispirms pabeidz konta iestatīšanu', lang)}</h3>
          <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>{tr('Lai izveidotu kampaņas un pievienotu līdzekļus, verificē savu e-pastu un pievieno zīmola logo iestatījumos.', lang)}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, margin: '18px auto', maxWidth: 260 }}>
            <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '10px 14px', fontSize: 13.5 }}><span>{tr('E-pasts', lang)}</span><span style={{ color: verify.emailOk ? 'var(--green)' : 'var(--muted)', fontWeight: 540 }}>{verify.emailOk ? '✓' : tr('Nav verificēts', lang)}</span></div>
            {verify.needsPhone && (
              <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '10px 14px', fontSize: 13.5 }}><span>{tr('Mobilais tālrunis', lang)}</span><span style={{ color: verify.phoneOk ? 'var(--green)' : 'var(--muted)', fontWeight: 540 }}>{verify.phoneOk ? '✓' : tr('Nav verificēts', lang)}</span></div>
            )}
            {verify.logoOk !== undefined && (
              <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '10px 14px', fontSize: 13.5 }}><span>{tr('Zīmola logo', lang)}</span><span style={{ color: verify.logoOk ? 'var(--green)' : 'var(--muted)', fontWeight: 540 }}>{verify.logoOk ? '✓' : tr('Nav pievienots', lang)}</span></div>
            )}
          </div>
          <button className="btn btn-primary" onClick={() => setTab('settings')}>{tr('Uz iestatījumiem', lang)}</button>
        </div>
      </div>
    </div>
  );
}

function NegativeBalanceBlock({ go, setTab, available }) {
  return (
    <div className="fade-in">
      <TopBar title="Izveidot kampaņu" subtitle="Konta atlikums jāpapildina." />
      <div style={{ padding: 32, maxWidth: 560 }}>
        <div className="card" style={{ padding: 32, textAlign: 'center' }}>
          <div style={{ width: 56, height: 56, borderRadius: 999, background: '#FEF2F2', color: 'var(--red)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><Icon d={I.alert} size={28} /></div>
          <h3 style={{ fontSize: 18 }}>Negatīvs konta atlikums</h3>
          <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.5 }}>Tavs konta atlikums ir {eur(available)}. Kamēr tas nav vismaz €0, tu nevari izveidot jaunas kampaņas, un esošās kampaņas ir apturētas. Pievieno līdzekļus, lai turpinātu.</p>
          <button className="btn btn-primary btn-lg" style={{ marginTop: 20 }} onClick={() => setTab('payments')}><Icon d={I.plus} size={17} /> Pievienot līdzekļus</button>
        </div>
      </div>
    </div>
  );
}

/* ===== BRAND CAMPAIGN DETAIL ===== */
function BrandCampaignDetail({ campaign: c, subs, onBack, reload, autoDelete, onAutoDeleteHandled, autoEdit, onAutoEditHandled }) {
  const lang = useLang();
  const T = (s) => tr(s, lang);
  const [busy, setBusy] = useState('');
  const [confirmDel, setConfirmDel] = useState(false);
  useEffect(() => { if (autoDelete) { setConfirmDel(true); onAutoDeleteHandled && onAutoDeleteHandled(); } }, [autoDelete]);
  const [budgetModal, setBudgetModal] = useState(false);
  const [editModal, setEditModal] = useState(false);
  useEffect(() => { if (autoEdit) { setEditModal(true); onAutoEditHandled && onAutoEditHandled(); } }, [autoEdit]);
  const paused = c.status === 'paused';
  const budgetTotal = Number(c.budgetTotal != null ? c.budgetTotal : c.budget) || 0;
  const budgetRemaining = Number(c.budgetRemaining != null ? c.budgetRemaining : budgetTotal - (Number(c.spent) || 0)) || 0;
  // A paused campaign can't be resumed while (a) the brand's balance is
  // negative, or (b) it auto-paused because its budget was exhausted — funds
  // must be added first (via Palielināt budžetu).
  const { txns: brandTxns } = useTransactions(c.brandUid);
  const brandAvailable = brandTxns.reduce((s, t) => s + (t.status === 'declined' ? 0 : ((t.type === 'deposit' || t.type === 'refund') ? t.amount : (t.type === 'reserve' || t.type === 'cashout' || t.type === 'fee' || t.type === 'cashfee') ? -t.amount : 0)), 0);
  const resumeBlocked = paused && (brandAvailable < 0 || budgetRemaining <= 0);
  const [refreshReq, setRefreshReq] = useState(false);
  const [toast, setToast] = useState('');
  const requestRefresh = async () => {
    try {
      if (window.KlipzyFirebase) await window.KlipzyFirebase.createNotification({ toRole: 'admin', kind: 'refreshRequest', severity: 'reminder', campaignId: c.id, message: 'Zīmols “' + (c.brand || '') + '” pieprasa skatījumu atjaunošanu kampaņai “' + (c.name || '') + '”.' });
      setRefreshReq(true);
      setToast('Skatījumu atjaunojums ir pieteikts un var aizņemt līdz 24 stundām.');
      setTimeout(() => setToast(''), 5000);
    } catch (_) {}
  };
  // Renewal is allowed within 3 days of the campaign's end date (max 30d run).
  const daysToEnd = c.end ? Math.ceil((new Date(c.end).getTime() - Date.now()) / 86400000) : null;
  const canRenew = daysToEnd != null && daysToEnd <= 3;
  const doRenew = async () => {
    setBusy('renew');
    try { if (window.KlipzyFirebase) await window.KlipzyFirebase.renewCampaign(c, 30); } catch (_) {}
    if (reload) reload();
    setBusy('');
  };
  // Pay all clippers with verified, unpaid earnings immediately.
  // Hard ceiling: never pay out more than the campaign's remaining balance.
  // Clips are paid FIFO (oldest first) and the last one may be part-paid.
  const payAll = async () => {
    setBusy('pay');
    try {
      if (window.KlipzyFirebase) {
        let left = round2(Math.max(0, budgetRemaining));
        const queue = [...rows].sort((a, b) => {
          const ta = (a.sub.createdAt && a.sub.createdAt.seconds) || 0;
          const tb = (b.sub.createdAt && b.sub.createdAt.seconds) || 0;
          return ta - tb;
        });
        for (const r of queue) {
          if (left <= 0) break;
          if (r.sub.review !== 'approved' || r.unpaid <= 0) continue;
          const amount = round2(Math.min(r.unpaid, left));
          if (amount <= 0) continue;
          try { await window.KlipzyFirebase.validateSubmissionPayout(r.sub, c, amount); } catch (_) {}
          left = round2(left - amount);
        }
      }
    } catch (_) {}
    if (reload) reload();
    setBusy('');
  };

  // Roll up the campaign's submissions into per-clipper rows.
  const DAY = 86400000;
  // FIFO: the campaign budget is allocated to clips in submission order, so a
  // later clip only earns what earlier clips left behind.
  const alloc = allocateCampaignPayouts(subs, c);
  const rows = subs.map((s) => {
    const payable = alloc.has(s.id) ? alloc.get(s.id) : payableForSub(s, c);
    const paid = Number(s.paidAmount) || 0;
    const unpaid = Math.max(0, round2(payable - paid));
    return {
      sub: s,
      name: s.clipper || 'Klipotājs',
      views: s.views || 0,
      payable, paid, unpaid,
      status: clipMaxedOut(s, c) ? 'finished' : effectiveSubStatus(s),
    };
  }).sort((a, b) => b.views - a.views);
  const liveViews = rows.reduce((s, r) => s + r.views, 0);
  // "Jāizmaksā" (owed) can never exceed the reserved budget; the reserved
  // remainder ("atlikums") is what's left of the reservation after owed.
  // Owed (Apstrādē) = validated-but-unpaid earnings on approved clips.
  // Paid (Izmaksāts) = already paid out.
  const owedRaw = round2(rows.reduce((s, r) => s + (r.sub.review === 'approved' ? r.unpaid : 0), 0));
  // Total paid can never exceed the campaign budget (matches server-side cap).
  const paidTotal = round2(Math.min(budgetTotal, rows.reduce((s, r) => s + r.paid, 0)));
  const owed = round2(Math.min(owedRaw, Math.max(0, budgetTotal - paidTotal)));
  // Views are split by euros paid vs owed (rate € per 1 000 views):
  //  • Pārbaudīti skatījumi = views already paid for.
  //  • Gaida pārbaudi       = new/unpaid views awaiting payout (grows on refresh).
  const rate = c.rate || 0;
  const viewsFromEur = (e) => rate > 0 ? Math.round((e / rate) * 1000) : 0;
  // Pārbaudīti skatījumi = total generated views on verified (approved) clips —
  // reads live viewCount so it updates together with the Klipotāji rows on refresh.
  const verifiedViews = rows.reduce((s, r) => s + (r.sub.review === 'approved' ? Math.max(0, (r.sub.viewCount || 0) - (Number(r.sub.startViews) || 0)) : 0), 0);
  // Gaida pārbaudi = generated views on clips still awaiting brand verification.
  const pendingViews = rows.reduce((s, r) => s + (r.sub.review === 'pending' ? Math.max(0, (r.sub.viewCount || 0) - (Number(r.sub.startViews) || 0)) : 0), 0);
  const remaining = Math.max(0, round2(budgetTotal - paidTotal - owed)); // rezervēts (atlikums)
  const budgetReached = (paidTotal + owed) >= budgetTotal && budgetTotal > 0;

  // View tracking, validation, earnings and payouts are fully automated
  // server-side (Cloud Functions) on a 24h cycle. Brands only see performance;
  // they no longer manually validate views or release payouts. `hoursLeft`
  // stays for display: when the next automated validation cycle runs.
  const hoursLeft = (s) => {
    const base = (s.lastValidatedAt && s.lastValidatedAt.seconds) || (s.createdAt && s.createdAt.seconds);
    if (!base) return 0;
    return Math.max(0, Math.ceil((base * 1000 + DAY - Date.now()) / 3600000));
  };
  const validated = rows.filter((r) => r.sub.review === 'approved');
  const awaiting = rows.filter((r) => r.sub.review === 'pending');

  // Auto-refresh views when a clip is within the last hour before its 24h
  // validation window opens, so the freshest counts are ready at validation.
  const autoRefreshRef = React.useRef(false);
  React.useEffect(() => {
    if (autoRefreshRef.current) return;
    const dueSoon = rows.some((r) => { const h = hoursLeft(r.sub); return h > 0 && h <= 1; });
    if (dueSoon) {
      autoRefreshRef.current = true;
      (async () => {
        try { if (window.KlipzyFirebase) await window.KlipzyFirebase.refreshCampaignViews(c.id); } catch (_) {}
        if (reload) reload();
      })();
    }
  }, [rows.length, c.id]);

  // Auto-stop: when owed reaches the reserved budget, pause the campaign
  // (brand can re-open by increasing the budget). One-shot guard.
  const pausedRef = React.useRef(false);
  React.useEffect(() => {
    if (budgetReached && c.status === 'active' && !pausedRef.current) {
      pausedRef.current = true;
      (async () => {
        try { if (window.KlipzyFirebase) await window.KlipzyFirebase.updateCampaign(c.id, { status: 'paused', isActive: false, isOpenForSubmissions: false }); } catch (_) {}
        if (reload) reload();
      })();
    }
  }, [budgetReached, c.status, c.id]);

  const doPause = async () => {
    setBusy('pause');
    try {
      if (window.KlipzyFirebase) {
        if (paused) { await window.KlipzyFirebase.resumeCampaign(c); }
        else {
          // Refresh views first so clippers are credited for everything earned
          // up to the pause moment, then pause.
          try { await window.KlipzyFirebase.refreshCampaignViews(c.id); } catch (_) {}
          await window.KlipzyFirebase.cancelCampaign(c, 'pause');
        }
      }
    } catch (_) {}
    if (reload) reload();
    setBusy(''); onBack();
  };
  const doDelete = async () => {
    setBusy('delete');
    try { if (window.KlipzyFirebase) await window.KlipzyFirebase.cancelCampaign(c, 'delete'); } catch (_) {}
    if (reload) reload();
    setBusy(''); onBack();
  };

  return (
    <div className="fade-in">
      <TopBar title={c.name} subtitle={T(c.niche) + ' · ' + eur(c.rate) + ' /\u00a01\u00a0000 ' + T('skatījumi')}>
        {owed > 0 && (
          <button className="btn btn-primary" disabled={!!busy} onClick={payAll}>
            <Icon d={I.wallet} size={16} /> {busy === 'pay' ? 'Izmaksā…' : 'Izmaksāt (' + eur(owed) + ')'}
          </button>
        )}
        {canRenew && (
          <button className="btn btn-secondary" disabled={!!busy} onClick={doRenew}>
            <Icon d={I.refresh} size={16} /> {T('Pagarināt (30 d.)')}
          </button>
        )}
        <button className="btn btn-secondary" disabled={!!busy || refreshReq} title={T('Skatījumu atjaunošana var aizņemt līdz 24 stundām.')} onClick={requestRefresh}>
            <Icon d={I.refresh} size={16} /> {refreshReq ? T('Pieprasīts') : T('Atjaunot skatījumus')}
          </button>
        <button className="btn btn-secondary" disabled={!!busy} title={T('Mainīt cenu, budžetu, platformas un vadlīnijas.')} onClick={() => setEditModal(true)}>
          <Icon d={I.gear} size={16} /> {T('Rediģēt kampaņu')}
        </button>
        <button className="btn btn-secondary" disabled={!!busy} title={T('Pievieno vairāk līdzekļu šai kampaņai no konta atlikuma.')} onClick={() => setBudgetModal(true)}>
          <Icon d={I.plus} size={16} /> {T('Palielināt budžetu')}
        </button>
        <button className={'btn btn-secondary'} disabled={!!busy || resumeBlocked} title={resumeBlocked ? T('Vispirms pievieno līdzekļus un nokārto negatīvo atlikumu') : (paused ? T('Atsāc kampaņu, lai tā atkal būtu redzama klipotājiem.') : T('Uz laiku aptur kampaņu — to redzēsi tikai tu.'))} onClick={doPause}>
          <Icon d={paused ? I.play : I.pause} size={16} /> {paused ? T('Atsākt') : T('Pauzēt')}
        </button>
        <button className="btn btn-secondary" style={{ color: 'var(--red)' }} disabled={!!busy} title={owed > 0 ? T('Vispirms izmaksā visus validētos skatījumus') + ' (' + eur(owed) + ')' : T('Neatgriezeniski dzēš kampaņu — neizmantotais budžets tiek atgriezts kontā.')} onClick={() => setConfirmDel(true)}>
          <Icon d={I.trash} size={16} /> {T('Dzēst')}
        </button>
      </TopBar>
      <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
        <button className="btn btn-ghost btn-sm" style={{ alignSelf: 'flex-start', paddingLeft: 6, color: 'var(--muted)' }} onClick={onBack}><Icon d={I.arrowL} size={16} /> {T('Visas kampaņas')}</button>

        {paused && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--amber-tint)', border: '1px solid #FDE68A', borderRadius: 12, padding: '13px 18px' }}>
            <span style={{ color: 'var(--amber)' }}><Icon d={I.pause} size={18} /></span>
            <div style={{ fontSize: 13.5, color: '#92400E' }}>{T('Šī kampaņa ir pauzēta — to redzi tikai tu. Atsāc, lai tā atkal būtu redzama klipotājiem.')}</div>
          </div>
        )}

        {budgetReached && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#FEF2F2', border: '1px solid #FECACA', borderRadius: 12, padding: '13px 18px' }}>
            <span style={{ color: 'var(--red)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ flex: 1, fontSize: 13.5, color: '#B91C1C' }}>Rezervētais budžets ir sasniegts — klipotāju nopelnītais ({eur(owedRaw)}) sasniedza rezervēto summu ({eur(budgetTotal)}). Kampaņa ir apturēta.</div>
            <button className="btn btn-primary btn-sm" style={{ flex: 'none' }} onClick={() => setBudgetModal(true)}><Icon d={I.plus} size={15} /> {T('Palielināt budžetu')}</button>
          </div>
        )}
        {c.isLowBudget && c.status !== 'finished' && !budgetReached && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--amber-tint)', border: '1px solid #FDE68A', borderRadius: 12, padding: '13px 18px' }}>
            <span style={{ color: 'var(--amber)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ fontSize: 13.5, color: '#92400E' }}>Zems budžets — atlicis mazāk par 10%. Kampaņa vairs nepieņem jaunus klipus. Papildini budžetu, lai to atkal atvērtu.</div>
          </div>
        )}
        {c.status === 'finished' && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: '#F1F5F9', border: '1px solid var(--border)', borderRadius: 12, padding: '13px 18px' }}>
            <span style={{ color: 'var(--muted)' }}><Icon d={I.check} size={18} /></span>
            <div style={{ fontSize: 13.5, color: 'var(--text-2)' }}>Kampaņa ir pabeigta — budžets ir pilnībā izlietots.</div>
          </div>
        )}

        <div className="r-grid4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
          <StatCard label={T('Pārbaudīti skatījumi')} value={views(verifiedViews)} icon="chart" />
          <StatCard label={T('Gaida pārbaudi')} value={views(pendingViews)} icon="clock" />
          <StatCard label={T('Aktīvie klipi')} value={rows.length} icon="users" />
          <StatCard label={T('Rezervēts (atlikums)')} value={eur0(remaining)} icon="lock" />
        </div>
        <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          <StatCard label={T('Jāizmaksā klipotājiem')} value={eur(owed)} icon="clock" />
          <StatCard label={T('Izmaksāts klipotājiem')} value={eur(paidTotal)} icon="wallet" />
        </div>

        <div className="card" style={{ padding: 20 }}>
          <div className="spread" style={{ marginBottom: 12 }}>
            <h3 style={{ fontSize: 15.5 }}>{T('Budžeta izlietojums')}</h3>
            <span className="muted tnum" style={{ fontSize: 13 }}>{eur0(c.spent)} / {eur0(c.budget)}</span>
          </div>
          <Budget spent={budgetTotal - remaining} budget={budgetTotal} showLabel={false} />
          {/* Explicit budget allocation breakdown: Reserved / Apstrādē / Izmaksāts / Remaining. */}
          <div className="r-grid4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10, marginTop: 16 }}>
            <MiniBudget label={T('Rezervēts')} value={eur0(budgetTotal)} />
            <MiniBudget label={T('Apstrādē')} value={eur0(owed)} color="var(--amber)" />
            <MiniBudget label={T('Izmaksāts')} value={eur0(paidTotal)} color="var(--green)" />
            <MiniBudget label={T('Pieejams')} value={eur0(remaining)} />
          </div>
          {c.minViews > 0 && <div className="muted" style={{ fontSize: 12.5, marginTop: 10 }}>{T('Izmaksas slieksnis:')} <strong className="tnum">{numLv(c.minViews)}</strong> {T('skatījumi pirms pirmās izmaksas.')}</div>}
        </div>

        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="spread" style={{ padding: '18px 22px', borderBottom: '1px solid var(--border)' }}>
            <h3 style={{ fontSize: 16 }}>{T('Klipotāji šajā kampaņā')}</h3>
            <span className="muted" style={{ fontSize: 13 }}>{validated.length} {T('validēti')}</span>
          </div>
          {validated.length === 0 ? (
            <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{T('Vēl nav validētu klipotāju šajā kampaņā.')}</div>
          ) : (
            <table className="r-table">
              <thead><tr style={{ background: '#FAFBFC' }}>{['Klipotājs', 'Skatījumi', 'Izmaksāts', 'Apstrādē', ''].map((h, i) => <th key={i} style={{ textAlign: i >= 1 && i <= 3 ? 'right' : 'left', padding: '11px 22px', fontSize: 11.5, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--muted)' }}>{h ? T(h) : ''}</th>)}</tr></thead>
              <tbody>
                {validated.map((r) => (
                  <tr key={r.sub.id} style={{ borderTop: '1px solid var(--border)' }}>
                    <td style={{ padding: '12px 22px' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                        <BrandLogo initials={(r.name || '?').slice(0, 2).toUpperCase()} grad={['#2563EB', '#3B82F6']} size={34} radius={9} />
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 13.5, fontWeight: 540 }}>{r.name}</div>
                          {r.sub.platformLabel ? <div className="muted" style={{ fontSize: 12 }}>{r.sub.platformLabel}</div> : null}
                        </div>
                      </div>
                    </td>
                    <td style={{ padding: '12px 22px', textAlign: 'right' }} className="tnum">
                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'flex-end' }}>
                        {r.status === 'active' && <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--green)', display: 'inline-block' }} />}
                        {numLv(r.views)}
                      </span>
                    </td>
                    <td style={{ padding: '12px 22px', textAlign: 'right', fontWeight: 560, color: 'var(--green)' }} className="tnum">{r.paid > 0 ? eur(r.paid) : '—'}</td>
                    <td style={{ padding: '12px 22px', textAlign: 'right', fontWeight: 560, color: r.unpaid > 0 ? 'var(--amber)' : 'var(--muted-2)' }} className="tnum">{r.unpaid > 0 ? eur(r.unpaid) : '—'}</td>
                    <td style={{ padding: '12px 22px', textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <a href={r.sub.url} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm" style={{ padding: 6, color: 'var(--accent-700)' }} title={T('Skatīt lapu')}><Icon d={I.link} size={16} /></a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        {/* Clips the brand hasn't quality-approved yet. Approve them in
            "Iesniegtie klipi"; after approval, view tracking + payouts are automated. */}
        {awaiting.length > 0 && (
          <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <div className="spread" style={{ padding: '18px 22px', borderBottom: '1px solid var(--border)', background: '#FAFBFC' }}>
              <h3 style={{ fontSize: 16 }}>Gaida klipa verifikāciju</h3>
              <span className="muted" style={{ fontSize: 13 }}>{awaiting.length} klipi · apstiprini tos sadaļā “Iesniegtie klipi”</span>
            </div>
            <table className="r-table">
              <thead><tr style={{ background: '#fff' }}>{['Klipotājs', 'Skatījumi', 'Statuss', ''].map((h, i) => <th key={i} style={{ textAlign: i === 1 ? 'right' : 'left', padding: '11px 22px', fontSize: 11.5, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--muted)' }}>{h ? T(h) : ''}</th>)}</tr></thead>
              <tbody>
                {awaiting.map((r) => (
                    <tr key={r.sub.id} style={{ borderTop: '1px solid var(--border)' }}>
                      <td style={{ padding: '12px 22px' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                          <BrandLogo initials={(r.name || '?').slice(0, 2).toUpperCase()} grad={['#2563EB', '#3B82F6']} size={34} radius={9} />
                          <div style={{ minWidth: 0 }}>
                            <div style={{ fontSize: 13.5, fontWeight: 540 }}>{r.name}</div>
                            {r.sub.platformLabel ? <div className="muted" style={{ fontSize: 12 }}>{r.sub.platformLabel}</div> : null}
                          </div>
                        </div>
                      </td>
                      <td style={{ padding: '12px 22px', textAlign: 'right' }} className="tnum">{numLv(r.views)}</td>
                      <td style={{ padding: '12px 22px' }}><span className="badge badge-amber">Gaida apstiprinājumu</span></td>
                      <td style={{ padding: '12px 22px', textAlign: 'right' }}>
                        <a href={r.sub.url} target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-sm" style={{ padding: 6, color: 'var(--accent-700)' }} title={T('Skatīt lapu')}><Icon d={I.link} size={16} /></a>
                      </td>
                    </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {confirmDel && ReactDOM.createPortal(
        <div onClick={() => setConfirmDel(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,.45)', display: 'grid', placeItems: 'center', zIndex: 200, padding: 20 }}>
          <div onClick={(e) => e.stopPropagation()} className="card fade-in" style={{ width: 420, maxWidth: 'calc(100vw - 40px)', padding: 26 }}>
            <div style={{ width: 46, height: 46, borderRadius: 12, background: '#FEF2F2', color: 'var(--red)', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon d={I.trash} size={22} /></div>
            <h3 style={{ fontSize: 18 }}>{owed > 0 ? T('Kampaņu vēl nevar dzēst') : T('Dzēst kampaņu?')}</h3>
            {owed > 0
              ? <p className="muted" style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{T('Vispirms izmaksā visus validētos skatījumus')} ({eur(owed)}). {T('Pēc tam kampaņu varēs dzēst.')}</p>
              : <p className="muted" style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{T('Kampaņa')} “{c.name}” {T('tiks neatgriezeniski dzēsta no platformas. Neizlietotais budžets')} ({eur0(remaining)}) {T('tiks atgriezts tavā Klipzy kontā.')}</p>}
            <div style={{ display: 'flex', gap: 10, marginTop: 22, justifyContent: 'flex-end' }}>
              <button className="btn btn-secondary" onClick={() => setConfirmDel(false)}>{T('Atcelt')}</button>
              {owed > 0
                ? <button className="btn btn-primary" onClick={() => { setConfirmDel(false); payAll(); }}>{T('Izmaksāt')} ({eur(owed)})</button>
                : <button className="btn btn-primary" style={{ background: 'var(--red)' }} disabled={busy === 'delete'} onClick={doDelete}>{busy === 'delete' ? T('Dzēš…') : T('Dzēst kampaņu')}</button>}
            </div>
          </div>
        </div>, document.body)}
      {budgetModal && <IncreaseBudgetModal campaign={c} onClose={() => setBudgetModal(false)} onDone={() => { setBudgetModal(false); if (reload) reload(); }} />}
      {editModal && <EditCampaignModal campaign={c} onClose={() => setEditModal(false)} onDone={() => { setEditModal(false); if (reload) reload(); }} />}
      <Toast msg={toast} onClose={() => setToast('')} />
    </div>
  );
}

function DeleteCampaignModal({ campaign: c, subs, onClose, onDone }) {
  const lang = useLang();
  const T = (s) => tr(s, lang);
  const [busy, setBusy] = useState(false);
  const alloc = allocateCampaignPayouts(subs || [], c);
  const owed = round2((subs || []).reduce((s, sub) => {
    if (sub.review !== 'approved') return s;
    const payable = alloc.has(sub.id) ? alloc.get(sub.id) : payableForSub(sub, c);
    return s + Math.max(0, round2(payable - (Number(sub.paidAmount) || 0)));
  }, 0));
  const budgetTotal = Number(c.budgetTotal != null ? c.budgetTotal : c.budget) || 0;
  const paidOut = round2((subs || []).reduce((s, sub) => s + (Number(sub.paidAmount) || 0), 0));
  // Unused budget = total − actually paid to clippers (live, matches detail page).
  const remaining = round2(Math.max(0, budgetTotal - paidOut));
  const doDelete = async () => {
    setBusy(true);
    try { if (window.KlipzyFirebase) await window.KlipzyFirebase.cancelCampaign(c, 'delete'); } catch (_) {}
    try { sessionStorage.setItem('klipzy_toast', T('Kampaņa dzēsta.')); } catch (_) {}
    onDone();
  };
  return ReactDOM.createPortal(
    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(15,23,42,.5)', display: 'grid', placeItems: 'center', padding: 20 }} onClick={onClose}>
      <div className="card fade-in" style={{ width: 420, maxWidth: 'calc(100vw - 40px)', padding: 26 }} onClick={(e) => e.stopPropagation()}>
        <div style={{ width: 46, height: 46, borderRadius: 12, background: '#FEF2F2', color: 'var(--red)', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon d={I.trash} size={22} /></div>
        <h3 style={{ fontSize: 18 }}>{owed > 0 ? T('Kampaņu vēl nevar dzēst') : T('Dzēst kampaņu?')}</h3>
        {owed > 0
          ? <p className="muted" style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{T('Vispirms izmaksā visus validētos skatījumus')} ({eur(owed)}). {T('Pēc tam kampaņu varēs dzēst.')}</p>
          : <p className="muted" style={{ fontSize: 14, marginTop: 6, lineHeight: 1.5 }}>{T('Kampaņa')} “{c.name}” {T('tiks neatgriezeniski dzēsta no platformas. Neizlietotais budžets')} ({eur0(Math.max(0, remaining))}) {T('tiks atgriezts tavā Klipzy kontā.')}</p>}
        <div style={{ display: 'flex', gap: 10, marginTop: 22, justifyContent: 'flex-end' }}>
          <button className="btn btn-secondary" onClick={onClose}>{T('Atcelt')}</button>
          {owed <= 0 && <button className="btn btn-primary" style={{ background: 'var(--red)', borderColor: 'var(--red)' }} disabled={busy} onClick={doDelete}>{busy ? T('Dzēš…') : T('Dzēst kampaņu')}</button>}
        </div>
      </div>
    </div>, document.body);
}

function EditCampaignModal({ campaign: c, onClose, onDone }) {  const lang = useLang();
  const T = (s) => tr(s, lang);
  const [f, setF] = useState({
    rate: String(c.rate || ''),
    minViews: String(c.minViews || ''),
    maxPerClip: String(c.maxPerClip || ''),
    assetsLinks: (c.assetsLinks && c.assetsLinks.length ? c.assetsLinks : (c.assetsLink ? [c.assetsLink] : [''])),
    dos: (c.dos || ['']).length ? (c.dos || ['']) : [''],
    donts: (c.donts || ['']).length ? (c.donts || ['']) : [''],
  });
  const set = (k, v) => setF((p) => ({ ...p, [k]: v }));
  // Example clips: links to previously submitted clips shown on the campaign page.
  const [examples, setExamples] = useState(Array.isArray(c.exampleClips) ? c.exampleClips : []);
  const [exUrl, setExUrl] = useState('');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  const addExample = async () => {
    const u = exUrl.trim();
    if (!u) return;
    if (!/tiktok\.com|instagram\.com|youtube\.com|youtu\.be/i.test(u)) { setErr(T('Ievadi TikTok, Instagram vai YouTube saiti.')); return; }
    if (examples.some((e) => e.url === u)) { setErr(T('Šī saite jau ir pievienota.')); return; }
    setErr('');
    const platform = /tiktok/i.test(u) ? 'tiktok' : /instagram/i.test(u) ? 'instagram' : 'youtube';
    // Resolve the cover once, here, and store it — so the campaign page can
    // render thumbnails instantly instead of calling Apify on every view.
    const ytId = (u.match(/(?:shorts\/|v=|youtu\.be\/|embed\/)([\w-]{6,})/) || [])[1];
    let cover = ytId ? `https://img.youtube.com/vi/${ytId}/hqdefault.jpg` : '';
    setExamples([...examples, { url: u, platform, cover }]);
    setExUrl('');
    if (!cover && window.KlipzyFirebase && window.KlipzyFirebase.getClipMedia) {
      try {
        const d = await window.KlipzyFirebase.getClipMedia(u);
        if (d && d.cover) setExamples((list) => list.map((e) => e.url === u ? { ...e, cover: d.cover } : e));
      } catch (_) {}
    }
  };
  const save = async () => {
    setBusy(true); setErr('');
    try {
      await window.KlipzyFirebase.updateCampaign(c.id, {
        rate: +f.rate || c.rate,
        minViews: +f.minViews > 0 ? Math.max(1000, +f.minViews) : 1000,
        maxPerClip: Math.min(200, +f.maxPerClip || 0),
        assetsLink: (f.assetsLinks.find((s) => s.trim()) || '').trim(), assetsLinks: f.assetsLinks.map((s) => s.trim()).filter(Boolean),
        dos: f.dos.map((s) => s.trim()).filter(Boolean),
        donts: f.donts.map((s) => s.trim()).filter(Boolean),
        exampleClips: examples,
      });
      onDone();
    } catch (e) { setErr(T('Neizdevās saglabāt. Mēģini vēlreiz.')); setBusy(false); }
  };

  return (
    <ModalShell onClose={onClose} width={560}>
      <div className="spread" style={{ marginBottom: 14 }}>
        <h3 style={{ fontSize: 19 }}>{T('Rediģēt kampaņu')}</h3>
        <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={onClose}><Icon d={I.x} size={18} /></button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxHeight: '68vh', overflowY: 'auto', paddingRight: 10, marginRight: -14 }}>
        <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div className="field">
            <label>{T('Cena par 1 000 skatījumiem')} (€)</label>
            <input className="input tnum" type="number" step="0.05" min="0.05" value={f.rate} onChange={(e) => set('rate', e.target.value)} />
          </div>
          <div className="field">
            <label>{T('Maks. par klipu')} (€)</label>
            <input className="input tnum" type="number" step="10" min="0" max="200" placeholder={T('piem. 50')} value={f.maxPerClip}
              onChange={(e) => { const n = +e.target.value || 0; set('maxPerClip', String(n <= 0 ? 0 : Math.min(200, n))); }} />
          </div>
        </div>
        <div className="field">
          <label>{T('Minimālais skatījumu slieksnis izmaksai')}</label>
          <input className="input tnum" type="number" step="1000" min="1000" max="10000" value={f.minViews}
            onChange={(e) => { const n = +e.target.value || 0; set('minViews', String(n <= 0 ? 0 : Math.min(10000, Math.max(1000, n)))); }} />
        </div>
        <GuidelineList label={T('Materiālu saite')} color="var(--text)" items={f.assetsLinks} onChange={(v) => set('assetsLinks', v)} addLabel={T('Pievienot vēl')} placeholder="https://…" lang={lang} />
        <div className="r-grid2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <GuidelineList label={T('Ieteicams (do\'s)')} color="var(--green)" items={f.dos} onChange={(v) => set('dos', v)} addLabel={T('Pievienot vēl')} placeholder={T('piem. Rādi produktu pirmajās 3 sekundēs')} lang={lang} />
          <GuidelineList label={T('Izvairies (don\'ts)')} color="var(--red)" items={f.donts} onChange={(v) => set('donts', v)} addLabel={T('Pievienot vēl')} placeholder={T('piem. Neizmanto rupjus vārdus')} lang={lang} />
        </div>

        {/* Example clips — links to previously submitted clips. */}
        <div className="field">
          <label>{T('Piemēra klipi')} <span className="muted" style={{ fontWeight: 400 }}>({T('nav obligāti')})</span></label>
          <div style={{ display: 'flex', gap: 8 }}>
            <input className="input" style={{ flex: 1 }} placeholder="https://tiktok.com/… · instagram.com/reel/… · youtube.com/shorts/…"
              value={exUrl} onChange={(e) => setExUrl(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addExample(); } }} />
            <button className="btn btn-secondary" style={{ flex: 'none' }} onClick={addExample}><Icon d={I.plus} size={16} /> {T('Pievienot')}</button>
          </div>
          {examples.length > 0 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
              {examples.map((ex, i) => (
                <div key={ex.url} className="spread" style={{ background: '#F8FAFC', border: '1px solid var(--border)', borderRadius: 8, padding: '8px 10px', gap: 10 }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                    <Platform name={PLATFORM_LABEL[ex.platform] || ex.platform} />
                    <span className="muted" style={{ fontSize: 12.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ex.url}</span>
                  </span>
                  <button className="btn btn-ghost btn-sm" style={{ color: 'var(--red)', padding: 5, flex: 'none' }} onClick={() => setExamples(examples.filter((_, j) => j !== i))}><Icon d={I.trash} size={15} /></button>
                </div>
              ))}
            </div>
          )}
          <span style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 2 }}>{T('Šie klipi tiks parādīti kampaņas lapā kā piemēri klipotājiem.')}</span>
        </div>

        {err && <div style={{ background: '#FEF2F2', border: '1px solid #FECACA', color: '#B91C1C', borderRadius: 'var(--r)', padding: '10px 13px', fontSize: 13.5 }}>{err}</div>}
        <button className="btn btn-primary btn-block" style={{ height: 52, fontSize: 15.5, fontWeight: 600, flex: 'none', marginTop: 4 }} disabled={busy} onClick={save}>{busy ? T('Saglabā…') : T('Saglabāt izmaiņas')}</button>
      </div>
    </ModalShell>
  );
}

function IncreaseBudgetModal({ campaign, onClose, onDone }) {
  const lang = useLang();
  const [amount, setAmount] = useState('500');
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  // Konta atlikums can't go below 0 — cap the increase at available funds.
  const { txns } = useTransactions(campaign.brandUid);
  const sumT = (t) => txns.filter((x) => x.type === t && x.status !== 'declined').reduce((s, x) => s + x.amount, 0);
  const available = sumT('deposit') - sumT('cashout') - sumT('reserve') + sumT('refund') - sumT('fee');
  const submit = async () => {
    const amt = +amount;
    const fee = Math.round(amt * 0.01 * 100) / 100;
    if (!amt || amt <= 0) { setErr('Ievadi summu.'); return; }
    if (amt + fee > available) { setErr('Nepietiek līdzekļu (summa + 1% maksa). Pieejams: ' + eur0(available) + '.'); return; }
    setBusy(true); setErr('');
    try { if (window.KlipzyFirebase) await window.KlipzyFirebase.increaseCampaignBudget(campaign, amt); onDone(); }
    catch (e) { setErr('Neizdevās. Mēģini vēlreiz.'); setBusy(false); }
  };
  const feePreview = Math.round((+amount || 0) * 0.01 * 100) / 100;
  return (
    <ModalShell onClose={onClose}>
        <div className="spread" style={{ marginBottom: 6 }}>
          <h3 style={{ fontSize: 19 }}>{tr('Palielināt budžetu', lang)}</h3>
          <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={onClose}><Icon d={I.x} size={18} /></button>
        </div>
        <p className="muted" style={{ fontSize: 13.5, marginBottom: 16, lineHeight: 1.5 }}>{tr('Papildu līdzekļi tiek rezervēti šai kampaņai (+1% maksa) un tā atkal tiek atvērta klipotājiem. Pieejams kontā:', lang)} <strong className="tnum" style={{ color: 'var(--text)' }}>{eur0(available)}</strong>.</p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="field">
            <label className="spread" style={{ alignItems: 'baseline' }}><span>{tr('Summa', lang)} (€)</span><button type="button" onClick={() => setAmount(String(Math.max(0, Math.floor((available / 1.01) * 100) / 100)))} style={{ border: 'none', background: 'var(--accent-tint)', color: 'var(--accent-700)', fontWeight: 600, fontSize: 12, borderRadius: 6, padding: '2px 8px', cursor: 'pointer' }}>{tr('Visu', lang)}</button></label>
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)', fontWeight: 540 }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 26 }} type="number" step="100" value={amount} onChange={(e) => setAmount(e.target.value)} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            {[250, 500, 1000, 2500].map((v) => <button key={v} className="btn btn-secondary btn-sm" style={{ flex: 1 }} onClick={() => setAmount(String(v))}>€{v}</button>)}
          </div>
          {(+amount || 0) > 0 && (
            <div style={{ background: '#F8FAFC', borderRadius: 10, padding: '12px 14px', fontSize: 13, display: 'flex', flexDirection: 'column', gap: 5 }}>
              <div className="spread"><span className="muted">{tr('Budžets', lang)}</span><span className="tnum">{eur0(+amount || 0)}</span></div>
              <div className="spread"><span className="muted">{tr('Komisija (1%)', lang)}</span><span className="tnum" style={{ color: 'var(--red)' }}>−{eur(feePreview)}</span></div>
              <div className="spread" style={{ borderTop: '1px solid var(--border)', paddingTop: 5, fontWeight: 600 }}><span>{tr('Kopā no konta', lang)}</span><span className="tnum">{eur0((+amount || 0) + feePreview)}</span></div>
            </div>
          )}
          {err && <div style={{ background: '#FEF2F2', border: '1px solid #FECACA', color: '#B91C1C', borderRadius: 'var(--r)', padding: '10px 13px', fontSize: 13.5 }}>{err}</div>}
          <button className="btn btn-primary btn-lg btn-block" disabled={busy} onClick={submit}>{busy ? tr('Apstrādā…', lang) : tr('Pievienot', lang) + ' ' + eur0(+amount || 0)}</button>
        </div>
    </ModalShell>
  );
}

function BrandClippers({ subs }) {
  const lang = useLang();
  const clippers = clippersFromSubmissions(subs || []);
  const [profile, setProfile] = useState(null);
  return (
    <div className="fade-in">
      <TopBar title={tr('Klipotāji', lang)} subtitle={tr('Klipotāji, kas veido saturu taviem zīmoliem.', lang)} />
      <div style={{ padding: 32 }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          {clippers.length === 0 ? (
            <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Veēl neviens klipotājs nav iesniedzis klipu tavām kampaņām.', lang)}</div>
          ) : (
          <table className="r-table">
            <thead><tr style={{ background: '#FAFBFC' }}>{['Klipotājs', 'Klipi', 'Skatījumi', 'Apstiprināti', ''].map((h, i) => <th key={i} style={{ textAlign: i >= 1 && i <= 3 ? 'right' : 'left', padding: '11px 22px', fontSize: 11.5, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--muted)' }}>{h ? tr(h, lang) : ''}</th>)}</tr></thead>
            <tbody>
              {clippers.map((c) => (
                <tr key={c.uid || c.name} style={{ borderTop: '1px solid var(--border)' }}>
                  <td style={{ padding: '12px 22px' }}><div style={{ display: 'flex', alignItems: 'center', gap: 11 }}><BrandLogo initials={(c.name || '?').slice(0, 2).toUpperCase()} grad={['#2563EB', '#3B82F6']} size={36} radius={9} /><span style={{ fontSize: 14, fontWeight: 540 }}>{c.name}</span></div></td>
                  <td style={{ padding: '12px 22px', textAlign: 'right' }} className="tnum">{c.clips}</td>
                  <td style={{ padding: '12px 22px', textAlign: 'right' }} className="tnum">{views(c.views)}</td>
                  <td style={{ padding: '12px 22px', textAlign: 'right', fontWeight: 560 }} className="tnum">{c.approved}</td>
                  <td style={{ padding: '12px 22px', textAlign: 'right' }}><button className="btn btn-secondary btn-sm" onClick={() => setProfile(c)}>{tr('Profils', lang)}</button></td>
                </tr>
              ))}
            </tbody>
          </table>
          )}
        </div>
      </div>
      {profile && (
        <ModalShell onClose={() => setProfile(null)} width={360}>
            <div className="spread" style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <BrandLogo initials={(profile.name || '?').slice(0, 2).toUpperCase()} grad={['#2563EB', '#3B82F6']} size={44} radius={11} />
                <div><div style={{ fontSize: 16, fontWeight: 600 }}>{profile.name}</div><div className="muted" style={{ fontSize: 12.5 }}>{tr('Klipotājs', lang)}</div></div>
              </div>
              <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={() => setProfile(null)}><Icon d={I.x} size={18} /></button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '12px 14px' }}><span className="muted" style={{ fontSize: 13.5 }}>{tr('Kopējie ieņēmumi', lang)}</span><span className="tnum" style={{ fontWeight: 600, fontSize: 15, color: 'var(--green)' }}>{eur(profile.earned)}</span></div>
              <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '12px 14px' }}><span className="muted" style={{ fontSize: 13.5 }}>{tr('Iesniegtie klipi', lang)}</span><span className="tnum" style={{ fontWeight: 600, fontSize: 15 }}>{profile.clips}</span></div>
              <div className="spread" style={{ background: '#F8FAFC', borderRadius: 10, padding: '12px 14px' }}><span className="muted" style={{ fontSize: 13.5 }}>{tr('Ģenerētie skatījumi', lang)}</span><span className="tnum" style={{ fontWeight: 600, fontSize: 15 }}>{views(profile.views)}</span></div>
            </div>
        </ModalShell>
      )}
    </div>
  );
}

function BrandPayments({ uid, user, campaigns, subs, verify, setTab }) {
  const lang = useLang();
  const { txns, loading, reload } = useTransactions(uid);
  const [modal, setModal] = useState(false);
  const [cashModal, setCashModal] = useState(false);
  const [filter, setFilter] = useState('all');
  const [filterOpen, setFilterOpen] = useState(false);
  const [toast, setToast] = useState('');
  const [openRow, setOpenRow] = useState(null);

  // Escrow ledger: deposits/refunds add to available; reserves move available
  // → reserved; payouts leave reserved; cashouts leave available.
  const sum = (type) => txns.filter((t) => t.type === type && t.status !== 'declined').reduce((s, t) => s + t.amount, 0);
  const deposits = sum('deposit'), reserves = sum('reserve'), refunds = sum('refund'), cashouts = sum('cashout'), fees = sum('fee');
  // "Izmaksāts klipotājiem" = cumulative paid to clippers, from the settlement
  // ledger recorded on each submission (paidAmount). Falls back to payout txns.
  const paidToClippers = round2((subs || []).reduce((s, x) => s + (x.paidAmount || 0), 0)) || sum('payout');
  const payouts = paidToClippers;
  const available = deposits - cashouts - reserves + refunds - fees;   // Konta atlikums
  // Rezervētā summa = sum of each active/paused campaign's remaining reservation
  // (matches the "Rezervēts (atlikums)" shown per campaign in My campaigns).
  const subsBy = {};
  (subs || []).forEach((s) => { if (s.campaignId) { subsBy[s.campaignId] = subsBy[s.campaignId] || { paid: 0, owed: 0 }; subsBy[s.campaignId].paid += (s.paidAmount || 0); } });
  const reserved = round2((campaigns || []).filter((c) => c.status !== 'deleted').reduce((s, c) => {
    const bt = Number(c.budgetTotal != null ? c.budgetTotal : c.budget) || 0;
    const rem = c.budgetRemaining != null ? Number(c.budgetRemaining) : bt - (Number(c.spent) || 0);
    return s + Math.max(0, rem);
  }, 0));

  const TYPE = {
    deposit: { label: tr('Pievienoti līdzekļi', lang), color: 'var(--green)', sign: '+' },
    reserve: { label: tr('Rezervēts kampaņai', lang), color: 'var(--amber)', sign: '−' },
    payout: { label: tr('Izmaksāts klipotājam', lang), color: 'var(--red)', sign: '−' },
    refund: { label: tr('Atgriezts', lang), color: 'var(--accent-700)', sign: '+' },
    cashout: { label: tr('Izņemts uz kontu', lang), color: 'var(--red)', sign: '−' },
    fee: { label: tr('Izveides komisija (1%)', lang), color: 'var(--muted)', sign: '−' },
    cashfee: { label: tr('Izmaksas komisija', lang), color: 'var(--muted)', sign: '−' },
  };
  const shown = txns.filter((t) => (filter === 'all' || t.type === filter || (filter === 'fee' && t.type === 'cashfee')));
  const FILTERS = [['all', 'Visi'], ['deposit', 'Pievienoti'], ['reserve', 'Rezervēti'], ['payout', 'Izmaksāti'], ['refund', 'Atgriezti'], ['cashout', 'Izņemti'], ['fee', 'Komisijas']].map(([k, l]) => [k, tr(l, lang)]);

  return (
    <div className="fade-in">
      <TopBar title={tr('Maksājumi', lang)} subtitle={tr('Budžeti, depozīti un izmaksu vēsture.', lang)}>
        <button className="btn btn-secondary" onClick={() => setCashModal(true)}><Icon d={I.arrowDown} size={16} /> {tr('Izmaksāt', lang)}</button>
        <button className="btn btn-primary" disabled={verify && !verify.emailOk} title={verify && !verify.emailOk ? tr('Vispirms verificē e-pastu.', lang) : undefined} onClick={() => setModal(true)}><Icon d={I.plus} size={17} /> {tr('Pievienot līdzekļus', lang)}</button>
      </TopBar>
      <div style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 24 }}>
        {verify && !verify.emailOk && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--amber-tint)', border: '1px solid #FDE68A', borderRadius: 12, padding: '14px 18px' }}>
            <span style={{ color: 'var(--amber)' }}><Icon d={I.alert} size={18} /></span>
            <div style={{ flex: 1, fontSize: 13.5, color: '#92400E' }}>{tr('Lai pievienotu līdzekļus, vispirms verificē savu e-pastu.', lang)}</div>
            <button className="btn btn-secondary btn-sm" style={{ flex: 'none' }} onClick={() => setTab && setTab('settings')}>{tr('Iestatījumi', lang)}</button>
          </div>
        )}
        <div className="r-grid4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
          <StatCard label={tr('Konta atlikums', lang)} value={eur0(available)} icon="wallet" />
          <StatCard label={tr('Rezervētā summa', lang)} value={eur0(reserved)} icon="lock" />
          <StatCard label={tr('Pievienoti līdzekļi', lang)} value={eur0(deposits)} icon="chart" />
          <StatCard label={tr('Kampaņu izmaksas', lang)} value={eur0(payouts)} icon="calendar" />
        </div>
        <div className="card" style={{ padding: 0, overflow: 'visible' }}>
          <div className="spread" style={{ padding: '16px 22px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap', gap: 10 }}>
            <h3 style={{ fontSize: 16 }}>{tr('Maksājumu vēsture', lang)}</h3>
            <div style={{ position: 'relative' }}>
              <button onClick={() => setFilterOpen((o) => !o)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, height: 34, padding: '0 14px', borderRadius: 999, border: '1px solid var(--border)', background: '#fff', cursor: 'pointer', fontSize: 13, fontWeight: 540, color: 'var(--text)' }}>
                {(FILTERS.find(([k]) => k === filter) || FILTERS[0])[1]}
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: filterOpen ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }}><path d="M6 9l6 6 6-6" /></svg>
              </button>
              {filterOpen && (
                <>
                  <div onClick={() => setFilterOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 30 }} />
                  <div className="card" style={{ position: 'absolute', right: 0, top: 'calc(100% + 6px)', zIndex: 31, minWidth: 180, padding: 5, display: 'flex', flexDirection: 'column', gap: 2, boxShadow: 'var(--sh-md)' }}>
                    {FILTERS.map(([k, label]) => (
                      <button key={k} onClick={() => { setFilter(k); setFilterOpen(false); }} style={{
                        textAlign: 'left', height: 34, padding: '0 12px', borderRadius: 8, border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: 540,
                        background: filter === k ? 'var(--accent-tint)' : 'transparent', color: filter === k ? 'var(--accent-700)' : 'var(--text-2)',
                      }}>{label}</button>
                    ))}
                  </div>
                </>
              )}
            </div>
          </div>
          {loading ? (
            <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Ielādē…', lang)}</div>
          ) : shown.length === 0 ? (
            <div className="muted" style={{ padding: 28, textAlign: 'center', fontSize: 14 }}>{tr('Nav darījumu.', lang)}</div>
          ) : (
            <table className="r-table pay-hist" style={{ width: '100%', tableLayout: 'auto' }}>
              <thead><tr style={{ background: '#FAFBFC' }}>{['Datums', 'Tips', 'Piezīme', 'Summa'].map((h, i) => <th key={h} className={i === 2 ? 'pay-note-col' : ''} style={{ textAlign: i === 3 ? 'right' : 'left', padding: '11px 22px', fontSize: 11.5, fontWeight: 600, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--muted)' }}>{tr(h, lang)}</th>)}</tr></thead>
              <tbody>
                {shown.map((t) => {
                  const meta = TYPE[t.type] || TYPE.deposit;
                  const date = t.createdAt && t.createdAt.seconds ? new Date(t.createdAt.seconds * 1000).toLocaleDateString('lv-LV', { day: '2-digit', month: '2-digit' }) : '—';
                  const isOpen = openRow === t.id;
                  return (
                    <React.Fragment key={t.id}>
                    <tr style={{ borderTop: '1px solid var(--border)' }} className="pay-hist-row" onClick={() => { if (window.matchMedia('(max-width: 640px)').matches) setOpenRow(isOpen ? null : t.id); }}>
                      <td style={{ padding: '13px 22px', fontSize: 14 }} className="muted">{date}</td>
                      <td style={{ padding: '13px 22px', fontSize: 14 }}><span style={{ color: meta.color, fontWeight: 560 }}>{meta.label}</span>{t.type === 'deposit' && <button title={tr('Lejupielādēt rēķinu', lang)} onClick={(e) => { e.stopPropagation(); klipzyInvoice(t, (user && user.profile) || {}, lang); }} style={{ marginLeft: 8, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--accent-700)', padding: 0, verticalAlign: 'middle' }}><Icon d={I.download || 'M12 3v12m0 0l-4-4m4 4l4-4M4 21h16'} size={15} /></button>}</td>
                      <td className="pay-note-col" style={{ padding: '13px 22px', fontSize: 14 }}><span className="muted">{t.note || '—'}</span></td>
                      <td style={{ padding: '13px 22px', fontSize: 14, fontWeight: 600, textAlign: 'right', color: meta.color }} className="tnum">
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                          {meta.sign}{eur0(t.amount)}
                          <svg className="pay-note-chev" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }}><path d="M6 9l6 6 6-6" /></svg>
                        </span>
                      </td>
                    </tr>
                    {isOpen && (
                      <tr className="pay-note-drawer" style={{ background: '#FAFBFC' }}>
                        <td colSpan={4} style={{ padding: '10px 14px' }}>
                          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                            <span className="muted" style={{ fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.04em', flex: '0 0 auto', paddingTop: 1 }}>{tr('Piezīme', lang)}</span>
                            <span style={{ fontSize: 13.5, color: 'var(--text-2)', textAlign: 'left', wordBreak: 'break-word', overflowWrap: 'anywhere', flex: 1, minWidth: 0 }}>{t.note || tr('Nav piezīmes.', lang)}</span>
                          </div>
                        </td>
                      </tr>
                    )}
                    </React.Fragment>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
      </div>
      {modal && <AddFundsModal uid={uid} onClose={() => setModal(false)} onDone={(amt) => { setModal(false); reload(); setToast(tr('Līdzekļi ir pievienoti tavam kontam.', lang)); setTimeout(() => setToast(''), 5000); }} />}
      {cashModal && <CashoutModal uid={uid} user={user} available={available} onClose={() => setCashModal(false)} onDone={() => { setCashModal(false); reload(); setToast(tr('Izmaksas pieprasījums ir pieņemts.', lang)); setTimeout(() => setToast(''), 5000); }} />}
      <Toast msg={toast} onClose={() => setToast('')} />
    </div>
  );
}

function CashoutModal({ uid, user, available, onClose, onDone }) {
  const lang = useLang();
  const T = (s) => tr(s, lang);
  const profile = (user && user.profile) || {};
  const [wallets, setWallets] = useState(Array.isArray(profile.payoutWallets) ? profile.payoutWallets : []);
  const [amount, setAmount] = useState('');
  const [instant, setInstant] = useState(false);
  const NETWORKS = { USDT: ['ERC20'], BTC: ['Bitcoin'], ETH: ['ERC20'] };
  const [coin, setCoin] = useState('USDT');
  const [network, setNetwork] = useState('ERC20');
  const [addr, setAddr] = useState('');
  const [selWallet, setSelWallet] = useState('');   // '' = new address
  const [saveNew, setSaveNew] = useState(false);
  const [walletName, setWalletName] = useState('');
  const pickCoin = (k) => { setCoin(k); setNetwork(NETWORKS[k][0]); setSelWallet(''); setAddr(''); };
  const coinWallets = wallets.filter((w) => w.coin === coin);
  const pickSaved = (id) => {
    setSelWallet(id);
    if (id === '') { setAddr(''); return; }
    const w = coinWallets.find((x) => x.id === id);
    if (w) { setAddr(w.addr); setNetwork(w.network || NETWORKS[coin][0]); }
  };
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  const amt = +amount || 0;
  const baseFee = Math.round(amt * 0.02 * 100) / 100;          // 2% fixed
  const instFee = instant ? Math.round(amt * 0.01 * 100) / 100 : 0; // +1% instant
  const totalFee = round2(baseFee + instFee);
  const net = round2(Math.max(0, amt - totalFee));
  const submit = async () => {
    if (!amt || amt <= 0) { setErr('Ievadi summu.'); return; }
    if (amt > available) { setErr('Summa pārsniedz konta atlikumu (' + eur0(available) + ').'); return; }
    if (!addr.trim()) { setErr(tr('Ievadi kripto maka adresi.', lang)); return; }
    if (!window.KlipzyFirebase) { onDone(); return; }
    setBusy(true); setErr('');
    try {
      // Optionally save the new address to the brand's profile for reuse.
      if (selWallet === '' && saveNew) {
        const entry = { id: 'w' + Date.now(), name: (walletName.trim() || (coin + ' ' + tr('maks', lang))), coin, network, addr: addr.trim() };
        const next = [...wallets, entry];
        try { await window.KlipzyFirebase.updateProfileFields(uid, { payoutWallets: next }); } catch (_) {}
      }
      await window.KlipzyFirebase.addTransaction({ brandUid: uid, type: 'cashout', status: 'received', amount: amt, fee: totalFee, net: net, instant, method: 'crypto', coin, network, addr: addr.trim(), note: (instant ? 'Tūlītēja izmaksa' : 'Izmaksa (7 dienu laikā)') + ' — saņemts ' + eur0(net) + ' (komisija ' + eur0(totalFee) + ')' });
      onDone();
    } catch (e) { setErr('Neizdevās. Mēģini vēlreiz.'); setBusy(false); }
  };
  const removeWallet = async (id) => {
    const next = wallets.filter((w) => w.id !== id);
    setWallets(next);
    if (selWallet === id) { setSelWallet(''); setAddr(''); }
    try { if (window.KlipzyFirebase) await window.KlipzyFirebase.updateProfileFields(uid, { payoutWallets: next }); } catch (_) {}
  };
  return (
    <ModalShell onClose={onClose}>
        <div className="spread" style={{ marginBottom: 6 }}>
          <h3 style={{ fontSize: 19 }}>{tr('Izmaksāt līdzekļus', lang)}</h3>
          <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={onClose}><Icon d={I.x} size={18} /></button>
        </div>
        <p className="muted" style={{ fontSize: 13.5, marginBottom: 16 }}>{tr('Pieejams izņemšanai', lang)}: <strong className="tnum" style={{ color: 'var(--text)' }}>{eur0(available)}</strong></p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="field">
            <label>{tr('Summa', lang)} (€)</label>
            <div style={{ position: 'relative' }}>
              <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)', fontWeight: 540 }}>€</span>
              <input className="input tnum" style={{ paddingLeft: 26 }} type="number" step="10" value={amount} onChange={(e) => setAmount(e.target.value)} placeholder="0" />
            </div>
          </div>
          <button className="btn btn-secondary btn-sm" style={{ alignSelf: 'flex-start' }} onClick={() => setAmount(String(Math.max(0, Math.floor(available))))}>{tr('Visa summa', lang)}</button>
          <div className="field">
            <label>{tr('Izmaksas metode', lang)}</label>
            <div style={{ display: 'flex', gap: 8 }}>
              {['USDT', 'BTC', 'ETH'].map((k) => (
                <button key={k} onClick={() => pickCoin(k)} className="btn" style={{ flex: 1, height: 44, border: '1px solid ' + (coin === k ? 'var(--accent)' : 'var(--border-strong)'), background: coin === k ? 'var(--accent-tint)' : '#fff', color: coin === k ? 'var(--accent-700)' : 'var(--text-2)', fontWeight: 540 }}>{k}</button>
              ))}
            </div>
          </div>
          {coinWallets.length > 0 && (
            <div className="field">
              <label>{tr('Saglabātā adrese', lang)}</label>
              <select className="input" value={selWallet} onChange={(e) => pickSaved(e.target.value)}>
                <option value="">{tr('Ievadīt jaunu adresi', lang)}</option>
                {coinWallets.map((w) => <option key={w.id} value={w.id}>{w.name} — {w.addr.slice(0, 6)}…{w.addr.slice(-4)}</option>)}
              </select>
              {selWallet && <button className="btn-link" style={{ background: 'none', border: 'none', color: 'var(--red)', cursor: 'pointer', padding: '4px 0 0', font: 'inherit', fontSize: 12.5, alignSelf: 'flex-start' }} onClick={() => removeWallet(selWallet)}>{tr('Dzēst saglabāto adresi', lang)}</button>}
            </div>
          )}
          <div className="field">
            <label>{tr('Tīkls', lang)}</label>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {NETWORKS[coin].map((n) => (
                <button key={n} onClick={() => setNetwork(n)} className="btn" style={{ flex: 1, minWidth: 90, height: 40, border: '1px solid ' + (network === n ? 'var(--accent)' : 'var(--border-strong)'), background: network === n ? 'var(--accent-tint)' : '#fff', color: network === n ? 'var(--accent-700)' : 'var(--text-2)', fontWeight: 540, fontSize: 13 }}>{n}</button>
              ))}
            </div>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>{tr('Pārliecinies, ka tīkls atbilst tavam makam — nepareizs tīkls nozīmē zaudētus līdzekļus.', lang)}</span>
          </div>
          {selWallet === '' && (
          <div className="field">
            <label>{coin} {tr('maka adrese', lang)}</label>
            <input className="input" value={addr} onChange={(e) => setAddr(e.target.value)} placeholder={coin + ' ' + tr('maka adrese', lang)} />
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, marginTop: 8, cursor: 'pointer', color: 'var(--text-2)' }}>
              <input type="checkbox" checked={saveNew} onChange={(e) => setSaveNew(e.target.checked)} style={{ accentColor: 'var(--accent)' }} />
              {tr('Saglabāt šo adresi turpmākai lietošanai', lang)}
            </label>
            {saveNew && <input className="input" style={{ marginTop: 8 }} value={walletName} onChange={(e) => setWalletName(e.target.value)} placeholder={tr('Maka nosaukums (piem. Galvenais)', lang)} />}
          </div>
          )}
          {amt > 0 && (
            <div style={{ background: '#F8FAFC', borderRadius: 10, padding: '12px 14px', fontSize: 13, display: 'flex', flexDirection: 'column', gap: 5 }}>
              <div className="spread"><span className="muted">Summa</span><span className="tnum">{eur(amt)}</span></div>
              <div className="spread"><span className="muted">{tr('Komisija', lang)} (2%)</span><span className="tnum" style={{ color: 'var(--red)' }}>−{eur(totalFee)}</span></div>
              <div className="spread" style={{ borderTop: '1px solid var(--border)', paddingTop: 5, fontWeight: 600 }}><span>Saņemsi</span><span className="tnum">{eur(net)}</span></div>
            </div>
          )}
          {err && <div style={{ background: '#FEF2F2', border: '1px solid #FECACA', color: '#B91C1C', borderRadius: 'var(--r)', padding: '10px 13px', fontSize: 13.5 }}>{err}</div>}
          <button className="btn btn-primary btn-lg btn-block" disabled={busy} onClick={submit}>{busy ? tr('Apstrādā…', lang) : tr('Izmaksāt', lang) + ' ' + eur0(amt)}</button>
          <p className="muted" style={{ fontSize: 12, textAlign: 'center', lineHeight: 1.4 }}>{tr('Parastā izmaksa nonāk kontā 7 darba dienu laikā. Rezervēto summu nevar izņemt, kamēr kampaņas ir aktīvas.', lang)}</p>
        </div>
    </ModalShell>
  );
}

function AddFundsModal({ uid, onClose, onDone }) {
  const lang = useLang();
  const T = (s) => tr(s, lang);
  const MIN = 10;
  const [amount, setAmount] = useState('100');
  const [phase, setPhase] = useState('form'); // form | waiting | done
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');
  const [invoiceUrl, setInvoiceUrl] = useState('');
  const pollRef = useRef(null);
  useEffect(() => () => { if (pollRef.current) clearInterval(pollRef.current); }, []);

  const submit = async () => {
    const amt = +amount;
    if (!amt || amt < MIN) { setErr(T('Minimālā iemaksa ir €10.')); return; }
    // Preview / offline fallback: no Cloud Functions → keep the demo credit.
    if (!window.KlipzyFirebase || !window.KlipzyFirebase.createDeposit) {
      try { await window.KlipzyFirebase.addTransaction({ brandUid: uid, type: 'deposit', amount: amt, note: 'Demo' }); } catch (_) {}
      onDone(amt); return;
    }
    setBusy(true); setErr('');
    try {
      const res = await window.KlipzyFirebase.createDeposit(amt);
      if (!res || !res.invoiceUrl || !res.id) throw new Error('no-invoice');
      setInvoiceUrl(res.invoiceUrl);
      window.open(res.invoiceUrl, '_blank', 'noopener');
      setPhase('waiting'); setBusy(false);
      // Poll until the IPN webhook credits the balance.
      pollRef.current = setInterval(async () => {
        const st = await window.KlipzyFirebase.getDepositStatus(res.id);
        if (st && (st.credited || st.status === 'finished' || st.status === 'confirmed')) {
          clearInterval(pollRef.current);
          setPhase('done');
          setTimeout(() => onDone(amt), 900);
        }
      }, 4000);
    } catch (e) { setErr(T('Neizdevās izveidot maksājumu. Mēģini vēlreiz.')); setBusy(false); }
  };

  return (
    <ModalShell onClose={onClose}>
        <div className="spread" style={{ marginBottom: 18 }}>
          <h3 style={{ fontSize: 19 }}>{T('Pievienot līdzekļus')}</h3>
          <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={onClose}><Icon d={I.x} size={18} /></button>
        </div>
        {phase === 'done' ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--green-tint)', border: '1px solid #BBF7D0', borderRadius: 10, padding: '16px 18px', color: '#166534', fontSize: 14, fontWeight: 540 }}>
            <Icon d={I.check} size={18} sw={2.4} /> {T('Maksājums saņemts — līdzekļi pievienoti.')}
          </div>
        ) : phase === 'waiting' ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--accent-tint)', border: '1px solid var(--accent-tint-2)', borderRadius: 10, padding: '14px 16px', color: 'var(--accent-700)', fontSize: 13.5, lineHeight: 1.5 }}>
              <span className="spin" style={{ flex: 'none', width: 16, height: 16, border: '2px solid var(--accent)', borderTopColor: 'transparent', borderRadius: '50%' }} />
              {T('Gaidām maksājuma apstiprinājumu… Šo logu var atstāt atvērtu.')}
            </div>
            <a className="btn btn-secondary btn-block" href={invoiceUrl} target="_blank" rel="noopener noreferrer"><Icon d={I.link} size={16} /> {T('Atvērt maksājuma lapu vēlreiz')}</a>
            <p className="muted" style={{ fontSize: 12, textAlign: 'center', lineHeight: 1.4 }}>{T('Kad maksājums būs apstiprināts, atlikums tiks atjaunināts automātiski.')}</p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="field">
              <label>{T('Summa')} (€)</label>
              <div style={{ position: 'relative' }}>
                <span style={{ position: 'absolute', left: 13, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)', fontWeight: 540 }}>€</span>
                <input className="input tnum" style={{ paddingLeft: 26 }} type="number" step="10" min={MIN} value={amount} onChange={(e) => setAmount(e.target.value)} />
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              {[50, 100, 500, 1000].map((v) => (
                <button key={v} className="btn btn-secondary btn-sm" style={{ flex: 1 }} onClick={() => setAmount(String(v))}>€{v}</button>
              ))}
            </div>
            {err && <div style={{ background: '#FEF2F2', border: '1px solid #FECACA', color: '#B91C1C', borderRadius: 'var(--r)', padding: '10px 13px', fontSize: 13.5 }}>{err}</div>}
            <button className="btn btn-primary btn-lg btn-block" disabled={busy} onClick={submit}>{busy ? T('Apstrādā…') : T('Turpināt uz maksājumu') + ' · ' + eur0(+amount || 0)}</button>
            <p className="muted" style={{ fontSize: 12, textAlign: 'center', lineHeight: 1.4 }}>{T('Maksājumu droši apstrādā NOWPayments. Atlikums tiek ieskaitīts eiro.')}</p>
          </div>
        )}
    </ModalShell>
  );
}

/* ===== SUBMISSION REVIEW ===== */
function SubmissionReview({ subs, reload }) {
  const lang = useLang();
  // Pārbaudīt opens the clip on its own platform in a new window/tab.
  const openPreview = (s) => { if (s && s.url) window.open(s.url, '_blank', 'noopener'); };
  // Guidelines review happens immediately on submission — the brand approves
  // that the clip meets guidelines here (separate from the 24h views validation
  // that happens later on the campaign board).
  const pending = (subs || []).filter((s) => s.review === 'pending');
  const [toast, setToast] = useState(null);
  const [rejecting, setRejecting] = useState(null); // submission pending rejection
  const [reasonOpt, setReasonOpt] = useState('');   // 'guidelines' | 'quality' | 'custom'
  const [reasonText, setReasonText] = useState('');
  const [skipReason, setSkipReason] = useState(false);
  const [busy, setBusy] = useState(false);
  const REASONS = { guidelines: 'Neatbilst vadlīnijām', quality: 'Zema kvalitāte' };
  const act = async (s, approve) => {
    if (!approve) { setRejecting(s); setReasonOpt(''); setReasonText(''); setSkipReason(false); return; }
    setToast({ approve: true, name: s.clipper });
    try {
      if (window.KlipzyFirebase) await window.KlipzyFirebase.updateSubmission(s.id, { reviewStatus: 'approved', frozen: false });
    } catch (_) {}
    if (reload) reload();
    setTimeout(() => setToast(null), 2600);
  };
  const confirmReject = async () => {
    const s = rejecting;
    const reason = skipReason ? '' : (reasonOpt === 'custom' ? reasonText.trim() : (REASONS[reasonOpt] || ''));
    setBusy(true);
    try {
      if (window.KlipzyFirebase) {
        await window.KlipzyFirebase.updateSubmission(s.id, { reviewStatus: 'rejected', frozen: true, rejectReason: reason || null });
        const base = 'Tavi skatījumi kampaņā “' + (s.campaignName || '') + '” tika noraidīti.';
        const withReason = reason ? base + ' Iemesls: ' + reason + '.' : base;
        await window.KlipzyFirebase.createNotification({ toUid: s.clipperUid, toRole: 'clipper', kind: 'rejection', severity: 'critical', submissionId: s.id, disputable: true, message: withReason + ' Ja nepiekrīti, vari iesniegt strīdu.' });
      }
    } catch (_) {}
    setBusy(false); setRejecting(null);
    setToast({ approve: false, name: s.clipper });
    if (reload) reload();
    setTimeout(() => setToast(null), 2600);
  };
  return (
    <div className="fade-in">
      <TopBar title={tr('Iesniegtie klipi', lang)} subtitle={pending.length + ' ' + tr('klipi gaida vadlīniju apstiprinājumu', lang)} />
      <div style={{ padding: 32, maxWidth: 880 }}>
        {pending.length === 0 ? (
          <div className="card" style={{ padding: 60, textAlign: 'center' }}>
            <div style={{ width: 56, height: 56, borderRadius: 999, background: 'var(--green-tint)', color: 'var(--green)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}><Icon d={I.check} size={28} sw={2.2} /></div>
            <div style={{ fontWeight: 600, fontSize: 17 }}>{tr('Viss pārbaudīts!', lang)}</div>
            <p className="muted" style={{ fontSize: 14, marginTop: 6 }}>{tr('Nav neviena klipa, kas gaidītu vadlīniju apstiprinājumu.', lang)}</p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {pending.map((s) => (
              <div key={s.id} className="card fade-in" style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 18 }}>
                <GradTile grad={['#2563EB', '#3B82F6']} radius={10} style={{ width: 56, height: 72, flex: 'none', display: 'grid', placeItems: 'center' }}><Icon d={I.play} size={18} fill="#fff" stroke="none" /></GradTile>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 15, fontWeight: 600 }}>{s.clipper}</span>
                    {s.platformLabel ? <Platform name={s.platformLabel} /> : null}
                    <span className="muted" style={{ fontSize: 12.5 }}>· {s.campaignName}</span>
                  </div>
                  <a href={s.url} target="_blank" rel="noopener noreferrer" className="muted" style={{ fontSize: 13, marginTop: 4, display: 'flex', alignItems: 'center', gap: 6, wordBreak: 'break-all' }}><Icon d={I.link} size={13} /> {s.url}</a>
                </div>
                <div style={{ textAlign: 'right', marginRight: 4 }}>
                  <div className="eyebrow" style={{ fontSize: 10 }}>Skatījumi</div>
                  <div className="tnum" style={{ fontSize: 18, fontWeight: 600 }}>{numLv(s.views || 0)}</div>
                </div>
                <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                  <button className="btn btn-secondary btn-sm" style={{ color: 'var(--red)' }} onClick={() => act(s, false)}><Icon d={I.x} size={16} /> {tr('Noraidīt', lang)}</button>
                  <button className="btn btn-secondary btn-sm" onClick={() => openPreview(s)}><Icon d={I.play} size={15} /> {tr('Pārbaudīt', lang)}</button>
                  <button className="btn btn-primary btn-sm" onClick={() => act(s, true)}><Icon d={I.check} size={16} /> {tr('Apstiprināt', lang)}</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {rejecting && (
        <ModalShell onClose={() => setRejecting(null)} width={440}>
          <div className="spread" style={{ marginBottom: 6 }}>
            <h3 style={{ fontSize: 19 }}>{tr('Noraidīt klipu', lang)}</h3>
            <button className="btn btn-ghost btn-sm" style={{ padding: 6 }} onClick={() => setRejecting(null)}><Icon d={I.x} size={18} /></button>
          </div>
          <p className="muted" style={{ fontSize: 13.5, marginBottom: 16 }}>{tr('Klipotājs redzēs norādīto iemeslu.', lang)}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[['guidelines', tr('Neatbilst vadlīnijām', lang)], ['quality', tr('Zema kvalitāte', lang)], ['custom', tr('Cits iemesls', lang)]].map(([k, label]) => (
              <label key={k} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: skipReason ? 'not-allowed' : 'pointer', opacity: skipReason ? 0.45 : 1, border: '1px solid ' + (reasonOpt === k ? 'var(--accent)' : 'var(--border-strong)'), background: reasonOpt === k ? 'var(--accent-tint)' : '#fff', borderRadius: 10, padding: '11px 14px', fontSize: 14, fontWeight: 500 }}>
                <input type="radio" name="rej" disabled={skipReason} checked={reasonOpt === k} onChange={() => setReasonOpt(k)} style={{ accentColor: 'var(--accent)' }} />
                {label}
              </label>
            ))}
            {reasonOpt === 'custom' && !skipReason && (
              <textarea className="input" rows="3" style={{ resize: 'vertical', fontFamily: 'inherit' }} value={reasonText} onChange={(e) => setReasonText(e.target.value)} placeholder={tr('Ieraksti iemeslu…', lang)} />
            )}
            <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, cursor: 'pointer', color: 'var(--text-2)', marginTop: 2 }}>
              <input type="checkbox" checked={skipReason} onChange={(e) => setSkipReason(e.target.checked)} style={{ accentColor: 'var(--accent)' }} />
              {tr('Bez iemesla / izlaist', lang)}
            </label>
            <button className="btn btn-primary btn-lg btn-block" style={{ background: 'var(--red)', borderColor: 'var(--red)', marginTop: 4 }} disabled={busy || (!skipReason && !reasonOpt) || (!skipReason && reasonOpt === 'custom' && !reasonText.trim())} onClick={confirmReject}>
              {busy ? tr('Apstrādā…', lang) : tr('Noraidīt klipu', lang)}
            </button>
          </div>
        </ModalShell>
      )}

      {toast && (
        <div className="fade-in" style={{ position: 'fixed', bottom: 26, left: '50%', transform: 'translateX(-50%)', background: 'var(--text)', color: '#fff', padding: '12px 18px', borderRadius: 10, fontSize: 14, fontWeight: 500, display: 'flex', alignItems: 'center', gap: 10, boxShadow: 'var(--sh-lg)', zIndex: 60 }}>
          <Icon d={toast.approve ? I.check : I.x} size={16} stroke={toast.approve ? '#4ADE80' : '#FCA5A5'} sw={2.4} />
          Klips no {toast.name} {toast.approve ? 'apstiprināts' : 'noraidīts'}
        </div>
      )}
    </div>
  );
}

function MiniBudget({ label, value, color }) {
  return (
    <div style={{ background: '#F8FAFC', borderRadius: 9, padding: '9px 11px' }}>
      <div className="eyebrow" style={{ fontSize: 9.5 }}>{label}</div>
      <div className="tnum" style={{ fontSize: 14.5, fontWeight: 600, marginTop: 3, color: color || 'var(--text)' }}>{value}</div>
    </div>
  );
}

function Toast({ msg, onClose }) {
  if (!msg) return null;
  const el = (
    <div style={{ position: 'fixed', right: 24, bottom: 24, zIndex: 95, maxWidth: 360, background: 'var(--text)', color: '#fff', borderRadius: 12, padding: '13px 16px', fontSize: 13.5, lineHeight: 1.45, boxShadow: 'var(--sh-lg)', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <span style={{ color: '#4ADE80', flex: 'none', marginTop: 1 }}><Icon d={I.check} size={17} sw={2.4} /></span>
      <span style={{ flex: 1 }}>{msg}</span>
      {onClose && <button onClick={onClose} style={{ flex: 'none', border: 'none', background: 'transparent', color: 'rgba(255,255,255,.7)', cursor: 'pointer', padding: 0, marginLeft: 4, display: 'inline-flex' }}><Icon d={I.x} size={16} /></button>}
    </div>
  );
  return ReactDOM.createPortal(el, document.body);
}

function ModalShell({ onClose, children, width = 420 }) {
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, []);
  // Portal to <body> so the fixed overlay anchors to the viewport, not a
  // transformed dashboard ancestor (.fade-in animates transform).
  const el = (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,.5)', display: 'grid', placeItems: 'center', zIndex: 85, padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} className="card" style={{ width, maxWidth: 'calc(100vw - 32px)', maxHeight: '90vh', overflowY: 'auto', padding: 26, boxSizing: 'border-box' }}>
        {children}
      </div>
    </div>
  );
  return ReactDOM.createPortal(el, document.body);
}

Object.assign(window, { BrandApp, SubmissionReview, ModalShell });