'use client';

import React, { useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import {
  Facebook,
  Instagram,
  Linkedin,
  Loader2,
  Share2,
  ExternalLink,
  Users,
  Eye,
  Image as ImageIcon,
  Heart,
  MessageCircle,
  Repeat2,
} from 'lucide-react';
import { PageHeader } from '@/components/ui';
import { useDateRange } from '@/components/DateRangeContext';

type Integ = {
  provider: string;
  status: string;
  external_account_id?: string | null;
  label?: string | null;
  meta?: { public_url?: string; account_name?: string; warning?: string } | null;
};

type DayPoint = { day: string; value: number };

type SeriesBag = Partial<Record<string, DayPoint[]>>;

type MetricsFacebook = {
  name?: string;
  fan_count?: number;
  followers_count?: number;
  link?: string;
  error?: string;
  postsError?: string;
  insightsError?: string;
  pageInsights?: {
    impressions?: number | null;
    reach?: number | null;
    postEngagements?: number | null;
    fans?: number | null;
    pageViews?: number | null;
    follows?: number | null;
    reactions?: number | null;
  };
  series?: SeriesBag;
};

type MetricsIg = {
  username?: string;
  followers_count?: number;
  media_count?: number;
  follows_count?: number;
  error?: string;
  postsError?: string;
  insightsError?: string;
  igInsights?: {
    reach?: number | null;
    impressions?: number | null;
    profileViews?: number | null;
    websiteClicks?: number | null;
    accountsEngaged?: number | null;
    followerDelta?: number | null;
    interactions?: number | null;
  };
  series?: SeriesBag;
};

type SocialPost = {
  id: string;
  platform: 'facebook' | 'instagram';
  message?: string;
  mediaUrl?: string | null;
  thumbnailUrl?: string | null;
  permalink?: string | null;
  createdAt?: string | null;
  likes: number;
  comments: number;
  shares: number;
  reach?: number | null;
  impressions?: number | null;
  mediaType?: string | null;
  mediaProductType?: string | null;
  children?: {
    id?: string;
    mediaType?: string | null;
    mediaUrl?: string | null;
    thumbnailUrl?: string | null;
  }[];
};

function formatLabel(p: SocialPost): string {
  const t = (p.mediaType || '').toUpperCase();
  const prod = (p.mediaProductType || '').toUpperCase();
  if (prod === 'REELS' || t === 'REELS' || t === 'REEL') return 'Reel';
  if (t.includes('CAROUSEL') || t.includes('ALBUM')) return 'Carrusel';
  if (t.includes('VIDEO')) return 'Vídeo';
  if (t.includes('IMAGE') || t === 'PHOTO') return 'Imagen';
  if (t === 'STORY' || prod === 'STORY') return 'Story';
  return t || 'Post';
}

function isVideoSlide(mediaType?: string | null, url?: string | null): boolean {
  const t = (mediaType || '').toUpperCase();
  if (t.includes('VIDEO') || t === 'REELS' || t === 'REEL') return true;
  return /\.mp4($|\?)/i.test(url || '') || /video/i.test(url || '');
}

function proxiedSocialUrl(raw?: string | null): string {
  if (!raw) return '';
  if (raw.startsWith('/api/')) return raw;
  return `/api/ad-tracker/media?url=${encodeURIComponent(raw)}`;
}

function PostMedia({ post }: { post: SocialPost }) {
  const slides =
    post.children && post.children.length > 0
      ? post.children
      : [
          {
            id: post.id,
            mediaType: post.mediaType,
            mediaUrl: post.mediaUrl,
            thumbnailUrl: post.thumbnailUrl,
          },
        ];
  const [idx, setIdx] = useState(0);
  const [dims, setDims] = useState<{ w: number; h: number } | null>(null);
  const slide = slides[Math.min(idx, slides.length - 1)] || slides[0];
  const video = isVideoSlide(slide?.mediaType, slide?.mediaUrl);
  const src = proxiedSocialUrl(slide?.mediaUrl || slide?.thumbnailUrl);
  const poster = proxiedSocialUrl(slide?.thumbnailUrl);
  const aspect =
    dims && dims.w > 0 && dims.h > 0 ? `${dims.w} / ${dims.h}` : video ? '9 / 16' : '1 / 1';

  return (
    <div className="space-y-1.5">
      <div
        className="relative w-full bg-gray-950 overflow-hidden rounded-t-2xl"
        style={{ aspectRatio: aspect, maxHeight: 520 }}
      >
        {src && video ? (
          <video
            key={src}
            src={src}
            poster={poster || undefined}
            className="absolute inset-0 w-full h-full object-contain bg-black"
            controls
            playsInline
            preload="metadata"
            onLoadedMetadata={(e) => {
              const el = e.currentTarget;
              if (el.videoWidth && el.videoHeight) {
                setDims({ w: el.videoWidth, h: el.videoHeight });
              }
            }}
          />
        ) : src ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            key={src}
            src={src}
            alt=""
            className="absolute inset-0 w-full h-full object-contain bg-black"
            onLoad={(e) => {
              const el = e.currentTarget;
              if (el.naturalWidth && el.naturalHeight) {
                setDims({ w: el.naturalWidth, h: el.naturalHeight });
              }
            }}
          />
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-xs text-gray-400 px-4 text-center">
            {post.message?.slice(0, 120) || 'Sin media'}
          </div>
        )}
        <span className="absolute top-2 left-2 text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded bg-black/70 text-white">
          {post.platform === 'instagram' ? 'IG' : 'FB'} · {formatLabel(post)}
          {slides.length > 1 ? ` · ${idx + 1}/${slides.length}` : ''}
        </span>
        {dims ? (
          <span className="absolute top-2 right-2 text-[10px] font-semibold tabular-nums px-2 py-0.5 rounded bg-black/70 text-white">
            {dims.w}×{dims.h}
            {dims.w && dims.h
              ? ` · ${(dims.w / dims.h).toFixed(2)}:1`
              : ''}
          </span>
        ) : null}
        {slides.length > 1 ? (
          <>
            <button
              type="button"
              aria-label="Anterior"
              className="absolute left-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/60 text-white text-sm"
              onClick={() => {
                setDims(null);
                setIdx((i) => (i - 1 + slides.length) % slides.length);
              }}
            >
              ‹
            </button>
            <button
              type="button"
              aria-label="Siguiente"
              className="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-black/60 text-white text-sm"
              onClick={() => {
                setDims(null);
                setIdx((i) => (i + 1) % slides.length);
              }}
            >
              ›
            </button>
          </>
        ) : null}
      </div>
      {dims ? (
        <p className="px-3 text-[10px] text-gray-500 tabular-nums">
          Tamaño original: {dims.w} × {dims.h}px
          {video ? ' (vídeo)' : slides.length > 1 ? ` · slide ${idx + 1}` : ''}
        </p>
      ) : null}
    </div>
  );
}

const CHANNELS: {
  id: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
}[] = [
  { id: 'instagram', label: 'Instagram', icon: Instagram },
  { id: 'facebook', label: 'Facebook', icon: Facebook },
  { id: 'linkedin', label: 'LinkedIn', icon: Linkedin },
  { id: 'tiktok', label: 'TikTok', icon: Share2 },
];

function n(v?: number | null) {
  if (v == null || !Number.isFinite(v)) return '—';
  return new Intl.NumberFormat('es-ES').format(v);
}

function fmtDate(iso?: string | null) {
  if (!iso) return '—';
  try {
    return new Date(iso).toLocaleDateString('es-ES', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    });
  } catch {
    return iso.slice(0, 10);
  }
}

function shortDay(day: string) {
  const d = day.slice(5); // MM-DD
  return d.replace('-', '/');
}

function MiniBars({
  series,
  color = 'bg-brand-400/80',
  empty = 'Sin serie en el periodo',
}: {
  series?: DayPoint[];
  color?: string;
  empty?: string;
}) {
  const pts = series || [];
  if (!pts.length) {
    return <p className="text-xs text-gray-500 py-6 text-center">{empty}</p>;
  }
  const max = Math.max(1, ...pts.map((p) => p.value));
  return (
    <div className="flex items-end gap-0.5 h-28 w-full">
      {pts.map((p) => {
        const pct = Math.max(6, Math.round((p.value / max) * 100));
        return (
          <div
            key={p.day}
            className="flex-1 min-w-0 h-full flex flex-col justify-end"
            title={`${p.day}: ${n(p.value)}`}
          >
            <div
              className={`w-full rounded-t ${color}`}
              style={{ height: `${pct}%` }}
            />
          </div>
        );
      })}
    </div>
  );
}

function seriesDelta(series?: DayPoint[]): {
  abs: number;
  pct: number | null;
  up: boolean;
} | null {
  if (!series || series.length < 2) return null;
  const first = series[0].value;
  const last = series[series.length - 1].value;
  const abs = last - first;
  const pct = first !== 0 ? (100 * abs) / Math.abs(first) : null;
  return { abs, pct, up: abs >= 0 };
}

function ChartCard({
  title,
  hint,
  series,
  total,
  color,
}: {
  title: string;
  hint?: string;
  series?: DayPoint[];
  total?: number | null;
  color: string;
}) {
  const delta = seriesDelta(series);
  return (
    <div className="rounded-xl border border-gray-200 bg-white p-4 space-y-2">
      <div className="flex items-start justify-between gap-2">
        <div>
          <p className="text-[10px] font-semibold uppercase tracking-wider text-gray-600">
            {title}
          </p>
          {hint ? <p className="text-[10px] text-gray-400 mt-0.5">{hint}</p> : null}
        </div>
        <div className="text-right">
          <p className="text-lg font-bold text-gray-900 tabular-nums">{n(total)}</p>
          {delta ? (
            <p
              className={`text-[10px] font-semibold tabular-nums ${
                delta.up ? 'text-emerald-600' : 'text-rose-600'
              }`}
            >
              {delta.up ? '↑' : '↓'} {n(Math.abs(delta.abs))}
              {delta.pct != null
                ? ` (${delta.pct > 0 ? '+' : ''}${delta.pct.toFixed(0)}%)`
                : ''}
              <span className="text-gray-400 font-normal"> inicio→fin</span>
            </p>
          ) : null}
        </div>
      </div>
      <MiniBars series={series} color={color} />
      {series && series.length > 1 ? (
        <div className="flex justify-between text-[9px] text-gray-400 tabular-nums">
          <span>{shortDay(series[0].day)}</span>
          <span>{shortDay(series[series.length - 1].day)}</span>
        </div>
      ) : null}
    </div>
  );
}

export default function SocialDashboard({
  tenantLabel,
  isAgency,
}: {
  tenantLabel: string;
  isAgency: boolean;
}) {
  const { since, until, label: rangeLabel } = useDateRange();
  const [loading, setLoading] = useState(true);
  const [integs, setIntegs] = useState<Integ[]>([]);
  const [metrics, setMetrics] = useState<{
    facebook?: MetricsFacebook;
    instagram?: MetricsIg;
    warning?: string;
  }>({});
  const [posts, setPosts] = useState<SocialPost[]>([]);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      setLoading(true);
      setErr(null);
      const qs = new URLSearchParams({ since, until });
      const res = await fetch(`/api/social?${qs}`);
      const data = await res.json().catch(() => ({}));
      if (cancelled) return;
      if (!res.ok) setErr(data.error || 'No se pudo cargar Social');
      else {
        setIntegs(data.integrations || []);
        setMetrics(data.metrics || {});
        setPosts(data.posts || []);
      }
      setLoading(false);
    })();
    return () => {
      cancelled = true;
    };
  }, [since, until]);

  const by = useMemo(() => new Map(integs.map((i) => [i.provider, i])), [integs]);
  const ig = metrics.instagram;
  const fb = metrics.facebook;
  const visiblePosts = useMemo(
    () => posts.filter((p) => p.platform === 'instagram'),
    [posts]
  );

  const kpiCards = [
    {
      label: 'Seguidores IG (global)',
      value: n(ig?.followers_count),
      icon: Users,
    },
    {
      label: 'Publicaciones IG (global)',
      value: n(ig?.media_count),
      icon: ImageIcon,
    },
    {
      label: 'Alcance IG (periodo)',
      value: n(ig?.igInsights?.reach),
      icon: Eye,
    },
    {
      label: 'Visualizaciones IG',
      value: n(ig?.igInsights?.impressions),
      icon: Eye,
    },
    {
      label: 'Visitas perfil IG',
      value: n(ig?.igInsights?.profileViews),
      icon: Users,
    },
    {
      label: 'Interacciones IG',
      value: n(ig?.igInsights?.interactions ?? ig?.igInsights?.accountsEngaged),
      icon: Heart,
    },
    {
      label: 'Clics web IG',
      value: n(ig?.igInsights?.websiteClicks),
      icon: ExternalLink,
    },
    {
      label: 'Δ seguidores IG',
      value: n(ig?.igInsights?.followerDelta),
      icon: Users,
    },
    {
      label: 'Fans FB (global)',
      value: n(fb?.followers_count ?? fb?.fan_count ?? fb?.pageInsights?.fans),
      icon: Users,
    },
    {
      label: 'Alcance FB (periodo)',
      value: n(fb?.pageInsights?.reach),
      icon: Eye,
    },
    {
      label: 'Visualizaciones FB',
      value: n(fb?.pageInsights?.impressions),
      icon: Eye,
    },
    {
      label: 'Engagement posts FB',
      value: n(fb?.pageInsights?.postEngagements),
      icon: Heart,
    },
  ];

  const chartBlocks: {
    title: string;
    hint: string;
    series?: DayPoint[];
    total?: number | null;
    color: string;
  }[] = [
    {
      title: 'IG · Alcance / día',
      hint: 'Serie diaria en el periodo',
      series: ig?.series?.reach,
      total: ig?.igInsights?.reach,
      color: 'bg-pink-400/80',
    },
    {
      title: 'IG · Visualizaciones',
      hint: 'views (metric_type=total_value)',
      series: ig?.series?.impressions,
      total: ig?.igInsights?.impressions,
      color: 'bg-fuchsia-400/80',
    },
    {
      title: 'IG · Visitas al perfil',
      hint: 'profile_views',
      series: ig?.series?.profileViews,
      total: ig?.igInsights?.profileViews,
      color: 'bg-rose-400/80',
    },
    {
      title: 'IG · Clics web',
      hint: 'website_clicks',
      series: ig?.series?.websiteClicks,
      total: ig?.igInsights?.websiteClicks,
      color: 'bg-orange-400/80',
    },
    {
      title: 'IG · Cuentas engaged',
      hint: 'accounts_engaged',
      series: ig?.series?.accountsEngaged,
      total: ig?.igInsights?.accountsEngaged,
      color: 'bg-amber-400/80',
    },
    {
      title: 'IG · Δ seguidores / día',
      hint: 'follower_count (delta)',
      series: ig?.series?.followerDelta,
      total: ig?.igInsights?.followerDelta,
      color: 'bg-yellow-500/70',
    },
    {
      title: 'FB · Alcance / día',
      hint: 'page_total_media_view_unique',
      series: fb?.series?.reach,
      total: fb?.pageInsights?.reach,
      color: 'bg-sky-400/80',
    },
    {
      title: 'FB · Visualizaciones',
      hint: 'page_media_view',
      series: fb?.series?.impressions,
      total: fb?.pageInsights?.impressions,
      color: 'bg-blue-500/70',
    },
    {
      title: 'FB · Engagement posts',
      hint: 'page_post_engagements',
      series: fb?.series?.postEngagements,
      total: fb?.pageInsights?.postEngagements,
      color: 'bg-indigo-400/80',
    },
    {
      title: 'FB · Fans (stock)',
      hint: 'page_fans diario',
      series: fb?.series?.fans,
      total: fb?.pageInsights?.fans,
      color: 'bg-violet-400/80',
    },
    {
      title: 'FB · Vistas página',
      hint: 'page_views_total',
      series: fb?.series?.pageViews,
      total: fb?.pageInsights?.pageViews,
      color: 'bg-cyan-400/80',
    },
    {
      title: 'FB · Nuevos follows',
      hint: 'page_follows / daily_follows',
      series: fb?.series?.follows,
      total: fb?.pageInsights?.follows,
      color: 'bg-teal-400/80',
    },
  ];

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow={`Social · ${tenantLabel}`}
        title="Redes sociales"
        description={`Analytics orgánicos IG/FB · periodo ${rangeLabel}`}
      />

      {err && (
        <p className="text-xs text-red-700 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
          {err}
        </p>
      )}
      {metrics.warning && (
        <p className="text-xs text-amber-800 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
          {metrics.warning}
        </p>
      )}

      {loading ? (
        <p className="text-sm text-gray-500 flex items-center gap-2">
          <Loader2 className="w-4 h-4 animate-spin" /> Cargando analytics…
        </p>
      ) : (
        <>
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
            {kpiCards.map((k) => (
              <div
                key={k.label}
                className="rounded-xl border border-gray-200 bg-white p-4"
              >
                <div className="flex items-center justify-between text-gray-600 mb-1">
                  <p className="text-[10px] font-semibold uppercase tracking-wider">
                    {k.label}
                  </p>
                  <k.icon className="w-3.5 h-3.5" />
                </div>
                <p className="text-xl font-bold text-gray-900 tabular-nums">
                  {k.value}
                </p>
              </div>
            ))}
          </div>

          {(ig?.error ||
            fb?.error ||
            ig?.postsError ||
            fb?.postsError ||
            ig?.insightsError ||
            fb?.insightsError) && (
            <p className="text-xs text-amber-800 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
              {[
                ig?.error && `IG: ${ig.error}`,
                fb?.error && `FB: ${fb.error}`,
                ig?.insightsError && `IG insights: ${ig.insightsError}`,
                fb?.insightsError && `FB insights: ${fb.insightsError}`,
                ig?.postsError && `IG posts: ${ig.postsError}`,
                fb?.postsError && `FB posts: ${fb.postsError}`,
              ]
                .filter(Boolean)
                .join(' · ')}
            </p>
          )}

          <section className="space-y-3">
            <div>
              <h3 className="text-sm font-semibold text-gray-900">
                Evolución diaria · {rangeLabel}
              </h3>
              <p className="text-xs text-gray-500 mt-0.5">
                Barras = valor diario. Flecha = cambio del primer al último día
                del periodo. Totales arriba a la derecha.
              </p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
              {chartBlocks.map((c) => (
                <ChartCard key={c.title} {...c} />
              ))}
            </div>
          </section>

          <section className="space-y-3">
            <div>
              <h3 className="text-sm font-semibold text-gray-900">
                Publicaciones Instagram
              </h3>
              <p className="text-xs text-gray-500 mt-0.5">
                Solo IG (feed, reels y carruseles). Sin posts de Facebook.
              </p>
            </div>

            {visiblePosts.length === 0 ? (
              <p className="text-sm text-gray-500 border border-dashed border-gray-200 rounded-xl px-4 py-10 text-center">
                Sin publicaciones de Instagram en este periodo.
              </p>
            ) : (
              <ul className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                {visiblePosts.map((p) => (
                  <li
                    key={p.id}
                    className="rounded-2xl border border-gray-200 bg-white overflow-hidden flex flex-col"
                  >
                    <PostMedia post={p} />
                    <div className="p-3 space-y-2 flex-1 flex flex-col">
                      <p className="text-[11px] text-gray-500">
                        {fmtDate(p.createdAt)}
                        {p.mediaProductType
                          ? ` · ${p.mediaProductType}`
                          : ''}
                      </p>
                      {p.message ? (
                        <p className="text-xs text-gray-800 line-clamp-3 whitespace-pre-wrap">
                          {p.message}
                        </p>
                      ) : null}
                      <div className="flex flex-wrap gap-3 text-[11px] text-gray-700 pt-1 mt-auto">
                        <span className="inline-flex items-center gap-1">
                          <Heart className="w-3 h-3" /> {n(p.likes)}
                        </span>
                        <span className="inline-flex items-center gap-1">
                          <MessageCircle className="w-3 h-3" /> {n(p.comments)}
                        </span>
                        <span className="inline-flex items-center gap-1">
                          <Repeat2 className="w-3 h-3" /> {n(p.shares)}
                        </span>
                        {p.reach != null && (
                          <span className="inline-flex items-center gap-1">
                            <Eye className="w-3 h-3" /> {n(p.reach)} alc.
                          </span>
                        )}
                        {p.impressions != null && (
                          <span className="inline-flex items-center gap-1">
                            <Eye className="w-3 h-3" /> {n(p.impressions)} views
                          </span>
                        )}
                      </div>
                      {p.permalink && (
                        <a
                          href={p.permalink}
                          target="_blank"
                          rel="noreferrer"
                          className="inline-flex items-center gap-1 text-[11px] text-brand-600 hover:underline"
                        >
                          Ver en red <ExternalLink className="w-3 h-3" />
                        </a>
                      )}
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </section>

          <ul className="grid gap-3 sm:grid-cols-2">
            {CHANNELS.map((ch) => {
              const row = by.get(ch.id);
              const connected =
                row?.status === 'connected' && Boolean(row.external_account_id);
              const Icon = ch.icon;
              const url =
                row?.meta?.public_url ||
                (row?.external_account_id?.startsWith('http')
                  ? row.external_account_id
                  : null);
              return (
                <li
                  key={ch.id}
                  className="rounded-xl border border-gray-200 bg-white p-4 space-y-2"
                >
                  <div className="flex items-center justify-between gap-2">
                    <div className="flex items-center gap-2">
                      <Icon className="w-4 h-4 text-gray-700" />
                      <p className="text-sm font-semibold text-gray-900">
                        {ch.label}
                      </p>
                    </div>
                    <span
                      className={`text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded ${
                        connected
                          ? 'bg-emerald-50 text-emerald-700'
                          : 'bg-gray-100 text-gray-500'
                      }`}
                    >
                      {connected ? 'Conectado' : 'Sin enlazar'}
                    </span>
                  </div>
                  <p className="text-xs text-gray-600 truncate">
                    {row?.meta?.account_name ||
                      row?.label ||
                      row?.external_account_id ||
                      '—'}
                  </p>
                  {url && (
                    <a
                      href={url}
                      target="_blank"
                      rel="noreferrer"
                      className="inline-flex items-center gap-1 text-[11px] text-brand-600 hover:underline"
                    >
                      Abrir perfil <ExternalLink className="w-3 h-3" />
                    </a>
                  )}
                </li>
              );
            })}
          </ul>
        </>
      )}

      <div className="flex flex-wrap gap-2">
        <Link
          href="/dashboard/calendario"
          className="text-xs font-semibold px-3 py-1.5 rounded-lg bg-brand-500 text-white hover:bg-brand-600"
        >
          Calendario editorial
        </Link>
        {isAgency && (
          <Link
            href="/dashboard/agencia"
            className="text-xs font-semibold px-3 py-1.5 rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-50"
          >
            Emparejar en Agencia
          </Link>
        )}
      </div>
    </div>
  );
}