'use client';

import React, { useMemo } from 'react';
import Link from 'next/link';
import {
  ArrowDownRight,
  ArrowUpRight,
  DollarSign,
  GitCompare,
  Globe,
  Handshake,
  Info,
  Megaphone,
  Minus,
  MousePointerClick,
  Search,
  Target,
  TrendingUp,
  Users,
} from 'lucide-react';
import {
  AdDailyRow,
  AttributionChannelRow,
  ChannelWeekPoint,
  CrmLeadRow,
  DealWonRow,
  Delta,
  MetricTotals,
  formatEur,
  formatEurCents,
  formatNum,
  formatPct,
  attributionCross,
  buildRangeDeltas,
  filterDailyByDayRange,
  filterDealsForRange,
  filterLeadsByDayRange,
  metricTotalsFromDaily,
  rangeDaySpan,
  sumWeekly,
  withCohortFromDeals,
  KpiWeeklyRow,
} from '@/lib/metrics';
import { PageHeader, Surface } from '@/components/ui';
import SyncNowButton from '@/components/SyncNowButton';
import { useDateRange } from '@/components/DateRangeContext';
import { OrganicDailyRow } from '@/lib/organic';

type Card = {
  key: keyof MetricTotals;
  label: string;
  hint: string;
  format: (v: number) => string;
  icon: React.ReactNode;
  invert?: boolean;
  cohort?: boolean;
};

function toneForDelta(v: number | null, invert?: boolean): string {
  if (v === null) return 'text-gray-500 bg-gray-50 border-gray-200';
  if (v === 0) return 'text-gray-600 bg-gray-50 border-gray-200';
  const good = invert ? v < 0 : v > 0;
  return good
    ? 'text-emerald-800 bg-emerald-50 border-emerald-200'
    : 'text-red-700 bg-red-50 border-red-200';
}

function DeltaChip({
  label,
  v,
  invert,
  title,
}: {
  label: string;
  v: number | null;
  invert?: boolean;
  title?: string;
}) {
  const Icon =
    v === null || v === 0 ? Minus : (invert ? v < 0 : v > 0) ? ArrowUpRight : ArrowDownRight;
  return (
    <span
      title={title}
      className={`inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold tabular-nums ${toneForDelta(
        v,
        invert
      )}`}
    >
      <Icon className="h-3 w-3" />
      {label} {formatPct(v)}
    </span>
  );
}

function DeltaRow({
  delta,
  invert,
  empty,
  format,
  current,
  showWow,
}: {
  delta: Delta;
  invert?: boolean;
  empty?: boolean;
  format: (v: number) => string;
  current: number;
  showWow: boolean;
}) {
  if (empty) {
    return (
      <p className="mt-3 text-[11px] leading-snug text-gray-500">
        Sin cierres en este rango. Amplía el periodo o revisa oportunidades
        ganadas en el CRM.
      </p>
    );
  }
  const items: { label: string; v: number | null; base: number | null }[] = [
    ...(showWow ? [{ label: 'sem.', v: delta.wow, base: delta.wowBase }] : []),
    { label: 'mes ant.', v: delta.mom, base: delta.momBase },
    { label: 'año ant.', v: delta.yoy, base: delta.yoyBase },
  ];
  return (
    <div className="mt-3 flex flex-wrap gap-1.5">
      {items.map((c) => {
        const hasBase =
          c.base !== null && Number.isFinite(c.base) && !(c.base === 0 && c.v === null);
        return (
          <DeltaChip
            key={c.label}
            label={c.label}
            v={c.v}
            invert={invert}
            title={
              hasBase
                ? `Anterior: ${format(c.base ?? 0)} · ahora ${format(current)}`
                : 'Sin histórico suficiente'
            }
          />
        );
      })}
    </div>
  );
}

function gapTone(gap: number): string {
  if (gap === 0) return 'text-gray-700 bg-gray-100';
  if (gap > 0) return 'text-amber-900 bg-amber-50 border border-amber-200';
  const abs = Math.abs(gap);
  if (abs <= 5) return 'text-emerald-800 bg-emerald-50 border border-emerald-200';
  return 'text-red-800 bg-red-50 border border-red-200';
}

function SparkBars({
  points,
  color,
  formatValue,
}: {
  points: { date: string; value: number }[];
  color: string;
  formatValue: (v: number) => string;
}) {
  if (points.length === 0) {
    return <p className="text-xs text-gray-500 py-8 text-center">Sin filas diarias.</p>;
  }
  const max = Math.max(1, ...points.map((p) => p.value));
  const first = points[0]?.date;
  const last = points[points.length - 1]?.date;
  const fmtDay = (d?: string) =>
    d
      ? new Date(`${d}T00:00:00`).toLocaleDateString('es-ES', {
          day: 'numeric',
          month: 'short',
        })
      : '';

  return (
    <div>
      <div className="flex items-end justify-between text-[10px] text-gray-500 mb-1 tabular-nums">
        <span>{formatValue(max)}</span>
        <span>máx.</span>
      </div>
      <div className="flex items-end gap-px h-28 w-full rounded-lg bg-gray-50 px-1 pt-2 pb-0 border border-gray-100">
        {points.map((d) => (
          <div
            key={d.date}
            className="flex-1 min-w-0 h-full flex items-end"
            title={`${d.date}: ${formatValue(d.value)}`}
          >
            <div
              className={`w-full rounded-t ${color}`}
              style={{ height: `${Math.max(6, (d.value / max) * 100)}%` }}
            />
          </div>
        ))}
      </div>
      <div className="flex justify-between text-[10px] text-gray-500 mt-1.5 tabular-nums">
        <span>{fmtDay(first)}</span>
        <span>{fmtDay(last)}</span>
      </div>
    </div>
  );
}

function SectionHead({
  icon,
  title,
  hint,
}: {
  icon: React.ReactNode;
  title: string;
  hint: string;
}) {
  return (
    <div className="flex items-start gap-3 mb-4">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 border border-brand-200/60">
        {icon}
      </span>
      <div>
        <h2 className="text-base font-semibold text-gray-900 tracking-tight">
          {title}
        </h2>
        <p className="text-xs text-gray-500 mt-0.5">{hint}</p>
      </div>
    </div>
  );
}

function MetricTile({
  label,
  hint,
  value,
  icon,
  delta,
  invert,
  empty,
  format,
  current,
  showWow,
}: {
  label: string;
  hint: string;
  value: string;
  icon: React.ReactNode;
  delta: Delta;
  invert?: boolean;
  empty?: boolean;
  format: (v: number) => string;
  current: number;
  showWow: boolean;
}) {
  return (
    <div className="rounded-2xl border border-gray-200 bg-white p-4 md:p-5 shadow-sm h-full">
      <div className="flex items-start justify-between gap-2">
        <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
          {label}
        </p>
        <span className="text-gray-400">{icon}</span>
      </div>
      <p className="mt-2 text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
        {value}
      </p>
      <p className="text-xs text-gray-500 mt-2 leading-snug">{hint}</p>
      <DeltaRow
        delta={delta}
        invert={invert}
        empty={empty}
        format={format}
        current={current}
        showWow={showWow}
      />
    </div>
  );
}

function StatMini({
  label,
  value,
  hint,
  icon,
}: {
  label: string;
  value: string;
  hint: string;
  icon?: React.ReactNode;
}) {
  return (
    <div className="rounded-xl border border-gray-200 bg-white px-4 py-3.5">
      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 inline-flex items-center gap-1.5">
        {icon}
        {label}
      </p>
      <p className="text-2xl font-semibold text-gray-900 mt-1.5 tabular-nums tracking-tight">
        {value}
      </p>
      <p className="text-xs text-gray-500 mt-1">{hint}</p>
    </div>
  );
}

export default function MetricsDashboard({
  label,
  portfolioWide = false,
  tenantId,
  month,
  week,
  deltas,
  daily,
  sparse,
  weeklyRows = [],
  channelPoints = [],
  dailyRows = [],
  organicRows = [],
  crmLeads = [],
  wonDeals = [],
  integrations = [],
  cohortSource = 'deals',
}: {
  label: string;
  portfolioWide?: boolean;
  tenantId?: string | null;
  month: MetricTotals;
  week: MetricTotals;
  deltas: Record<keyof MetricTotals, Delta>;
  daily: {
    spend: number;
    leads: number;
    impressions: number;
    clicks: number;
  };
  sparse: boolean;
  weeklyRows?: KpiWeeklyRow[];
  channelPoints?: ChannelWeekPoint[];
  dailyRows?: AdDailyRow[];
  organicRows?: OrganicDailyRow[];
  crmLeads?: CrmLeadRow[];
  wonDeals?: DealWonRow[];
  integrations?: any[];
  cohortSource?: 'deals' | 'cliente_leads' | 'none';
}) {
  void tenantId;
  void week;
  void daily;

  const { since, until, label: rangeHint } = useDateRange();

  const rangedDaily = useMemo(() => {
    if (!dailyRows.length) return [];
    return filterDailyByDayRange(dailyRows, since, until);
  }, [dailyRows, since, until]);

  const rangedLeads = useMemo(() => {
    if (!crmLeads.length) return [];
    return filterLeadsByDayRange(crmLeads, since, until);
  }, [crmLeads, since, until]);

  const rangedDeals = useMemo(
    () => filterDealsForRange(wonDeals, since, until),
    [wonDeals, since, until]
  );

  const periodTotals = useMemo(() => {
    let base: MetricTotals;
    if (dailyRows.length) {
      base = rangedDaily.length
        ? metricTotalsFromDaily(rangedDaily)
        : metricTotalsFromDaily([]);
    } else {
      const ranged = weeklyRows.filter((r) => {
        if (!r.week) return false;
        const w = r.week.slice(0, 10);
        return w <= until && w >= since;
      });
      base = ranged.length ? sumWeekly(ranged) : month;
    }
    return withCohortFromDeals(base, rangedDeals);
  }, [dailyRows.length, rangedDaily, rangedDeals, weeklyRows, since, until, month]);

  const rangeDeltas = useMemo(
    () => buildRangeDeltas(dailyRows, wonDeals, since, until),
    [dailyRows, wonDeals, since, until]
  );

  const attributionRows: AttributionChannelRow[] = useMemo(() => {
    if (rangedDaily.length || rangedLeads.length || rangedDeals.length) {
      return attributionCross(rangedDaily, rangedLeads, rangedDeals);
    }
    const map = new Map<string, { spend: number; leads: number }>();
    for (const p of channelPoints) {
      const d = p.week;
      if (!d || d < since || d > until) continue;
      const cur = map.get(p.channel) || { spend: 0, leads: 0 };
      cur.spend += p.spend;
      cur.leads += p.leads;
      map.set(p.channel, cur);
    }
    return [...map.entries()]
      .map(([channel, v]) => ({
        channel,
        spend: v.spend,
        platformLeads: v.leads,
        crmLeads: 0,
        gap: -v.leads,
        cplPlatform: v.leads > 0 ? v.spend / v.leads : 0,
        cplCrm: 0,
        ventas: 0,
        importe: 0,
        roas: 0,
        cac: 0,
      }))
      .sort((a, b) => b.spend - a.spend);
  }, [rangedDaily, rangedLeads, rangedDeals, channelPoints, since, until]);

  const attributionTotals = useMemo(() => {
    return attributionRows.reduce(
      (a, r) => ({
        spend: a.spend + r.spend,
        platformLeads: a.platformLeads + r.platformLeads,
        crmLeads: a.crmLeads + r.crmLeads,
        gap: a.gap + r.gap,
        ventas: a.ventas + r.ventas,
        importe: a.importe + r.importe,
      }),
      {
        spend: 0,
        platformLeads: 0,
        crmLeads: 0,
        gap: 0,
        ventas: 0,
        importe: 0,
      }
    );
  }, [attributionRows]);

  const crmPeriodTotal = rangedLeads.length;
  const hasCrm = crmLeads.length > 0;
  const hasCohort = rangedDeals.length > 0;
  const ventasCount = periodTotals.deals;
  const cohortFromLeads = cohortSource === 'cliente_leads';
  const revenueMissing =
    hasCohort && periodTotals.revenue <= 0 && cohortFromLeads;
  const showWow = rangeDaySpan(since, until) <= 7;
  const cplCrm =
    hasCrm && crmPeriodTotal > 0 ? periodTotals.spend / crmPeriodTotal : 0;
  const gapAdsCrm = hasCrm ? crmPeriodTotal - periodTotals.leads : 0;

  const organicPeriod = useMemo(() => {
    return organicPeriodSafe(organicRows, since, until, periodTotals.leads);
  }, [organicRows, since, until, periodTotals.leads]);

  const seoCtr =
    organicPeriod.gscImpressions > 0
      ? (organicPeriod.gscClicks / organicPeriod.gscImpressions) * 100
      : 0;

  const cards: Card[] = [
    {
      key: 'spend',
      label: 'Inversión ads',
      hint: 'Gasto Meta + Google del periodo',
      format: formatEur,
      icon: <DollarSign className="w-4 h-4" />,
    },
    {
      key: 'leads',
      label: 'Leads plataforma',
      hint: 'Conversiones que reportan los anuncios',
      format: formatNum,
      icon: <Users className="w-4 h-4" />,
    },
    {
      key: 'cpl',
      label: 'CPL ads',
      hint: 'Inversión ÷ leads de plataforma',
      format: (v) => formatEurCents(v),
      icon: <MousePointerClick className="w-4 h-4" />,
      invert: true,
    },
    {
      key: 'deals',
      label: 'Ventas CRM',
      hint: hasCohort
        ? cohortFromLeads
          ? 'Contactos marcados cliente (sin importe)'
          : `Oportunidades ganadas · ${formatEur(periodTotals.revenue)}`
        : 'Oportunidades ganadas en el periodo',
      format: formatNum,
      icon: <TrendingUp className="w-4 h-4" />,
      cohort: true,
    },
    {
      key: 'cac',
      label: 'CAC',
      hint: hasCohort
        ? `Inversión ÷ ${formatNum(ventasCount)} ventas`
        : 'Inversión ÷ deals ganados',
      format: (v) => formatEurCents(v),
      icon: <Target className="w-4 h-4" />,
      invert: true,
      cohort: true,
    },
    {
      key: 'roas',
      label: 'ROAS',
      hint: revenueMissing
        ? 'Falta importe en el CRM'
        : `Importe CRM ÷ inversión ads`,
      format: (v) => `${formatNum(v)}x`,
      icon: <TrendingUp className="w-4 h-4" />,
      cohort: true,
    },
  ];

  const dailyChart = useMemo(() => {
    const byDay = new Map<string, { spend: number; leads: number }>();
    for (const r of rangedDaily) {
      const d = (r.date || '').slice(0, 10);
      if (!d) continue;
      const cur = byDay.get(d) || { spend: 0, leads: 0 };
      cur.spend += Number(r.spend) || 0;
      cur.leads += Number(r.platform_leads ?? r.conversions) || 0;
      byDay.set(d, cur);
    }
    return [...byDay.entries()]
      .sort((a, b) => a[0].localeCompare(b[0]))
      .map(([date, v]) => ({ date, ...v }));
  }, [rangedDaily]);

  const channelInsight = useMemo(() => {
    if (!attributionRows.length) return null;
    const paid = attributionRows.filter((r) => r.spend > 0);
    const worstGap = [...attributionRows].sort(
      (a, b) => Math.abs(b.gap) - Math.abs(a.gap)
    )[0];
    const platTotal = attributionRows.reduce((a, r) => a + r.platformLeads, 0);
    const crmTotal = attributionRows.reduce((a, r) => a + r.crmLeads, 0);
    const crmPaid = paid.reduce((a, r) => a + r.crmLeads, 0);
    const crmOther = crmTotal - crmPaid;
    return { worstGap, platTotal, crmTotal, crmPaid, crmOther };
  }, [attributionRows]);

  const crmName = useMemo(() => {
    const rows = (integrations || []) as { provider?: string; status?: string }[];
    const ghl = rows.find(
      (i) => i.provider === 'gohighlevel' && i.status === 'connected'
    );
    const cfy = rows.find(
      (i) => i.provider === 'clientify' && i.status === 'connected'
    );
    if (ghl) return 'GoHighLevel';
    if (cfy) return 'Clientify';
    return 'CRM';
  }, [integrations]);

  const adsCards = cards.filter((c) =>
    ['spend', 'leads', 'cpl'].includes(c.key)
  );
  const outcomeCards = cards.filter((c) =>
    ['deals', 'cac', 'roas'].includes(c.key)
  );
  const spendMax = Math.max(1, ...attributionRows.map((r) => r.spend));
  const heroRoasEmpty = !hasCohort;
  const heroDeltas = rangeDeltas;

  return (
    <div className="space-y-8">
      <PageHeader
        eyebrow="Rendimiento"
        title="Métricas"
        description={`${label}${portfolioWide ? ' · portafolio' : ''} · ${rangeHint}`}
        actions={<SyncNowButton forceModule="metrics" />}
      />

      {(sparse || !hasCohort || (cohortFromLeads && hasCohort)) && (
        <div className="space-y-2">
          {sparse && (
            <p className="text-xs text-amber-900 border border-amber-200 bg-amber-50 rounded-xl px-3 py-2">
              Histórico limitado: el warehouse aún no tiene semanas suficientes
              para algunos deltas.
            </p>
          )}
          {!hasCohort && (
            <p className="text-xs text-gray-700 border border-gray-200 bg-white rounded-xl px-3 py-2">
              Sin ventas en {rangeHint}
              {wonDeals.length
                ? ` (hay ${formatNum(wonDeals.length)} en el histórico — prueba 30 días o Mes).`
                : '.'}{' '}
              El gasto de ads no cuenta como venta.
            </p>
          )}
          {cohortFromLeads && hasCohort && (
            <p className="text-xs text-amber-900 border border-amber-200 bg-amber-50 rounded-xl px-3 py-2">
              Cohorte desde contactos «cliente» (no hay oportunidades ganadas
              sincronizadas). El importe puede ir incompleto.
            </p>
          )}
        </div>
      )}

      <div className="rounded-2xl border border-gray-200 bg-gradient-to-br from-white via-white to-brand-50/70 p-4 md:p-6 shadow-sm">
        <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-brand-700 mb-4">
          Resumen del periodo
        </p>
        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 md:gap-6">
          <HeroStat
            label="Inversión"
            value={formatEur(periodTotals.spend)}
            chip={
              <DeltaChip
                label="mes"
                v={heroDeltas.spend.mom}
                title="Vs mes anterior"
              />
            }
          />
          <HeroStat
            label="CPL ads"
            value={formatEurCents(periodTotals.cpl)}
            chip={
              <DeltaChip
                label="mes"
                v={heroDeltas.cpl.mom}
                invert
                title="Vs mes anterior · más bajo es mejor"
              />
            }
          />
          <HeroStat
            label={`Leads ${crmName}`}
            value={hasCrm ? formatNum(crmPeriodTotal) : '—'}
            chip={
              <span className="text-[11px] text-gray-500">
                {formatNum(periodTotals.leads)} plat.
              </span>
            }
          />
          <HeroStat
            label="Ventas"
            value={hasCohort ? formatNum(periodTotals.deals) : '—'}
            chip={
              hasCohort ? (
                <DeltaChip label="mes" v={heroDeltas.deals.mom} />
              ) : (
                <span className="text-[11px] text-gray-500">sin cierres</span>
              )
            }
          />
          <HeroStat
            label="ROAS"
            value={heroRoasEmpty ? '—' : `${formatNum(periodTotals.roas)}x`}
            chip={
              heroRoasEmpty ? (
                <span className="text-[11px] text-gray-500">pendiente CRM</span>
              ) : (
                <DeltaChip label="mes" v={heroDeltas.roas.mom} />
              )
            }
          />
        </div>
      </div>

      <details className="group rounded-xl border border-gray-200 bg-white">
        <summary className="cursor-pointer list-none flex items-center gap-2 px-4 py-2.5 text-xs font-medium text-gray-600 hover:text-gray-900">
          <Info className="w-3.5 h-3.5 text-brand-600" />
          Cómo leer ads, CRM y web
          <span className="ml-auto text-gray-400">
            <span className="group-open:hidden">mostrar</span>
            <span className="hidden group-open:inline">ocultar</span>
          </span>
        </summary>
        <div className="px-4 pb-3 text-xs text-gray-600 space-y-1.5 border-t border-gray-100 pt-2">
          <p>
            <strong className="text-gray-800">Publicidad:</strong> lo que Meta y
            Google reportan. No es el listado de clientes.
          </p>
          <p>
            <strong className="text-gray-800">{crmName}:</strong> altas y ventas
            reales. Un lead de ads y un alta CRM casi nunca coinciden 1 a 1.
          </p>
          <p>
            <strong className="text-gray-800">Web y SEO:</strong> Search Console
            y Analytics. No se suman a los leads de anuncios.
          </p>
        </div>
      </details>

      <section>
        <SectionHead
          icon={<Megaphone className="w-4 h-4" />}
          title="Publicidad"
          hint={`Meta + Google Ads · ${rangeHint}`}
        />
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          {adsCards.map((c) => (
            <MetricTile
              key={c.key}
              label={c.label}
              hint={c.hint}
              value={c.format(periodTotals[c.key])}
              icon={c.icon}
              delta={rangeDeltas[c.key] ?? deltas[c.key]}
              invert={c.invert}
              format={c.format}
              current={periodTotals[c.key]}
              showWow={showWow}
            />
          ))}
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
          <Surface>
            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 mb-3">
              Inversión por día
            </p>
            <SparkBars
              points={dailyChart.map((d) => ({ date: d.date, value: d.spend }))}
              color="bg-brand-500 hover:bg-brand-600"
              formatValue={formatEur}
            />
          </Surface>
          <Surface>
            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500 mb-3">
              Leads de plataforma por día
            </p>
            <SparkBars
              points={dailyChart.map((d) => ({ date: d.date, value: d.leads }))}
              color="bg-sky-500 hover:bg-sky-600"
              formatValue={formatNum}
            />
          </Surface>
        </div>
      </section>

      <section>
        <SectionHead
          icon={<Handshake className="w-4 h-4" />}
          title={`Negocio · ${crmName}`}
          hint="Altas y ventas reales · no uses estos números como si fueran los de ads"
        />
        <div className="grid grid-cols-2 lg:grid-cols-3 gap-3 mb-3">
          <StatMini
            label="Leads CRM"
            value={hasCrm ? formatNum(crmPeriodTotal) : '—'}
            hint={`Altas en ${crmName}`}
          />
          <StatMini
            label="CPL CRM"
            value={cplCrm ? formatEurCents(cplCrm) : '—'}
            hint="Inversión ads ÷ leads CRM"
          />
          <div className="rounded-xl border border-gray-200 bg-white px-4 py-3.5 col-span-2 lg:col-span-1">
            <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
              Gap ads vs CRM
            </p>
            <p
              className={`mt-1.5 inline-flex items-center rounded-full px-2.5 py-0.5 text-xl font-semibold tabular-nums ${
                hasCrm ? gapTone(gapAdsCrm) : 'text-gray-400'
              }`}
            >
              {hasCrm
                ? `${gapAdsCrm > 0 ? '+' : ''}${formatNum(gapAdsCrm)}`
                : '—'}
            </p>
            <p className="text-xs text-gray-500 mt-1.5">
              CRM − conversiones ads. Positivo = más altas en CRM que las que
              reporta el anuncio.
            </p>
          </div>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          {outcomeCards.map((c) => {
            const emptyCohort = Boolean(c.cohort) && !hasCohort;
            return (
              <MetricTile
                key={c.key}
                label={c.label}
                hint={c.hint}
                value={emptyCohort ? '—' : c.format(periodTotals[c.key])}
                icon={c.icon}
                delta={rangeDeltas[c.key] ?? deltas[c.key]}
                invert={c.invert}
                empty={emptyCohort}
                format={c.format}
                current={periodTotals[c.key]}
                showWow={showWow}
              />
            );
          })}
        </div>
      </section>

      <section>
        <SectionHead
          icon={<Globe className="w-4 h-4" />}
          title="Web y SEO"
          hint="Tráfico orgánico · mismo periodo · no es publicidad"
        />
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
          <StatMini
            label="Clics SEO"
            value={formatNum(organicPeriod.gscClicks)}
            hint={`CTR ${seoCtr.toFixed(1)}% · Search Console`}
            icon={<Search className="w-3.5 h-3.5" />}
          />
          <StatMini
            label="Impresiones"
            value={formatNum(organicPeriod.gscImpressions)}
            hint="Apariciones en Google"
          />
          <StatMini
            label="Sesiones web"
            value={formatNum(organicPeriod.ga4Sessions)}
            hint="Analytics (GA4)"
            icon={<Globe className="w-3.5 h-3.5" />}
          />
          <StatMini
            label="Conv. web"
            value={formatNum(organicPeriod.ga4Conversions)}
            hint={`Cuota vs ads ${organicPeriod.organicShare.toFixed(0)}%`}
          />
        </div>
      </section>

      <section>
        <SectionHead
          icon={<GitCompare className="w-4 h-4" />}
          title={`Cruce por canal · ads vs ${crmName}`}
          hint="Leads plat = el anuncio. Leads CRM = fuente del contacto. Gap = CRM − plat."
        />
        {channelInsight && (
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 mb-4">
            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
                Plat.
              </p>
              <p className="text-lg font-semibold tabular-nums text-gray-900">
                {formatNum(channelInsight.platTotal)}
              </p>
            </div>
            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
                CRM
              </p>
              <p className="text-lg font-semibold tabular-nums text-gray-900">
                {formatNum(channelInsight.crmTotal)}
              </p>
            </div>
            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
                Con gasto ads
              </p>
              <p className="text-lg font-semibold tabular-nums text-gray-900">
                {formatNum(channelInsight.crmPaid)}
              </p>
            </div>
            <div className="rounded-xl bg-gray-50 border border-gray-200 px-3 py-2.5">
              <p className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">
                Otras fuentes
              </p>
              <p className="text-lg font-semibold tabular-nums text-gray-900">
                {formatNum(channelInsight.crmOther)}
              </p>
            </div>
          </div>
        )}
        {channelInsight && (
          <p className="text-xs text-gray-500 mb-3">
            Mayor desfase en{' '}
            <span className="capitalize font-semibold text-gray-800">
              {channelInsight.worstGap.channel}
            </span>
            . Ecommerce, messenger e integrations no son fallos de ads.
          </p>
        )}
        <Surface padded={false}>
          {attributionRows.length === 0 ? (
            <p className="text-sm text-gray-600 py-10 text-center">
              Sin series de canal en el periodo.
            </p>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead>
                  <tr className="border-b border-gray-200 bg-gray-50/80 text-[11px] uppercase tracking-wider text-gray-500">
                    <th className="py-3 px-4 font-semibold">Canal</th>
                    <th className="py-3 pr-4 font-semibold min-w-[160px]">
                      Inversión
                    </th>
                    <th className="py-3 pr-4 font-semibold">Plat.</th>
                    <th className="py-3 pr-4 font-semibold">CRM</th>
                    <th className="py-3 pr-4 font-semibold">Gap</th>
                    <th className="py-3 pr-4 font-semibold">Ventas</th>
                    <th className="py-3 pr-4 font-semibold">Importe</th>
                    <th className="py-3 pr-4 font-semibold">ROAS</th>
                    <th className="py-3 pr-4 font-semibold">CPL plat</th>
                    <th className="py-3 pr-4 font-semibold">CPL CRM</th>
                  </tr>
                </thead>
                <tbody>
                  {attributionRows.map((row) => (
                    <tr
                      key={row.channel}
                      className={`border-b border-gray-100 hover:bg-brand-50/40 ${
                        row.spend > 0 ? 'bg-white' : 'bg-gray-50/40'
                      }`}
                    >
                      <td className="py-3 px-4">
                        {row.spend > 0 ? (
                          <Link
                            href={`/dashboard/kpis/canal/${encodeURIComponent(row.channel)}`}
                            className="text-brand-700 hover:text-brand-600 font-semibold capitalize"
                          >
                            {row.channel}
                          </Link>
                        ) : (
                          <span className="text-gray-600 font-medium capitalize">
                            {row.channel}
                          </span>
                        )}
                      </td>
                      <td className="py-3 pr-4">
                        {row.spend ? (
                          <div className="flex items-center gap-2 min-w-[140px]">
                            <span className="tabular-nums text-gray-900 w-[4.5rem]">
                              {formatEur(row.spend)}
                            </span>
                            <div className="h-1.5 flex-1 rounded-full bg-gray-100">
                              <div
                                className="h-1.5 rounded-full bg-brand-500"
                                style={{
                                  width: `${Math.max(
                                    4,
                                    (row.spend / spendMax) * 100
                                  )}%`,
                                }}
                              />
                            </div>
                          </div>
                        ) : (
                          <span className="text-gray-400">—</span>
                        )}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {formatNum(row.platformLeads)}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {hasCrm ? formatNum(row.crmLeads) : '—'}
                      </td>
                      <td className="py-3 pr-4">
                        {hasCrm ? (
                          <span
                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ${gapTone(
                              row.gap
                            )}`}
                          >
                            {row.gap > 0 ? '+' : ''}
                            {formatNum(row.gap)}
                          </span>
                        ) : (
                          '—'
                        )}
                      </td>
                      <td className="py-3 pr-4 tabular-nums font-semibold text-gray-900">
                        {row.ventas > 0 ? formatNum(row.ventas) : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {row.importe > 0 ? formatEur(row.importe) : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {row.roas > 0 ? `${formatNum(row.roas)}x` : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {row.cplPlatform
                          ? formatEurCents(row.cplPlatform)
                          : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-800">
                        {hasCrm && row.cplCrm
                          ? formatEurCents(row.cplCrm)
                          : '—'}
                      </td>
                    </tr>
                  ))}
                </tbody>
                {attributionRows.length > 0 && (
                  <tfoot>
                    <tr className="bg-gray-50 font-semibold border-t border-gray-200">
                      <td className="py-3 px-4 text-gray-900">Total</td>
                      <td className="py-3 pr-4 tabular-nums text-gray-900">
                        {attributionTotals.spend
                          ? formatEur(attributionTotals.spend)
                          : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums">
                        {formatNum(attributionTotals.platformLeads)}
                      </td>
                      <td className="py-3 pr-4 tabular-nums">
                        {hasCrm ? formatNum(attributionTotals.crmLeads) : '—'}
                      </td>
                      <td className="py-3 pr-4">
                        {hasCrm ? (
                          <span
                            className={`inline-flex rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums ${gapTone(
                              attributionTotals.gap
                            )}`}
                          >
                            {attributionTotals.gap > 0 ? '+' : ''}
                            {formatNum(attributionTotals.gap)}
                          </span>
                        ) : (
                          '—'
                        )}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-900">
                        {formatNum(attributionTotals.ventas || ventasCount)}
                      </td>
                      <td className="py-3 pr-4 tabular-nums text-gray-900">
                        {attributionTotals.importe > 0 ||
                        periodTotals.revenue > 0
                          ? formatEur(
                              attributionTotals.importe || periodTotals.revenue
                            )
                          : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums">
                        {attributionTotals.spend > 0 &&
                        (attributionTotals.importe || periodTotals.revenue) > 0
                          ? `${formatNum(
                              (attributionTotals.importe ||
                                periodTotals.revenue) / attributionTotals.spend
                            )}x`
                          : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums">
                        {attributionTotals.platformLeads > 0
                          ? formatEurCents(
                              attributionTotals.spend /
                                attributionTotals.platformLeads
                            )
                          : '—'}
                      </td>
                      <td className="py-3 pr-4 tabular-nums">
                        {hasCrm && attributionTotals.crmLeads > 0
                          ? formatEurCents(
                              attributionTotals.spend /
                                attributionTotals.crmLeads
                            )
                          : '—'}
                      </td>
                    </tr>
                  </tfoot>
                )}
              </table>
            </div>
          )}
        </Surface>
      </section>
    </div>
  );
}

function HeroStat({
  label,
  value,
  chip,
}: {
  label: string;
  value: string;
  chip: React.ReactNode;
}) {
  return (
    <div className="min-w-0">
      <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">
        {label}
      </p>
      <p className="mt-1.5 text-2xl md:text-3xl font-semibold tracking-tight text-gray-900 tabular-nums leading-none">
        {value}
      </p>
      <div className="mt-2">{chip}</div>
    </div>
  );
}

function organicPeriodSafe(
  organicRows: OrganicDailyRow[],
  since: string,
  until: string,
  adsLeads = 0
) {
  const rows = organicRows.filter((r) => {
    const d = (r.day || r.date || '').slice(0, 10);
    return d >= since && d <= until;
  });
  const gscClicks = rows.reduce((a, r) => a + (Number(r.gsc_clicks) || 0), 0);
  const gscImpressions = rows.reduce(
    (a, r) => a + (Number(r.gsc_impressions) || 0),
    0
  );
  const ga4Sessions = rows.reduce(
    (a, r) => a + (Number(r.ga4_sessions) || 0),
    0
  );
  const ga4Conversions = rows.reduce(
    (a, r) => a + (Number(r.ga4_conversions) || 0),
    0
  );
  const denom = adsLeads + ga4Conversions;
  return {
    gscClicks,
    gscImpressions,
    ga4Sessions,
    ga4Conversions,
    organicShare: denom > 0 ? (ga4Conversions / denom) * 100 : 0,
  };
}