'use client';

import React, { useEffect, useMemo, useState } from 'react';
import {
  ArrowRight,
  CheckCircle2,
  ExternalLink,
  ImageIcon,
  Palette,
  Type,
} from 'lucide-react';
import { Surface } from '@/components/ui';
import {
  primaryLogo,
  type Brandbook,
  type BrandbookSectionId,
} from '@/lib/brandbook';

function LogoPreview({
  assetFileId,
  alt,
}: {
  assetFileId: string;
  alt: string;
}) {
  const [url, setUrl] = useState<string | null>(null);
  useEffect(() => {
    let cancelled = false;
    (async () => {
      const r = await fetch(
        `/api/assets/download?id=${encodeURIComponent(assetFileId)}`
      );
      const j = await r.json();
      if (!cancelled && r.ok && j.url) setUrl(j.url);
    })();
    return () => {
      cancelled = true;
    };
  }, [assetFileId]);

  if (!url) {
    return (
      <div className="flex h-16 w-full max-w-xs items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
        Cargando logo…
      </div>
    );
  }
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={url}
      alt={alt}
      className="max-h-16 w-auto max-w-full object-contain"
    />
  );
}

function PillRow({
  title,
  items,
  emptyHint,
  accent = 'brand',
}: {
  title: string;
  items: string[];
  emptyHint: string;
  accent?: 'brand' | 'sky' | 'violet' | 'amber';
}) {
  const tone =
    accent === 'sky'
      ? 'border-sky-200 bg-sky-50 text-sky-900'
      : accent === 'violet'
        ? 'border-violet-200 bg-violet-50 text-violet-900'
        : accent === 'amber'
          ? 'border-amber-200 bg-amber-50 text-amber-900'
          : 'border-brand-200 bg-brand-50 text-brand-900';

  return (
    <div className="space-y-2">
      <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
        {title}
      </p>
      {items.length ? (
        <div className="flex flex-wrap gap-2">
          {items.map((item) => (
            <span
              key={item}
              className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold ${tone}`}
            >
              {item}
            </span>
          ))}
        </div>
      ) : (
        <p className="text-xs text-gray-400 italic">{emptyHint}</p>
      )}
    </div>
  );
}

function websiteFromBook(book: Brandbook): string | null {
  const candidates = [
    book.website,
    book.channel_handles?.blog,
    book.channels?.blog,
  ];
  for (const c of candidates) {
    const raw = String(c || '').trim();
    if (!raw) continue;
    if (/^https?:\/\//i.test(raw)) return raw;
    if (raw.includes('.') && !raw.startsWith('@')) {
      return `https://${raw.replace(/^\/+/, '')}`;
    }
  }
  return null;
}

export default function BrandOverview({
  book,
  tenantLabel,
  score,
  missing,
  onEditSection,
  onContinueEdit,
  embedded = false,
}: {
  book: Brandbook;
  tenantLabel: string;
  score: number;
  missing: string[];
  onEditSection: (id: BrandbookSectionId) => void;
  onContinueEdit: () => void;
  /** Cuando va dentro del panel de Zona de marca (sin card exterior). */
  embedded?: boolean;
}) {
  const logo = primaryLogo(book);
  const site = websiteFromBook(book);
  const fonts = book.fonts_kit.slice(0, 4);
  const colors = book.colors.slice(0, 8);
  const values = book.values.filter(Boolean).slice(0, 8);
  const aesthetic = [
    ...book.personality,
    book.photography_style,
    book.illustration_style,
    book.visual_notes,
  ]
    .flatMap((x) =>
      String(x || '')
        .split(/[,;·|/]/)
        .map((s) => s.trim())
        .filter(Boolean)
    )
    .filter((v, i, arr) => arr.indexOf(v) === i)
    .slice(0, 8);
  const tonePills = [
    book.tone,
    ...book.voice_do.slice(0, 3),
    ...book.personality.slice(0, 2),
  ]
    .map((s) => String(s || '').trim())
    .filter(Boolean)
    .filter((v, i, arr) => arr.indexOf(v) === i)
    .slice(0, 6);

  const overviewText = useMemo(() => {
    return (
      book.elevator_pitch ||
      book.brand_promise ||
      book.positioning ||
      book.mission ||
      ''
    ).trim();
  }, [book]);

  const header = (
    <div
      className={
        embedded
          ? 'flex flex-wrap items-start justify-between gap-3 pb-2'
          : 'border-b border-gray-200 bg-gradient-to-br from-gray-50 via-white to-brand-50/40 px-5 py-4 sm:px-6'
      }
    >
      <div className={embedded ? '' : undefined}>
        <p className="text-[10px] font-bold uppercase tracking-[0.18em] text-brand-600">
          Brand Overview
        </p>
        <h2
          className={`mt-1 font-extrabold tracking-tight text-gray-900 ${
            embedded ? 'text-base' : 'text-xl sm:text-2xl'
          }`}
        >
          Perfil de marca
        </h2>
        {!embedded ? (
          <p className="mt-1 text-sm text-gray-600">
            Resumen visual del brandbook · editable por secciones
          </p>
        ) : null}
      </div>
      <button
        type="button"
        onClick={onContinueEdit}
        className="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-bold text-gray-800 hover:bg-gray-50"
      >
        Editar identidad
        <ArrowRight className="h-3.5 w-3.5" />
      </button>
    </div>
  );

  const content = (
        <div className={embedded ? 'space-y-8' : 'space-y-8 px-5 py-6 sm:px-6'}>
          {/* Identity */}
          <section className="grid gap-6 lg:grid-cols-[1.2fr_1fr]">
            <div className="space-y-3">
              <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                Identidad
              </p>
              <h3 className="text-2xl font-extrabold text-gray-900 tracking-tight">
                {book.brand_name || tenantLabel}
              </h3>
              {site ? (
                <a
                  href={site}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-flex items-center gap-1 text-sm font-medium text-brand-700 hover:underline"
                >
                  {site.replace(/^https?:\/\//i, '')}
                  <ExternalLink className="h-3.5 w-3.5" />
                </a>
              ) : (
                <button
                  type="button"
                  onClick={() => onEditSection('canales')}
                  className="text-sm text-gray-400 hover:text-brand-700"
                >
                  Añadir web en Canales →
                </button>
              )}
              <div className="mt-4 flex min-h-[88px] items-center justify-center rounded-2xl border border-gray-200 bg-white px-6 py-5 shadow-sm">
                {logo ? (
                  <LogoPreview
                    assetFileId={logo.asset_file_id}
                    alt={logo.label || book.brand_name || 'Logo'}
                  />
                ) : (
                  <button
                    type="button"
                    onClick={() => onEditSection('visual')}
                    className="flex flex-col items-center gap-2 text-gray-400 hover:text-brand-700"
                  >
                    <ImageIcon className="h-8 w-8" />
                    <span className="text-xs font-semibold">Subir logo</span>
                  </button>
                )}
              </div>
            </div>

            <div className="space-y-5">
              <div className="space-y-2">
                <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500 inline-flex items-center gap-1.5">
                  <Type className="h-3.5 w-3.5" /> Tipografías
                </p>
                {fonts.length ? (
                  <div className="grid grid-cols-2 gap-2">
                    {fonts.map((f) => (
                      <div
                        key={f.id}
                        className="rounded-xl border border-gray-200 bg-gray-50 px-3 py-3"
                      >
                        <p
                          className="text-2xl font-semibold text-gray-900 leading-none"
                          style={{ fontFamily: `"${f.family}", sans-serif` }}
                        >
                          Aa
                        </p>
                        <p className="mt-2 text-[11px] font-semibold text-gray-700 truncate">
                          {f.family}
                        </p>
                        <p className="text-[10px] text-gray-500 capitalize">
                          {f.role}
                        </p>
                      </div>
                    ))}
                  </div>
                ) : (
                  <button
                    type="button"
                    onClick={() => onEditSection('visual')}
                    className="w-full rounded-xl border border-dashed border-gray-300 bg-gray-50 px-3 py-6 text-xs text-gray-500 hover:border-brand-300 hover:text-brand-700"
                  >
                    Añadir tipografías en Visual
                  </button>
                )}
              </div>

              <div className="space-y-2">
                <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500 inline-flex items-center gap-1.5">
                  <Palette className="h-3.5 w-3.5" /> Colores
                </p>
                {colors.length ? (
                  <div className="flex flex-wrap gap-3">
                    {colors.map((c) => (
                      <div key={c.id} className="flex flex-col items-center gap-1.5">
                        <span
                          className="h-11 w-11 rounded-full border border-black/10 shadow-sm"
                          style={{ background: c.hex }}
                          title={`${c.name} ${c.hex}`}
                        />
                        <span className="text-[10px] font-mono text-gray-600">
                          {c.hex}
                        </span>
                      </div>
                    ))}
                  </div>
                ) : (
                  <button
                    type="button"
                    onClick={() => onEditSection('visual')}
                    className="w-full rounded-xl border border-dashed border-gray-300 bg-gray-50 px-3 py-4 text-xs text-gray-500 hover:border-brand-300"
                  >
                    Definir paleta en Visual
                  </button>
                )}
              </div>
            </div>
          </section>

          {/* Tagline */}
          <section className="rounded-2xl border border-gray-200 bg-gradient-to-r from-brand-50/80 via-white to-sky-50/60 px-5 py-6">
            <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
              Tagline
            </p>
            {book.tagline ? (
              <p className="mt-2 text-xl sm:text-2xl font-semibold text-brand-800 leading-snug">
                {book.tagline}
              </p>
            ) : (
              <button
                type="button"
                onClick={() => onEditSection('identidad')}
                className="mt-2 text-sm text-gray-400 italic hover:text-brand-700"
              >
                Añadir tagline en Identidad →
              </button>
            )}
          </section>

          <div className="grid gap-6 lg:grid-cols-3">
            <PillRow
              title="Valores de marca"
              items={values}
              emptyHint="Completa valores en Identidad"
              accent="brand"
            />
            <PillRow
              title="Estética / personalidad"
              items={aesthetic}
              emptyHint="Personalidad + notas visuales"
              accent="violet"
            />
            <PillRow
              title="Tono de voz"
              items={tonePills}
              emptyHint="Define tono en Voz y tono"
              accent="sky"
            />
          </div>

          {/* Business overview */}
          <section className="space-y-2">
            <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
              Business overview
            </p>
            <div className="rounded-2xl border border-gray-200 bg-white px-4 py-4 text-sm leading-relaxed text-gray-700">
              {overviewText ? (
                overviewText
              ) : (
                <button
                  type="button"
                  onClick={() => onEditSection('identidad')}
                  className="text-gray-400 italic hover:text-brand-700"
                >
                  Escribe el elevator pitch o la promesa de marca →
                </button>
              )}
            </div>
          </section>

          {/* Copy real ads / RRSS */}
          <section className="space-y-3">
            <div className="flex items-center justify-between gap-2">
              <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                Copy real (Meta / Google / RRSS)
              </p>
              <button
                type="button"
                onClick={() => onEditSection('ads')}
                className="text-[11px] font-semibold text-brand-700 hover:underline"
              >
                Ver en Ads →
              </button>
            </div>
            {(book.winning_hooks || []).length ||
            (book.ads_usps || []).length ||
            (book.ads_ctas || []).length ? (
              <div className="space-y-3 rounded-2xl border border-amber-200 bg-amber-50/40 px-4 py-4">
                {(book.ads_ctas || []).length ? (
                  <p className="text-xs text-gray-700">
                    <span className="font-semibold">CTAs:</span>{' '}
                    {(book.ads_ctas || []).slice(0, 6).join(' · ')}
                  </p>
                ) : null}
                {(book.ads_usps || []).length ? (
                  <PillRow
                    title="USPs en anuncios"
                    items={(book.ads_usps || []).slice(0, 6)}
                    emptyHint=""
                    accent="amber"
                  />
                ) : null}
                {(book.winning_hooks || []).length ? (
                  <ul className="space-y-1.5 text-xs text-gray-700 list-disc pl-4">
                    {(book.winning_hooks || []).slice(0, 5).map((h) => (
                      <li key={h.slice(0, 40)} className="leading-snug">
                        {h}
                      </li>
                    ))}
                  </ul>
                ) : null}
              </div>
            ) : (
              <button
                type="button"
                onClick={() => onEditSection('ads')}
                className="w-full rounded-xl border border-dashed border-gray-300 bg-gray-50 px-3 py-4 text-xs text-gray-500 hover:border-brand-300"
              >
                Sin copy de ads aún · Auto-rellenar marca o conectar Meta/Google
              </button>
            )}
          </section>

          {/* LinkedIn B2B & Thought Leadership */}
          <section className="space-y-3">
            <div className="flex items-center justify-between gap-2">
              <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                Estrategia LinkedIn B2B & Thought Leadership
              </p>
              <button
                type="button"
                onClick={() => onEditSection('b2b')}
                className="text-[11px] font-semibold text-indigo-700 hover:underline"
              >
                Ver y editar en 9. LinkedIn B2B →
              </button>
            </div>
            {(book.linkedin_themes || []).length ||
            (book.thought_leadership || []).length ||
            (book.case_study_angles || []).length ? (
              <div className="space-y-3 rounded-2xl border border-indigo-200 bg-indigo-50/40 px-5 py-4">
                {(book.linkedin_themes || []).length ? (
                  <PillRow
                    title="Temas prioritarios LinkedIn"
                    items={(book.linkedin_themes || []).slice(0, 5)}
                    emptyHint=""
                    accent="sky"
                  />
                ) : null}
                {(book.thought_leadership || []).length ? (
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                      Posicionamiento de Autoridad / Thought Leadership
                    </p>
                    <ul className="space-y-1.5 text-xs text-gray-700 list-disc pl-4">
                      {(book.thought_leadership || []).slice(0, 3).map((tl, i) => (
                        <li key={i} className="leading-snug">
                          {tl}
                        </li>
                      ))}
                    </ul>
                  </div>
                ) : null}
                {(book.buyer_roles || []).length ? (
                  <div className="space-y-1">
                    <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                      Buyer Roles B2B
                    </p>
                    <p className="text-xs text-gray-700 font-medium">
                      {(book.buyer_roles || []).slice(0, 4).join(' · ')}
                    </p>
                  </div>
                ) : null}
                {(book.case_study_angles || []).length ? (
                  <div className="space-y-1.5">
                    <p className="text-[11px] font-bold uppercase tracking-[0.14em] text-gray-500">
                      Casos de estudio B2B observados
                    </p>
                    <ul className="space-y-1 text-xs text-gray-700 list-disc pl-4">
                      {(book.case_study_angles || []).slice(0, 3).map((cs, i) => (
                        <li key={i} className="leading-snug">
                          {cs}
                        </li>
                      ))}
                    </ul>
                  </div>
                ) : null}
                {(book.linkedin_cta || []).length ? (
                  <p className="text-xs text-gray-700 pt-1 border-t border-indigo-100">
                    <span className="font-semibold text-indigo-900">CTAs de baja fricción:</span>{' '}
                    {(book.linkedin_cta || []).slice(0, 3).join(' · ')}
                  </p>
                ) : null}
              </div>
            ) : (
              <button
                type="button"
                onClick={() => onEditSection('b2b')}
                className="w-full rounded-xl border border-dashed border-gray-300 bg-gray-50 px-3 py-4 text-xs text-gray-500 hover:border-brand-300"
              >
                Sin estrategia LinkedIn B2B configurada · Configurar en 9. LinkedIn B2B →
              </button>
            )}
          </section>
        </div>
  );

  const footer = (
        <div
          className={`flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between ${
            embedded
              ? 'border-t border-gray-100 pt-4'
              : 'border-t border-gray-200 bg-gray-50 px-5 py-4 sm:px-6'
          }`}
        >
          <div className="min-w-0 flex-1">
            <div className="flex items-center justify-between gap-3">
              <p className="text-xs font-semibold text-gray-800">
                {score}% completo
              </p>
              {score >= 100 ? (
                <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-700">
                  <CheckCircle2 className="h-3.5 w-3.5" /> Kit sólido
                </span>
              ) : missing[0] ? (
                <p className="truncate text-[11px] text-amber-700">
                  Falta: {missing.slice(0, 2).join(' · ')}
                </p>
              ) : null}
            </div>
            <div className="mt-2 h-2 overflow-hidden rounded-full bg-gray-200">
              <div
                className="h-full rounded-full bg-brand-500 transition-all"
                style={{ width: `${Math.min(100, Math.max(0, score))}%` }}
              />
            </div>
          </div>
          <button
            type="button"
            onClick={onContinueEdit}
            className="inline-flex shrink-0 items-center justify-center gap-2 rounded-xl bg-brand-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-brand-700"
          >
            {score >= 80 ? 'Seguir editando' : 'Completar marca'}
            <ArrowRight className="h-4 w-4" />
          </button>
        </div>
  );

  if (embedded) {
    return (
      <div className="space-y-6">
        {header}
        {content}
        {footer}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <Surface className="!p-0 overflow-hidden border-gray-200">
        {header}
        {content}
        {footer}
      </Surface>
    </div>
  );
}