import { AuditTimeline, CrudToolbar, DevCrudConsole, ManagementTable, Panel, RegistrationWorkbench, StatCard } from '@chego/ui';

const columns = [
  { key: 'campaign', label: 'Campanha' },
  { key: 'position', label: 'Posicao' },
  { key: 'budget', label: 'Orcamento', align: 'right' as const },
  { key: 'cpc', label: 'CPC', align: 'right' as const },
  { key: 'result', label: 'Resultado' },
  { key: 'status', label: 'Status' },
];

const rows = [
  { id: 'ads-1', cells: { campaign: <span className="font-bold text-slate-900">Burrata Premium</span>, position: 'Home destaque', budget: <span className="font-semibold text-slate-900">R$ 320,00</span>, cpc: <span className="font-semibold text-slate-900">R$ 1,40</span>, result: '118 cliques', status: { value: 'Ativa', tone: 'emerald', badge: true } } },
  { id: 'ads-2', cells: { campaign: <span className="font-bold text-slate-900">Almoco Executivo</span>, position: 'Categoria combos', budget: <span className="font-semibold text-slate-900">R$ 180,00</span>, cpc: <span className="font-semibold text-slate-900">R$ 0,90</span>, result: '47 conversoes', status: { value: 'Ativa', tone: 'sky', badge: true } } },
  { id: 'ads-3', cells: { campaign: <span className="font-bold text-slate-900">Noite da pizza</span>, position: 'Busca local', budget: <span className="font-semibold text-slate-900">R$ 0,00</span>, cpc: <span className="font-semibold text-slate-900">R$ 1,10</span>, result: 'Sem saldo', status: { value: 'Pausada', tone: 'amber', badge: true } } },
];

export default function AdsPage({
  searchParams,
}: {
  searchParams?: { mode?: string; record?: string };
}) {
  const mode = searchParams?.mode;
  const record = searchParams?.record;
  const shouldShowWorkbench = Boolean(mode && record);

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Campanhas ativas" value="2" hint="com entrega liberada" tone="emerald" />
        <StatCard label="Cliques" value="118" hint="turno atual" tone="sky" />
        <StatCard label="Conversoes" value="47" hint="pedidos atribuidos" tone="amber" />
        <StatCard label="Saldo publicitario" value="R$ 500" hint="disponivel para giro" tone="rose" />
      </section>

      <section className="grid gap-4 xl:grid-cols-4">
        <StatCard label="Ranking patrocinado" value="#2 local" hint="categoria pizzas" tone="emerald" />
        <StatCard label="ROAS" value="4,8x" hint="campanhas do mes" tone="sky" />
        <StatCard label="Restaurante patrocinado" value="Ativo" hint="home e busca" tone="amber" />
        <StatCard label="CPA medio" value="R$ 7,20" hint="por pedido atribuido" tone="rose" />
      </section>

      <Panel title="Anuncios patrocinados" eyebrow="Aquisicao paga">
        <CrudToolbar
          actions={[
            { label: 'Nova campanha', tone: 'primary', href: '/ads?mode=create&record=boost-launch' },
            { label: 'Editar campanha', tone: 'neutral', href: '/ads?mode=edit&record=ads-1' },
            { label: 'Excluir campanha', tone: 'neutral', href: '/ads?mode=delete&record=ads-3' },
          ]}
          filters={['status: ativa', 'posicao: home', 'orcamento > 0', 'periodo: hoje']}
        />
        <div className="mt-5">
          <ManagementTable
            columns={columns}
            rows={rows}
            pageLabel="Mostrando 1-3 de 3 campanhas"
            getRowActions={(row) => [
              { label: 'Visualizar', href: `/ads?mode=view&record=${row.id}` },
              { label: 'Editar', href: `/ads?mode=edit&record=${row.id}` },
              { label: 'Excluir', href: `/ads?mode=delete&record=${row.id}` },
            ]}
          />
        </div>
      </Panel>

      {shouldShowWorkbench ? (
        <RegistrationWorkbench
          eyebrow="Anuncios"
          title={mode === 'create' ? 'Campanha patrocinada' : `Campanha ${record}`}
          subtitle="Painel de monetizacao da loja para anuncios patrocinados, restaurante patrocinado, ranking pago e campanhas promocionais com meta de ROAS."
          profile="ADS REVENUE"
          stage={mode === 'create' ? 'criacao' : mode === 'edit' ? 'otimizacao' : mode === 'delete' ? 'encerramento' : 'consulta'}
          sections={[
            {
              title: 'Setup da campanha',
              description: 'Posicionamento, investimento e objetivo comercial.',
              fields: [
                { label: 'Objetivo', value: 'Aumentar pedidos no jantar e elevar ticket', hint: 'Vincular a categoria, item ou vitrine desejada.' },
                { label: 'Posicionamento', value: 'Home destaque, busca local e ranking patrocinado', hint: 'Combina awareness e conversão.' },
                { label: 'Orcamento', value: 'R$ 320,00 com limite diario de R$ 40,00', hint: 'Evita queimar verba cedo demais no dia.' },
                { label: 'Modelo de compra', value: 'CPC com meta de CPA e ROAS', hint: 'Base para otimização de mídia do parceiro.' },
              ],
            },
            {
              title: 'Monetizacao da visibilidade',
              description: 'Receita adicional da plataforma e crescimento da loja.',
              fields: [
                { label: 'Restaurante patrocinado', value: 'Elegivel por plano Pro + score operacional', hint: 'Libera vitrines premium com performance mínima.' },
                { label: 'Ranking pago', value: 'Subida controlada por bid e relevancia', hint: 'Nao destroi a experiencia organica do cliente.' },
                { label: 'Campanhas promocionais', value: 'Cupom + mídia + destaque de categoria', hint: 'Empurra conversão em janelas criticas.' },
                { label: 'ROI', value: 'ROAS 4,8x e CPA alvo R$ 7,20', hint: 'Guia pausar, escalar ou trocar criativo.' },
              ],
            },
            {
              title: 'Analytics e retencao',
              description: 'Ligacao entre mídia e valor do cliente.',
              fields: [
                { label: 'Pedidos atribuídos', value: '47 no periodo atual', hint: 'Conversões pós-clique da campanha.' },
                { label: 'Recompra', value: '26% dos adquiridos voltaram em 30 dias', hint: 'Mede qualidade do tráfego pago.' },
                { label: 'LTV incremental', value: '1,4x acima da base orgânica local', hint: 'Separa crescimento que vale a pena.' },
                { label: 'CAC da loja', value: 'Combinado entre mídia e incentivo promocional', hint: 'Leitura essencial para lucratividade real.' },
              ],
            },
          ]}
          checklist={[
            { label: 'Integrar billing de ads, bid e ranking patrocinado no backend.', status: 'pending' },
            { label: 'Persistir métricas de atribuição, ROAS e LTV incremental.', status: 'pending' },
            { label: 'CRUD local de campanhas patrocinadas e promoções ja esta navegável.', status: 'done' },
            { label: 'Controlar política de elegibilidade para restaurante patrocinado.', status: 'attention' },
          ]}
        />
      ) : null}

      <DevCrudConsole
        title="Base local de campanhas patrocinadas"
        entity="ads-campaigns"
        fields={[
          { key: 'campaignName', label: 'Campanha' },
          { key: 'restaurantName', label: 'Restaurante' },
          { key: 'placement', label: 'Posicionamento' },
          { key: 'budget', label: 'Orcamento' },
          { key: 'cpc', label: 'CPC' },
          { key: 'roas', label: 'ROAS' },
          { key: 'status', label: 'Status' },
        ]}
      />

      <Panel title="Auditoria recente" eyebrow="Saldo e exibicao">
        <AuditTimeline entries={[
          { actor: 'Loja Forno da Esquina', action: 'Criacao de campanha', module: 'Anuncios', at: 'Hoje, 09:08', detail: 'Burrata Premium entrou em destaque com orcamento e limite diario definidos.' },
          { actor: 'Sistema', action: 'Pausa automatica', module: 'Anuncios', at: 'Ontem, 23:56', detail: 'Noite da pizza pausada por saldo insuficiente e historico de gasto preservado.' },
        ]} />
      </Panel>
    </div>
  );
}