'use client';

import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import { apiFetch } from '../../../lib/api';
import type { SavedSegment, ResearchBrief, FinancialSignal } from '../../../lib/api';
import { useSession } from '../../../components/session-provider';

const B = '/dashboard';

const SEV_CFG = {
  critical: { borderClass: 'border-l-signal-danger', badgeClass: 'bg-signal-danger text-white', icon: '!' },
  warning:  { borderClass: 'border-l-signal-warn',   badgeClass: 'bg-signal-warn text-white',   icon: '⚠' },
  info:     { borderClass: 'border-l-bronze-deep',   badgeClass: 'bg-bronze-wash text-bronze-deep', icon: 'i' },
} as const;

const CAT_LABEL: Record<string, string> = {
  macro: 'Macro', fx: 'Valute', rates: 'Rate', news: 'Știri', commodity: 'Materii prime',
};

export default function IntelligenceOverviewPage() {
  const { activeTenant } = useSession();
  const tenantId = activeTenant?.tenantId ?? '';
  const opts = { enabled: Boolean(tenantId), staleTime: 60_000 };

  const { data: segments = [], isLoading: loadingSegs } = useQuery({
    queryKey: ['segments-intel', tenantId],
    queryFn: () => apiFetch<SavedSegment[]>('/v1/segments', { tenantId }),
    ...opts,
  });

  const { data: briefs = [], isLoading: loadingBriefs } = useQuery({
    queryKey: ['briefs-intel', tenantId],
    queryFn: () => apiFetch<ResearchBrief[]>('/v1/research-briefs', { tenantId }),
    ...opts,
  });

  const { data: signals = [], isLoading: loadingSignals } = useQuery({
    queryKey: ['financial-signals', tenantId],
    queryFn: () => apiFetch<FinancialSignal[]>('/v1/financial-intelligence/signals?limit=20', { tenantId }),
    ...opts,
    staleTime: 300_000,
  });

  const isLoading = loadingSegs || loadingBriefs || loadingSignals;

  const recentBriefs = [...briefs].sort(
    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
  ).slice(0, 4);

  const criticalSignals = signals.filter((s) => s.severity === 'critical');
  const warningSignals  = signals.filter((s) => s.severity === 'warning');
  const lastSignalAt = signals[0]?.publishedAt;

  return (
    <div className="max-w-5xl space-y-6">
      <div>
        <h1 className="font-display text-2xl font-semibold text-ink">Intelligence Overview</h1>
        <p className="mt-1 text-sm text-ink-faint">
          Motorul de intelligence B2B + semnale de piață financiară internațională.
        </p>
      </div>

      {isLoading ? (
        <p className="text-sm text-ink-faint">Se încarcă…</p>
      ) : (
        <>
          {/* ── MARKET SIGNALS ─────────────────────────────────────────── */}
          <section className="space-y-3">
            <div className="flex items-center justify-between">
              <h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">
                Market Intelligence
                {(criticalSignals.length > 0 || warningSignals.length > 0) && (
                  <span className="ml-2 rounded-full bg-signal-danger px-2 py-0.5 text-[10px] text-white">
                    {criticalSignals.length + warningSignals.length} alerte
                  </span>
                )}
              </h2>
              {lastSignalAt && (
                <span className="text-[11px] text-ink-line">
                  Actualizat: {new Date(lastSignalAt).toLocaleString('ro-RO', {
                    month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit',
                  })}
                </span>
              )}
            </div>

            {signals.length === 0 ? (
              <div className="card p-8 text-center">
                <p className="text-sm font-medium text-ink">Niciun semnal de piață disponibil</p>
                <p className="mt-1 text-xs text-ink-faint">
                  Semnalele sunt generate automat de n8n din World Bank, IMF și Eurostat.
                </p>
                <p className="mt-2 text-[11px] font-mono text-ink-line">
                  Importați workflow-ul n8n din /dashboard/data sau contactați administratorul.
                </p>
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                {signals.slice(0, 8).map((sig) => {
                  const cfg = SEV_CFG[sig.severity as keyof typeof SEV_CFG] ?? SEV_CFG.info;
                  return (
                    <article
                      key={sig.id}
                      className={`card border-l-2 ${cfg.borderClass} px-4 py-3`}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="min-w-0 flex-1">
                          <div className="flex flex-wrap items-center gap-1.5">
                            <span className={`rounded px-1.5 py-0.5 text-[10px] font-semibold ${cfg.badgeClass}`}>
                              {cfg.icon}
                            </span>
                            <span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] text-ink-faint capitalize">
                              {CAT_LABEL[sig.category] ?? sig.category}
                            </span>
                            <span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] text-ink-faint uppercase">
                              {sig.region}
                            </span>
                            {sig.niche && (
                              <span className="rounded bg-bronze-wash px-1.5 py-0.5 text-[10px] font-medium text-bronze-deep capitalize">
                                {sig.niche}
                              </span>
                            )}
                          </div>
                          <p className="mt-1.5 text-sm font-semibold text-ink leading-snug">
                            {sig.title}
                          </p>
                          {sig.rawValue != null && (
                            <p className="mt-0.5 font-mono text-xs text-ink-faint">
                              {Number(sig.rawValue).toFixed(2)}{sig.unit ? ` ${sig.unit}` : ''}
                              {sig.changePercent != null && (
                                <span className={Number(sig.changePercent) >= 0 ? 'text-signal-ok ml-1' : 'text-signal-danger ml-1'}>
                                  ({Number(sig.changePercent) >= 0 ? '+' : ''}{Number(sig.changePercent).toFixed(2)}%)
                                </span>
                              )}
                            </p>
                          )}
                          <p className="mt-1 text-xs text-ink-faint leading-relaxed line-clamp-2">{sig.summary}</p>
                        </div>
                        <div className="shrink-0 text-right">
                          <p className="text-[10px] text-ink-line font-mono uppercase">{sig.source}</p>
                          <p className="text-[10px] text-ink-line">
                            {new Date(sig.publishedAt).toLocaleDateString('ro-RO')}
                          </p>
                        </div>
                      </div>
                    </article>
                  );
                })}
                {signals.length > 8 && (
                  <div className="card p-4 text-center text-xs text-ink-faint lg:col-span-2">
                    +{signals.length - 8} semnale suplimentare disponibile
                  </div>
                )}
              </div>
            )}
          </section>

          {/* ── B2B INTELLIGENCE STATS ─────────────────────────────────── */}
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
            {[
              { label: 'Segmente salvate', value: segments.length, href: `${B}/segments` },
              { label: 'Research Briefs', value: briefs.length, href: `${B}/research` },
              { label: 'Companii B2B', value: '147M+', href: `${B}/companies` },
              { label: 'Semnale piață', value: signals.length, href: '#' },
            ].map((s) => (
              <Link key={s.label} href={s.href} className="card p-5 hover:border-bronze-deep transition-colors">
                <p className="text-xs font-medium uppercase tracking-wider text-ink-faint">{s.label}</p>
                <p className="mt-1 font-display text-3xl font-semibold text-ink">{s.value}</p>
              </Link>
            ))}
          </div>

          {/* ── B2B MODULES ────────────────────────────────────────────── */}
          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <section className="card p-5">
              <div className="mb-4 flex items-center justify-between">
                <h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Research recente</h2>
                <Link href={`${B}/research`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
              </div>
              {recentBriefs.length === 0 ? (
                <p className="text-sm text-ink-faint">Niciun brief creat.</p>
              ) : (
                <ul className="space-y-3">
                  {recentBriefs.map((b) => (
                    <li key={b.id} className="border-b border-paper-sunken pb-3 last:border-0 last:pb-0">
                      <p className="text-sm font-medium text-ink">{b.title}</p>
                      <div className="mt-1 flex items-center gap-2">
                        <span className="rounded bg-paper-sunken px-1.5 py-0.5 text-[10px] font-medium capitalize text-ink-faint">{b.status}</span>
                        <span className="text-[11px] text-ink-line">{new Date(b.createdAt).toLocaleDateString('ro-RO')}</span>
                      </div>
                    </li>
                  ))}
                </ul>
              )}
            </section>

            <section className="card p-5">
              <div className="mb-4 flex items-center justify-between">
                <h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint">Segmente active</h2>
                <Link href={`${B}/segments`} className="text-xs text-bronze-deep hover:underline">Gestionează →</Link>
              </div>
              {segments.length === 0 ? (
                <p className="text-sm text-ink-faint">Niciun segment salvat.</p>
              ) : (
                <ul className="space-y-2">
                  {segments.slice(0, 6).map((s) => (
                    <li key={s.id} className="flex items-center justify-between">
                      <p className="min-w-0 truncate text-sm text-ink">{s.name}</p>
                      <span className="ml-2 shrink-0 rounded-full bg-paper-sunken px-2 py-0.5 font-mono text-[10px] text-ink-faint">
                        limit {s.resultLimit}
                      </span>
                    </li>
                  ))}
                  {segments.length > 6 && (
                    <li className="text-xs text-ink-faint">+{segments.length - 6} mai multe</li>
                  )}
                </ul>
              )}
            </section>

            {/* Capability map */}
            <section className="card p-5 lg:col-span-2">
              <h2 className="mb-4 text-xs font-semibold uppercase tracking-wider text-ink-faint">
                Capabilități Intelligence
              </h2>
              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                {[
                  { label: 'Company Search', status: 'live', href: `${B}/companies` },
                  { label: 'Saved Segments', status: 'live', href: `${B}/segments` },
                  { label: 'Research Briefs', status: 'live', href: `${B}/research` },
                  { label: 'Market Signals', status: signals.length > 0 ? 'live' : 'setup', href: '#' },
                  { label: 'People Intelligence', status: 'a3', href: '#' },
                  { label: 'Market Intelligence', status: 'a4', href: '#' },
                  { label: 'Insights Engine', status: 'a3', href: '#' },
                  { label: 'Digital Twin', status: 'a4', href: '#' },
                ].map((cap) => (
                  <div key={cap.label} className={`rounded-lg border px-3 py-2 ${cap.status === 'live' ? 'border-signal-ok/30 bg-signal-ok/5' : cap.status === 'setup' ? 'border-signal-warn/30 bg-signal-warn/5' : 'border-paper-sunken bg-paper-sunken/50'}`}>
                    <p className="text-xs font-medium text-ink">{cap.label}</p>
                    <span className={`mt-0.5 inline-block text-[10px] font-semibold uppercase ${cap.status === 'live' ? 'text-signal-ok' : cap.status === 'setup' ? 'text-signal-warn' : 'text-ink-line'}`}>
                      {cap.status === 'live' ? '● live' : cap.status === 'setup' ? '○ setup' : cap.status}
                    </span>
                  </div>
                ))}
              </div>
            </section>
          </div>
        </>
      )}
    </div>
  );
}