'use client';

import React, { useEffect, useMemo, useState } from 'react';
import {
  ExternalLink,
  LineChart as LineIcon,
  Loader2,
  MessageSquareText,
  Radio,
} from 'lucide-react';
import {
  ChannelWeekPoint,
  formatEur,
  formatNum,
} from '@/lib/metrics';

type Entry = {
  id: string;
  entry_type: string;
  title: string;
  summary?: string | null;
  body_md?: string | null;
  browser_link?: string | null;
  metrics?: {
    ventas?: number;
    cpl?: number;
    cac?: number;
    periodo?: string;
  };
  occurred_at?: string | null;
};

type Payload = {
  label: string;
  portfolioWide?: boolean;
  hint?: string;
  entries: Entry[];
  channelSeries: {
    weeks: string[];
    channels: string[];
    points: ChannelWeekPoint[];
  };
  dailySummary?: { days: number; spend: number; leads: number };
};

type MetricKey = 'leads' | 'spend' | 'cpl';

const CHANNEL_COLORS = [
  '#E58A3C',
  '#38BDF8',
  '#34D399',
  '#A78BFA',
  '#F472B6',
  '#FBBF24',
  '#94A3B8',
];

function typeLabel(t: string) {
  if (t === 'meeting') return 'Reunión';
  if (t === 'kpis') return 'KPIs';
  if (t === 'topic') return 'Tema';
  return 'Nota';
}

function typeTone(t: string) {
  if (t === 'meeting') return 'bg-amber-500/15 text-amber-300 border-amber-500/30';
  if (t === 'kpis') return 'bg-sky-500/15 text-sky-300 border-sky-500/30';
  if (t === 'topic') return 'bg-emerald-500/15 text-emerald-300 border-emerald-500/30';
  return 'bg-gray-500/15 text-gray-300 border-gray-500/30';
}

function ChannelEvolutionChart({
  weeks,
  channels,
  points,
  metric,
  activeChannels,
}: {
  weeks: string[];
  channels: string[];
  points: ChannelWeekPoint[];
  metric: MetricKey;
  activeChannels: Set<string>;
}) {
  const [hover, setHover] = useState<{
    week: string;
    channel: string;
    value: number;
    x: number;
    y: number;
  } | null>(null);

  const width = 720;
  const height = 260;
  const pad = { t: 16, r: 16, b: 36, l: 44 };
  const innerW = width - pad.l - pad.r;
  const innerH = height - pad.t - pad.b;

  const series = useMemo(() => {
    return channels
      .filter((c) => activeChannels.has(c))
      .map((channel, i) => {
        const vals = weeks.map((week) => {
          const p = points.find((x) => x.week === week && x.channel === channel);
          return p ? Number(p[metric] || 0) : 0;
        });
        return {
          channel,
          color: CHANNEL_COLORS[i % CHANNEL_COLORS.length],
          vals,
        };
      });
  }, [channels, activeChannels, weeks, points, metric]);

  const maxY = Math.max(1, ...series.flatMap((s) => s.vals));

  const xAt = (i: number) =>
    pad.l + (weeks.length <= 1 ? innerW / 2 : (i / (weeks.length - 1)) * innerW);
  const yAt = (v: number) => pad.t + innerH - (v / maxY) * innerH;

  if (!weeks.length || !series.length) {
    return (
      <div className="h-[260px] flex items-center justify-center text-sm text-gray-500 border border-dashed border-gray-800 rounded-xl">
        Aún no hay series de canal en kpi_weekly para este cliente.
      </div>
    );
  }

  return (
    <div className="relative w-full overflow-x-auto">
      <svg
        viewBox={`0 0 ${width} ${height}`}
        className="w-full min-w-[520px] h-auto"
        role="img"
        aria-label={`Evolución ${metric} por canal`}
      >
        {[0, 0.25, 0.5, 0.75, 1].map((t) => {
          const y = pad.t + innerH * (1 - t);
          const val = maxY * t;
          return (
            <g key={t}>
              <line
                x1={pad.l}
                x2={width - pad.r}
                y1={y}
                y2={y}
                stroke="#1F2937"
                strokeWidth={1}
              />
              <text
                x={pad.l - 8}
                y={y + 3}
                textAnchor="end"
                className="fill-gray-500"
                fontSize={10}
              >
                {metric === 'spend' || metric === 'cpl'
                  ? formatNum(val)
                  : formatNum(val)}
              </text>
            </g>
          );
        })}

        {series.map((s) => {
          const d = s.vals
            .map((v, i) => `${i === 0 ? 'M' : 'L'} ${xAt(i)} ${yAt(v)}`)
            .join(' ');
          return (
            <g key={s.channel}>
              <path d={d} fill="none" stroke={s.color} strokeWidth={2.5} />
              {s.vals.map((v, i) => (
                <circle
                  key={`${s.channel}-${weeks[i]}`}
                  cx={xAt(i)}
                  cy={yAt(v)}
                  r={hover?.week === weeks[i] && hover?.channel === s.channel ? 5 : 3.5}
                  fill={s.color}
                  className="cursor-pointer"
                  onMouseEnter={() =>
                    setHover({
                      week: weeks[i],
                      channel: s.channel,
                      value: v,
                      x: xAt(i),
                      y: yAt(v),
                    })
                  }
                  onMouseLeave={() => setHover(null)}
                />
              ))}
            </g>
          );
        })}

        {weeks.map((w, i) => (
          <text
            key={w}
            x={xAt(i)}
            y={height - 10}
            textAnchor="middle"
            className="fill-gray-500"
            fontSize={9}
          >
            {w.slice(5)}
          </text>
        ))}
      </svg>

      {hover && (
        <div
          className="pointer-events-none absolute z-10 rounded-lg border border-gray-700 bg-[#0D121F] px-2.5 py-1.5 text-[11px] text-white shadow-xl"
          style={{
            left: Math.min(hover.x + 8, 560),
            top: Math.max(hover.y - 36, 8),
          }}
        >
          <p className="font-semibold capitalize">{hover.channel}</p>
          <p className="text-gray-400">{hover.week}</p>
          <p>
            {metric === 'spend'
              ? formatEur(hover.value)
              : metric === 'cpl'
                ? `${formatNum(hover.value)} € CPL`
                : `${formatNum(hover.value)} leads`}
          </p>
        </div>
      )}
    </div>
  );
}

export default function SeguimientoBoard() {
  const [data, setData] = useState<Payload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [metric, setMetric] = useState<MetricKey>('leads');
  const [activeChannels, setActiveChannels] = useState<Set<string>>(new Set());
  const [openId, setOpenId] = useState<string | null>(null);
  const [query, setQuery] = useState('');

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      setError(null);
      try {
        const r = await fetch('/api/seguimiento', { cache: 'no-store' });
        const j = await r.json();
        if (!r.ok) throw new Error(j.error || 'Error cargando seguimiento');
        if (!cancelled) {
          setData(j);
          setActiveChannels(new Set(j.channelSeries?.channels || []));
        }
      } catch (e) {
        if (!cancelled) {
          setError(e instanceof Error ? e.message : 'Error');
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const filteredEntries = useMemo(() => {
    const list = data?.entries || [];
    const q = query.trim().toLowerCase();
    if (!q) return list;
    return list.filter(
      (e) =>
        e.title.toLowerCase().includes(q) ||
        (e.summary || '').toLowerCase().includes(q) ||
        (e.body_md || '').toLowerCase().includes(q)
    );
  }, [data, query]);

  function toggleChannel(ch: string) {
    setActiveChannels((prev) => {
      const next = new Set(prev);
      if (next.has(ch)) next.delete(ch);
      else next.add(ch);
      return next;
    });
  }

  if (loading) {
    return (
      <div className="flex items-center gap-2 text-sm text-gray-400 py-16 justify-center">
        <Loader2 className="w-4 h-4 animate-spin" /> Cargando seguimiento…
      </div>
    );
  }

  if (error) {
    return (
      <p className="text-sm text-red-400 border border-red-500/20 rounded-lg px-3 py-2">
        {error}
      </p>
    );
  }

  if (!data) return null;

  if (data.portfolioWide) {
    return (
      <div className="rounded-xl border border-gray-800 bg-[#111827] p-8 text-center">
        <Radio className="w-8 h-8 text-brand-500 mx-auto mb-3" />
        <h2 className="text-lg font-semibold text-white">Seguimiento por cliente</h2>
        <p className="text-sm text-gray-400 mt-2 max-w-md mx-auto">
          {data.hint ||
            'Selecciona un cliente en el encabezado para ver la evolución reunión a reunión y por canales.'}
        </p>
      </div>
    );
  }

  const { channelSeries, dailySummary } = data;

  return (
    <div className="space-y-8">
      <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-3">
        <div>
          <h2 className="text-2xl font-bold tracking-tight text-white">
            Seguimiento & evolución
          </h2>
          <p className="text-sm text-gray-400 mt-1">
            {data.label} · timeline Superhuman + series de canal (kpi_weekly)
          </p>
        </div>
        {dailySummary && dailySummary.days > 0 && (
          <div className="text-[11px] text-gray-500 bg-gray-900/50 border border-gray-800 rounded-lg px-3 py-2">
            Ads recientes · {formatEur(dailySummary.spend)} ·{' '}
            {formatNum(dailySummary.leads)} leads · {dailySummary.days} días
          </div>
        )}
      </div>

      {/* Channel evolution */}
      <section className="bg-[#111827] border border-gray-800 rounded-xl p-5 space-y-4">
        <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-2 text-white font-medium">
            <LineIcon className="w-4 h-4 text-brand-500" />
            Evolución por canal
          </div>
          <div className="flex gap-1 rounded-lg border border-gray-800 p-0.5 bg-black/20">
            {(
              [
                ['leads', 'Leads'],
                ['spend', 'Inversión'],
                ['cpl', 'CPL'],
              ] as [MetricKey, string][]
            ).map(([k, label]) => (
              <button
                key={k}
                type="button"
                onClick={() => setMetric(k)}
                className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
                  metric === k
                    ? 'bg-brand-500/20 text-brand-400'
                    : 'text-gray-400 hover:text-white'
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          {channelSeries.channels.map((ch, i) => {
            const on = activeChannels.has(ch);
            const color = CHANNEL_COLORS[i % CHANNEL_COLORS.length];
            return (
              <button
                key={ch}
                type="button"
                onClick={() => toggleChannel(ch)}
                className={`inline-flex items-center gap-1.5 text-xs px-2.5 py-1 rounded-full border transition-all capitalize ${
                  on
                    ? 'border-gray-600 text-white bg-gray-900'
                    : 'border-gray-800 text-gray-500 opacity-60'
                }`}
              >
                <span
                  className="w-2 h-2 rounded-full"
                  style={{ background: on ? color : '#4B5563' }}
                />
                {ch}
              </button>
            );
          })}
        </div>

        <ChannelEvolutionChart
          weeks={channelSeries.weeks}
          channels={channelSeries.channels}
          points={channelSeries.points}
          metric={metric}
          activeChannels={activeChannels}
        />
      </section>

      {/* Timeline */}
      <section className="space-y-4">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
          <div className="flex items-center gap-2 text-white font-medium">
            <MessageSquareText className="w-4 h-4 text-emerald-400" />
            Timeline reunión a reunión
            <span className="text-xs text-gray-500 font-normal">
              ({filteredEntries.length})
            </span>
          </div>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Filtrar temas, CPL, Meta…"
            className="w-full sm:w-64 rounded-lg bg-black/30 border border-gray-800 px-3 py-1.5 text-sm text-white placeholder:text-gray-600 focus:outline-none focus:border-brand-500/50"
          />
        </div>

        {filteredEntries.length === 0 ? (
          <div className="rounded-xl border border-dashed border-gray-800 px-4 py-10 text-center text-sm text-gray-500">
            Sin entradas aún. Desde Agencia → sincroniza Superhuman Docs para este
            cliente (páginas de Seguimiento; nunca contraseñas).
          </div>
        ) : (
          <ol className="relative border-l border-gray-800 ml-3 space-y-4">
            {filteredEntries.map((e) => {
              const open = openId === e.id;
              const when = e.occurred_at
                ? new Date(e.occurred_at).toLocaleDateString('es-ES', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                  })
                : '—';
              return (
                <li key={e.id} className="ml-4">
                  <span className="absolute -left-1.5 mt-1.5 w-3 h-3 rounded-full bg-brand-500 ring-4 ring-[#0B0F19]" />
                  <button
                    type="button"
                    onClick={() => setOpenId(open ? null : e.id)}
                    className="w-full text-left rounded-xl border border-gray-800 bg-[#111827] hover:border-gray-700 transition-colors p-4"
                  >
                    <div className="flex flex-wrap items-start justify-between gap-2">
                      <div>
                        <div className="flex flex-wrap items-center gap-2 mb-1">
                          <span
                            className={`text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border ${typeTone(e.entry_type)}`}
                          >
                            {typeLabel(e.entry_type)}
                          </span>
                          <span className="text-[11px] text-gray-500">{when}</span>
                        </div>
                        <p className="text-sm font-semibold text-white">{e.title}</p>
                        {e.summary && (
                          <p className="text-xs text-gray-400 mt-1 line-clamp-2">
                            {e.summary}
                          </p>
                        )}
                      </div>
                      {e.browser_link && (
                        <a
                          href={e.browser_link}
                          target="_blank"
                          rel="noreferrer"
                          onClick={(ev) => ev.stopPropagation()}
                          className="inline-flex items-center gap-1 text-[11px] text-brand-400 hover:text-brand-300"
                        >
                          Superhuman <ExternalLink className="w-3 h-3" />
                        </a>
                      )}
                    </div>

                    {open && e.body_md && (
                      <pre className="mt-3 whitespace-pre-wrap text-xs text-gray-300 bg-black/30 border border-gray-800 rounded-lg p-3 max-h-64 overflow-y-auto font-sans">
                        {e.body_md}
                      </pre>
                    )}
                    {open && e.metrics && (e.metrics.ventas || e.metrics.cpl) && (
                      <div className="mt-2 flex flex-wrap gap-2 text-[11px]">
                        {e.metrics.ventas != null && (
                          <span className="px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-300">
                            Ventas {e.metrics.ventas}
                          </span>
                        )}
                        {e.metrics.cpl != null && (
                          <span className="px-2 py-0.5 rounded bg-sky-500/10 text-sky-300">
                            CPL ≈ {formatNum(e.metrics.cpl)} €
                          </span>
                        )}
                        {e.metrics.cac != null && (
                          <span className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-300">
                            CAC ≈ {formatNum(e.metrics.cac)} €
                          </span>
                        )}
                      </div>
                    )}
                  </button>
                </li>
              );
            })}
          </ol>
        )}
      </section>
    </div>
  );
}