(() => {
const DS = window.LeonardoSousaBJJDesignSystem_2cc6b8;
const { Card, Button, Badge, Chip, Icon, Dialog, Input, Select, KpiCard } = DS;
const A = window.LSAdmin;
const CATS = ['Equipe parceira', 'Loja', 'Saúde', 'Nutrição', 'Serviços'];
const CAT_ICON = { 'Equipe parceira': 'handshake', Loja: 'shopping-bag', Saúde: 'heart-pulse', Nutrição: 'apple', Serviços: 'briefcase' };

A.partners = A.partners || [
  { id: 'pa1', nome: 'Equipe Tatame Norte', cat: 'Equipe parceira', desc: 'Intercâmbio de treinos e open mat mensal entre as equipes.', beneficio: 'Aula livre para alunos LS BJJ', cupom: '', tel: '(19) 99876-5432', insta: 'tatamenorte', site: '', end: 'Av. Brasil, 800 · Campinas – SP' },
  { id: 'pa2', nome: 'Arena Kimonos', cat: 'Loja', desc: 'Kimonos, faixas e rashguards das principais marcas.', beneficio: '10% de desconto em kimonos e faixas', cupom: 'LSBJJ10', tel: '(11) 97777-1212', insta: 'arenakimonos', site: 'arenakimonos.com.br', end: '' },
  { id: 'pa3', nome: 'FisioSport Clínica', cat: 'Saúde', desc: 'Fisioterapia esportiva e prevenção de lesões para lutadores.', beneficio: 'Avaliação gratuita + 15% nas sessões', cupom: '', tel: '(11) 98888-3434', insta: 'fisiosport', site: '', end: 'Rua Augusta, 1350 · Consolação, São Paulo – SP' },
  { id: 'pa4', nome: 'NutriFight', cat: 'Nutrição', desc: 'Nutricionista esportiva com foco em corte de peso para campeonatos.', beneficio: 'Primeira consulta com 20% off', cupom: 'TATAME20', tel: '(11) 96666-5656', insta: 'nutrifight', site: '', end: '' },
];
const BLANK = { nome: '', cat: 'Loja', desc: '', beneficio: '', cupom: '', tel: '', insta: '', site: '', end: '' };

function PartnerForm({ item, onClose, onSave }) {
  const [f, setF] = React.useState(item);
  const set = (k) => (v) => setF((x) => ({ ...x, [k]: v && v.target ? v.target.value : v }));
  return (
    <Dialog open title={item.id ? `Editar ${item.nome}` : 'Novo parceiro'} description="Aparece para os alunos no app, em Perfil › Parceiros." onClose={onClose} width={600}
      footer={<><Button variant="secondary" onClick={onClose}>Cancelar</Button><Button disabled={!f.nome.trim()} onClick={() => onSave(f)}>{item.id ? 'Salvar' : 'Adicionar parceiro'}</Button></>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 12 }}>
        <Input label="Nome" required value={f.nome} onChange={set('nome')} />
        <Select label="Categoria" options={CATS} value={f.cat} onChange={set('cat')} />
        <Input label="Descrição" multiline rows={2} value={f.desc} onChange={set('desc')} style={{ gridColumn: 'span 2' }} />
        <Input label="Benefício para alunos" iconLeft="gift" value={f.beneficio} onChange={set('beneficio')} placeholder="Ex.: 10% de desconto" />
        <Input label="Cupom (opcional)" iconLeft="ticket" value={f.cupom} onChange={set('cupom')} placeholder="LSBJJ10" />
        <Input label="WhatsApp" iconLeft="message-circle" value={f.tel} onChange={set('tel')} placeholder="(11) 90000-0000" />
        <Input label="Instagram" iconLeft="at-sign" value={f.insta} onChange={set('insta')} placeholder="usuario" />
        <Input label="Site" iconLeft="globe" value={f.site} onChange={set('site')} placeholder="site.com.br" />
        <Input label="Endereço" iconLeft="map-pin" value={f.end} onChange={set('end')} placeholder="Opcional — abre no Maps" />
      </div>
    </Dialog>
  );
}

function LinkBtn({ href, icon, children }) {
  return <a href={href} target="_blank" rel="noopener" style={{ textDecoration: 'none' }}><Button size="sm" variant="secondary" iconLeft={icon}>{children}</Button></a>;
}

function PartnersPage({ role, toast }) {
  const [items, setItems] = React.useState(A.partners);
  const [cat, setCat] = React.useState('Todos');
  const [form, setForm] = React.useState(null);
  const [del, setDel] = React.useState(null);
  const admin = role === 'admin';
  const sync = (l) => { A.partners = l; setItems(l); };
  const list = items.filter((p) => cat === 'Todos' || p.cat === cat);
  const save = (f) => { if (f.id) { sync(items.map((x) => (x.id === f.id ? f : x))); toast('Parceiro atualizado'); } else { sync([...items, { ...f, id: 'pa' + Date.now() }]); toast(`${f.nome} adicionado`); } setForm(null); };
  const remove = () => { sync(items.filter((x) => x.id !== del.id)); toast(`${del.nome} removido`); setDel(null); };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Grid cols="repeat(auto-fit, minmax(170px, 1fr))">
        <KpiCard label="Parceiros" value={items.length} icon="handshake" />
        <KpiCard label="Equipes parceiras" value={items.filter((p) => p.cat === 'Equipe parceira').length} icon="shield" />
        <KpiCard label="Cupons ativos" value={items.filter((p) => p.cupom).length} icon="ticket" />
      </Grid>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
        {['Todos', ...CATS].map((c) => <Chip key={c} selected={cat === c} onClick={() => setCat(c)} icon={CAT_ICON[c]}>{c}</Chip>)}
        <div style={{ flex: 1 }} />
        {admin ? <Button iconLeft="plus" onClick={() => setForm(BLANK)}>Novo parceiro</Button> : null}
      </div>
      <Grid cols="repeat(auto-fill, minmax(320px, 1fr))">
        {list.map((p) => (
          <Card key={p.id} padding={20} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ width: 120, height: 88, flexShrink: 0, borderRadius: 14, background: 'var(--surface-sunken)', position: 'relative', overflow: 'hidden' }}>
                {React.createElement('image-slot', { id: `partner-${p.id}`, shape: 'rounded', radius: '14', fit: 'contain', placeholder: 'Logo do parceiro', style: { position: 'absolute', inset: 0, width: '100%', height: '100%' } })}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--text-strong)' }}>{p.nome}</div>
                <Badge size="sm" icon={CAT_ICON[p.cat]} style={{ marginTop: 6 }}>{p.cat}</Badge>
              </div>
              {admin ? <CardActions onEdit={() => setForm(p)} onDelete={() => setDel(p)} /> : null}
            </div>
            <div style={{ fontSize: 13, lineHeight: '19px', color: 'var(--text-muted)', textWrap: 'pretty' }}>{p.desc}</div>
            {p.beneficio ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 12, background: 'var(--brand-primary-soft)' }}>
                <Icon name="gift" size={16} color="var(--brand-primary)" />
                <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>{p.beneficio}</span>
                {p.cupom ? <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 700, padding: '3px 8px', borderRadius: 6, background: '#fff', color: 'var(--brand-primary)', border: '1px dashed var(--brand-primary)' }}>{p.cupom}</span> : null}
              </div>
            ) : null}
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {p.tel ? <LinkBtn href={waLink(p.tel, 'Olá! Sou aluno da Leonardo Sousa BJJ.')} icon="message-circle">WhatsApp</LinkBtn> : null}
              {p.insta ? <LinkBtn href={`https://instagram.com/${p.insta}`} icon="instagram">Instagram</LinkBtn> : null}
              {p.site ? <LinkBtn href={`https://${p.site.replace(/^https?:\/\//, '')}`} icon="globe">Site</LinkBtn> : null}
              {p.end ? <LinkBtn href={A.mapsUrl(p.end)} icon="map-pin">Maps</LinkBtn> : null}
            </div>
          </Card>
        ))}
      </Grid>
      {form ? <PartnerForm item={form} onClose={() => setForm(null)} onSave={save} /> : null}
      {del ? <ConfirmDelete title="Remover parceiro?" description={`${del.nome} deixa de aparecer para os alunos.`} onCancel={() => setDel(null)} onConfirm={remove} /> : null}
    </div>
  );
}

Object.assign(window, { PartnersPage });
})();