// Studios & accounts: studios (name, colour, logo) group store accounts; each account is a Google Play service account
// (one JSON key; it can be invited to several Play developer accounts) or an App Store Connect team key (key id,
// issuer id, .p8). Keys live in the machine's credential profiles (~/.storebound, shared with the CLI);
// the app keeps a label, the studio and the profile name only. Per account: a health
// check (key works / permission missing / revoked, with the fix) and "Import apps" (every app the key can see).
import { type MenuInput, useContextMenu, useMenuButton } from '../ui/ContextMenu';
import { copyToast } from '../ui/app-menu';
import { type FormEvent, useEffect, useState } from 'react';
import { type Account, type AccountCheck, api, errorText, STUDIO_COLORS, type Studio, type StudioColor } from '../api';
import { type Key, t } from '../i18n';
import { ago } from '../lib/format';
import { withIgnored } from '../lib/identity';
import { type AccountHealth, useData, useReadState } from '../store';
import { accountCheckKey, importKey } from '../lib/read-registry';
import { ImportAppsButton, TestAccountButton } from '../ui/ReadButtons';
import { Icon, StoreGlyph } from '../ui/icons';
import { Chip, Notice, StudioMark } from '../ui/kit';
import { EmptyState, PageHeader, Section, StatTile } from '../ui/ds';
import '../styles/accounts.css';
import type { Tone } from '../lib/model';

const STATUS: Record<AccountCheck['status'], [Tone, Key]> = {
  ok: ['ok', 'acct.ok'], 'no-apps': ['warn', 'acct.noApps'], permission: ['warn', 'acct.permission'], revoked: ['bad', 'acct.revoked'], 'api-disabled': ['warn', 'acct.apiDisabled'], error: ['bad', 'acct.error'],
};

export function HealthChip({ h }: { h: AccountHealth | undefined }) {
  if (!h) return <Chip tone="neutral">{t('acct.notTested')}</Chip>;
  if (h.error || !h.check) return <span title={h.error}><Chip tone="bad">{t('acct.error')}</Chip></span>;
  const [tone, key] = STATUS[h.check.status];
  return <span title={h.check.message}><Chip tone={tone}>{t(key)}</Chip></span>;
}

export function Swatches({ value, onChange, name }: { value: StudioColor; onChange: (c: StudioColor) => void; name: string }) {
  return (
    <div className="swatches" role="radiogroup" aria-label={t('studio.color')}>
      {STUDIO_COLORS.map(c => (
        <button key={c} type="button" role="radio" aria-checked={value === c} className={`swatch studio-${c}`} onClick={() => onChange(c)} aria-label={t(`color.${c}` as Key)} title={t(`color.${c}` as Key)}>
          {value === c && <Icon name="check" />}
        </button>
      ))}
      <span className="sr">{name}</span>
    </div>
  );
}

function AccountRow({ a, busy, setBusy, onError }: { a: Account; busy: string | null; setBusy: (b: string | null) => void; onError: (e: string | null) => void }) {
  const d = useData();
  const [edit, setEdit] = useState(false);
  const [label, setLabel] = useState(a.label);
  const [studio, setStudio] = useState(a.studio ?? '');
  const [dev, setDev] = useState(a.developerId ?? '');
  const devOk = !dev.trim() || /^\d{1,25}$/.test(dev.trim());
  const h = d.accountHealth[a.id];
  const list = d.storeApps[a.id];
  const ignored = d.overrides.ignored.includes(`account:${a.id}`);
  const used = d.projects.filter(p => p.playAccount === a.id || p.appleAccount === a.id).length;
  const run = async (key: string, fn: () => Promise<unknown>) => {
    setBusy(key); onError(null);
    try { await fn(); } catch (e) { onError(errorText(e)); } finally { setBusy(null); }
  };
  const save = (e: FormEvent) => { e.preventDefault(); run(`ed-${a.id}`, async () => { await api.updateAccount(a.id, label, studio || null); if (a.kind === 'play' && a.profile && dev.trim() !== (a.developerId ?? '')) await api.setPlayDeveloper(a.id, dev.trim() || null); await d.reload(); setEdit(false); }); };
  const check = h?.check;
  // Test and Import of this account: busy from the read registry (Test all / Import apps make them busy too)
  const ck = useReadState(accountCheckKey(a.id));
  const im = useReadState(importKey(a.id));
  const cm = useContextMenu();
  const more = useMenuButton();
  const menu = (): MenuInput => [
      { label: t('acct.test'), icon: 'shield', disabled: ck.busy ? t('cm.busy') : false, onSelect: () => { d.checkAccount(a.id).catch(() => {}); } },
      { label: t('acct.import'), icon: 'download', disabled: im.busy ? t('cm.busy') : false, onSelect: () => { d.importApps(a.id).catch(() => {}); } },
      { label: t('acct.edit'), icon: 'edit', onSelect: () => setEdit(true) },
      'sep',
      { label: t('cm.copy'), icon: 'copy', submenu: [
        { label: t('cm.copyName'), icon: 'text', onSelect: () => copyToast(d, a.label) },
        check?.principal && { label: t('cm.copyPrincipal'), icon: 'key', shortcut: check.principal, onSelect: () => copyToast(d, check.principal!) },
        a.profile && { label: t('cm.copyProfile'), icon: 'folder', shortcut: a.profile, onSelect: () => copyToast(d, a.profile!) },
      ] },
      'sep',
      { label: ignored ? t('acct.unignore') : t('acct.ignore'), icon: ignored ? 'eye' : 'eyeOff', onSelect: () => { void d.updateOverrides(o => withIgnored(o, [`account:${a.id}`], !ignored)); } },
      { label: t('accounts.remove'), icon: 'trash', danger: true, disabled: busy ? t('cm.busy') : false, onSelect: () => run(`rm-${a.id}`, async () => { await api.removeAccount(a.id); await d.reload(); }) },
    ];
  return (
    <div className={`acct${ignored ? ' is-ignored' : ''}`} {...cm(menu)}>
      <div className="acct-row">
        <span className={`acct-glyph ${a.kind}`}><StoreGlyph store={a.kind === 'play' ? 'android' : 'ios'} /></span>
        <div className="acct-main">
          <div className="row" style={{ gap: 8 }}><span className="strong">{a.label}</span><HealthChip h={h} />{ignored && <Chip tone="neutral" icon="eyeOff">{t('acct.ignored')}</Chip>}</div>
          <div className="small muted">
            {a.kind === 'play' ? t('acct.kindPlay') : t('acct.kindApple')}
            {' · '}{a.profile ? <span className="mono-id selectable" title="~/.storebound">{t('acct.profile', { name: a.profile })}</span> : t('acct.noProfile')}
            {' · '}{list ? t('acct.appsRead', { count: list.value.apps.length, when: ago(list.at) }) : t('acct.notImported')}
            {used ? ` · ${t('acct.folders', { count: used })}` : ''}
            {a.kind === 'play' && (a.developerId ? <> · <span className="mono-id selectable" title={t('acct.devIdHint')}>{t('acct.devId', { id: a.developerId })}</span></> : <> · <span title={t('acct.devIdHint')}>{t('acct.noDevId')}</span></>)}
            {check?.principal ? <> · <span className="mono-id selectable">{check.principal}</span></> : null}
          </div>
        </div>
        <div className="actions">
          <TestAccountButton account={a.id} label={t('acct.test')} />
          <ImportAppsButton account={a.id} label={t('acct.import')} />
          <button className="btn btn-sm btn-ghost btn-icon" onClick={() => setEdit(x => !x)} aria-expanded={edit} aria-label={t('acct.editAria', { label: a.label })} title={t('acct.edit')}><Icon name="edit" /></button>
          <button className="btn btn-sm btn-ghost btn-icon" {...more(menu)} aria-label={t('cm.more')} title={t('cm.more')}><Icon name="more" /></button>
        </div>
      </div>
      {edit && (
        <form className="acct-edit" onSubmit={save}>
          <div className="field"><label htmlFor={`al-${a.id}`}>{t('accounts.label')}</label><input id={`al-${a.id}`} className="input" value={label} onChange={e => setLabel(e.target.value)} maxLength={60} /></div>
          <div className="field"><label htmlFor={`as-${a.id}`}>{t('studio.studio')}</label>
            <select id={`as-${a.id}`} className="input" value={studio} onChange={e => setStudio(e.target.value)}>
              <option value="">{t('studio.none')}</option>
              {d.studios.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
            </select></div>
          {a.kind === 'play' && a.profile && <div className="field"><label htmlFor={`ad-${a.id}`}>{t('acct.devIdLabel')}</label>
            <input id={`ad-${a.id}`} className="input mono" inputMode="numeric" value={dev} onChange={e => setDev(e.target.value)} placeholder="5550000000000000001" aria-invalid={!devOk} aria-describedby={`adh-${a.id}`} />
            <small id={`adh-${a.id}`} className="muted">{t('acct.devIdHint')}</small></div>}
          <div className="actions"><button className="btn btn-primary btn-sm" type="submit" disabled={!label.trim() || !devOk || !!busy}><Icon name="check" />{t('common.save')}</button><button type="button" className="btn btn-sm btn-ghost" onClick={() => setEdit(false)}>{t('common.cancel')}</button></div>
        </form>
      )}
      {check && check.status !== 'ok' && check.fix && (
        <div className="acct-fix">
          <Notice tone={check.status === 'revoked' ? 'bad' : 'warn'} action={check.docs ? <button className="btn btn-sm" onClick={() => api.openExternal(check.docs!).catch(e => onError(errorText(e)))}><Icon name="external" />{t('acct.openFix')}</button> : undefined}>
            <b>{check.message}</b><br />{check.fix}
          </Notice>
        </div>
      )}
      {h?.error && <div className="acct-fix"><Notice tone="bad">{h.error}</Notice></div>}
    </div>
  );
}

function StudioCard({ s, accounts, focus }: { s: Studio | null; accounts: Account[]; focus: boolean }) {
  const d = useData();
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [edit, setEdit] = useState(false);
  const [name, setName] = useState(s?.name ?? '');
  const [color, setColor] = useState<StudioColor>(s?.color ?? 'indigo');
  const apps = d.apps.filter(a => !a.ignored && (a.studio ?? null) === (s?.id ?? null));
  const storeOnly = apps.filter(a => !a.project).length;
  const act = async (key: string, fn: () => Promise<unknown>) => { setBusy(key); setError(null); try { await fn(); await d.reload(); } catch (e) { setError(errorText(e)); } finally { setBusy(null); } };
  const id = s ? `studio-${s.id}` : 'studio-none';
  const more = useMenuButton();
  useEffect(() => { if (focus) document.getElementById(id)?.scrollIntoView({ block: 'start' }); }, [focus, id]);
  return (
    <section className={`ds-sec studio-card${focus ? ' focus' : ''}`} id={id} aria-labelledby={`${id}-h`}>
      <div className="card-head">
        <div className="row" style={{ gap: 12, minWidth: 0 }}>
          <StudioMark studio={s} size="lg" />
          <div className="stack" style={{ gap: 2, minWidth: 0 }}>
            <h2 id={`${id}-h`}>{s?.name ?? t('studio.none')}</h2>
            <div className="sub">{s ? t('studio.counts', { count: accounts.length, apps: apps.length, store: storeOnly }) : t('studio.noneSub')}</div>
          </div>
        </div>
        {s && (
          <div className="actions">
            <button className="btn btn-sm btn-ghost" onClick={() => setEdit(x => !x)} aria-expanded={edit}><Icon name="edit" />{t('studio.edit')}</button>
            <button className="btn btn-sm btn-ghost btn-icon" {...more(() => [
              { label: t('studio.logo'), icon: 'image', disabled: busy ? t('cm.busy') : false, onSelect: () => { void act('logo', () => api.studioLogo(s.id)); } },
              s.logo && { label: t('studio.logoClear'), icon: 'x', disabled: busy ? t('cm.busy') : false, onSelect: () => { void act('logo', () => api.studioLogo(s.id, true)); } },
              'sep',
              { label: t('studio.remove'), icon: 'trash', danger: true, disabled: busy ? t('cm.busy') : false, onSelect: () => { void act('rm', () => api.removeStudio(s.id)); } },
            ])} aria-label={t('cm.more')} title={t('cm.more')}><Icon name="more" /></button>
          </div>
        )}
      </div>
      {s && edit && (
        <form className="card-body studio-edit" onSubmit={e => { e.preventDefault(); act('save', async () => { await api.saveStudio(s.id, name, color); setEdit(false); }); }}>
          <div className="field"><label htmlFor={`${id}-n`}>{t('studio.name')}</label><input id={`${id}-n`} className="input" value={name} onChange={e => setName(e.target.value)} maxLength={48} /></div>
          <div className="field"><span className="legend">{t('studio.color')}</span><Swatches value={color} onChange={setColor} name={name} /></div>
          <div className="actions"><button className="btn btn-primary btn-sm" type="submit" disabled={!name.trim() || !!busy}><Icon name="check" />{t('common.save')}</button></div>
        </form>
      )}
      {error && <div className="card-body"><Notice tone="bad">{error}</Notice></div>}
      {accounts.length ? <div className="acct-list">{accounts.map(a => <AccountRow key={a.id} a={a} busy={busy} setBusy={setBusy} onError={setError} />)}</div>
        : <div className="card-body"><p className="small muted">{s ? t('studio.noAccounts') : t('studio.allAssigned')}</p></div>}
    </section>
  );
}

export function Accounts({ focus }: { focus?: string }) {
  const d = useData();
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState<string | null>(null);
  const [studioName, setStudioName] = useState('');
  const [studioColor, setStudioColor] = useState<StudioColor>('indigo');
  const [playLabel, setPlayLabel] = useState('');
  const [playStudio, setPlayStudio] = useState('');
  const [appleLabel, setAppleLabel] = useState('');
  const [appleStudio, setAppleStudio] = useState('');
  const [keyId, setKeyId] = useState('');
  const [issuerId, setIssuerId] = useState('');

  const act = async (key: string, fn: () => Promise<Account | Studio | null | void>, ok?: (r: Account | Studio) => string) => {
    setBusy(key); setError(null);
    try {
      const r = await fn();
      if (r && ok) d.toast({ kind: 'ok', title: ok(r), detail: 'kind' in r ? t('accounts.savedDetail') : undefined });
      await d.reload();
      return r;
    } catch (e) { setError(errorText(e)); } finally { setBusy(null); }
  };
  const addStudio = () => act('studio', async () => { const s = await api.saveStudio(null, studioName, studioColor); setStudioName(''); return s; }, r => t('studio.added', { name: (r as Studio).name }));
  const addPlay = () => act('play', async () => { const a = await api.addPlayAccount(playLabel, playStudio || null); if (a) setPlayLabel(''); return a; }, r => t('accounts.saved', { label: (r as Account).label }));
  const addApple = () => act('apple', async () => { const a = await api.addAppleAccount(appleLabel, keyId, issuerId, appleStudio || null); if (a) { setAppleLabel(''); setKeyId(''); setIssuerId(''); } return a; }, r => t('accounts.saved', { label: (r as Account).label }));
  const unassigned = d.accounts.filter(a => !a.studio || !d.studios.some(s => s.id === a.studio));
  const studioSelect = (id: string, value: string, set: (v: string) => void) => (
    <div className="field"><label htmlFor={id}>{t('studio.studio')}</label>
      <select id={id} className="input" value={value} onChange={e => set(e.target.value)}>
        <option value="">{t('studio.none')}</option>
        {d.studios.map(s => <option key={s.id} value={s.id}>{s.name}</option>)}
      </select></div>
  );

  return (
    <div className="page scr-accounts">
      <PageHeader icon="key" eyebrow={t('v2cfg.workspace')} title={t('nav.accounts')} subtitle={t('accounts.leadStudios')} actions={<>
        <TestAccountButton className="btn" label={t('acct.testAll')} />
        <ImportAppsButton className="btn btn-primary" />
      </>} />
      {d.accounts.length > 0 && <div className="ds-grid acct-kpis">
        <StatTile icon="building" label={t('v2cfg.studios')} value={d.studios.length} />
        <StatTile icon="key" label={t('v2cfg.accounts')} value={d.accounts.length} sub={t('v2cfg.perStore', { play: d.accounts.filter(a => a.kind === 'play').length, apple: d.accounts.filter(a => a.kind === 'apple').length })} />
        <StatTile icon="check" tone="ok" label={t('v2cfg.keysWork')} value={d.accounts.filter(a => d.accountHealth[a.id]?.check?.status === 'ok').length} />
        <StatTile icon="alert" tone={d.accounts.some(a => { const h = d.accountHealth[a.id]; return !!h && (!!h.error || (!!h.check && h.check.status !== 'ok')); }) ? 'bad' : undefined} label={t('v2cfg.keysFailing')} value={d.accounts.filter(a => { const h = d.accountHealth[a.id]; return !!h && (!!h.error || (!!h.check && h.check.status !== 'ok')); }).length} />
      </div>}
      {error && <Notice tone="bad">{error}</Notice>}
      {!d.accounts.length && !d.studios.length && <Section><EmptyState icon="key"><b>{t('accounts.emptyTitle')}</b> {t('accounts.emptyTextStudios')}</EmptyState></Section>}
      {d.studios.map(s => <StudioCard key={s.id} s={s} accounts={d.accounts.filter(a => a.studio === s.id)} focus={focus === s.id} />)}
      {(unassigned.length > 0 || !d.studios.length) && d.accounts.length > 0 && <StudioCard s={null} accounts={unassigned} focus={focus === 'none'} />}

      <div className="acct-add">
        <Section title={t('studio.new')} icon="building" sub={t('studio.newSub')}>
          <form className="form" onSubmit={e => { e.preventDefault(); addStudio(); }}>
            <div className="field"><label htmlFor="studio-name">{t('studio.name')}</label><input id="studio-name" className="input" value={studioName} onChange={e => setStudioName(e.target.value)} maxLength={48} placeholder={t('studio.namePlaceholder')} autoComplete="off" /></div>
            <div className="field"><span className="legend">{t('studio.color')}</span><Swatches value={studioColor} onChange={setStudioColor} name={studioName} /></div>
            <div><button className="btn btn-primary" type="submit" disabled={!studioName.trim() || !!busy}><Icon name="plus" />{t('studio.add')}</button></div>
          </form>
        </Section>
        <Section title="Google Play" icon="key" sub={t('accounts.playSubMany')}>
          <form className="form" onSubmit={e => { e.preventDefault(); addPlay(); }}>
            <div className="field"><label htmlFor="play-label">{t('accounts.label')}</label>
              <input id="play-label" className="input" type="text" value={playLabel} onChange={e => setPlayLabel(e.target.value)} placeholder={t('accounts.playPlaceholder')} maxLength={60} autoComplete="off" /></div>
            {studioSelect('play-studio', playStudio, setPlayStudio)}
            <p className="small muted">{t('accounts.playHow')}</p>
            <div><button className="btn btn-primary" type="submit" disabled={!playLabel.trim() || !!busy}><Icon name="key" />{t('accounts.choosePlay')}</button></div>
          </form>
        </Section>
        <Section title="App Store Connect" icon="key" sub={t('accounts.appleSubMany')}>
          <form className="form" onSubmit={e => { e.preventDefault(); addApple(); }}>
            <div className="field"><label htmlFor="apple-label">{t('accounts.label')}</label>
              <input id="apple-label" className="input" type="text" value={appleLabel} onChange={e => setAppleLabel(e.target.value)} placeholder={t('accounts.applePlaceholder')} maxLength={60} autoComplete="off" /></div>
            {studioSelect('apple-studio', appleStudio, setAppleStudio)}
            <div className="grid g2" style={{ gap: 12 }}>
              <div className="field"><label htmlFor="key-id">{t('accounts.keyId')}</label>
                <input id="key-id" className="input mono" type="text" value={keyId} onChange={e => setKeyId(e.target.value.toUpperCase())} placeholder="ABC123DEFG" maxLength={10} autoComplete="off" spellCheck={false} /></div>
              <div className="field"><label htmlFor="issuer-id">{t('accounts.issuerId')}</label>
                <input id="issuer-id" className="input mono" type="text" value={issuerId} onChange={e => setIssuerId(e.target.value)} placeholder="UUID" maxLength={36} autoComplete="off" spellCheck={false} /></div>
            </div>
            <div><button className="btn btn-primary" type="submit" disabled={!appleLabel.trim() || keyId.length !== 10 || issuerId.length < 36 || !!busy}><Icon name="key" />{t('accounts.chooseApple')}</button></div>
          </form>
        </Section>
      </div>
      <Notice tone="info" icon="shield">{t('accounts.safetyStudios')}</Notice>
    </div>
  );
}