'use client';

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

interface Obligation { id: string; title: string; status: string; category: string; dueDate: string | null; riskLevel: string | null; }
interface Risk { id: string; title: string; status: string; probability: string; impact: string; riskScore: number | null; }
interface Contract { id: string; title: string; status: string; endDate: string | null; contractType: string; }
interface Transaction { id: string; description: string | null; amountMinorUnits: string; currency: string; evidenceStatus: string; transactionDate: string; }

const B = '/dashboard';

function daysUntil(d: string) { return Math.ceil((new Date(d).getTime() - Date.now()) / 86400_000); }

function ScoreBar({ value, max = 100, cls = '' }: { value: number; max?: number; cls?: string }) {
  const pct = Math.min(100, Math.round((value / max) * 100));
  return (
    <div className="h-2 rounded-full bg-muted/50">
      <div className={`h-2 rounded-full transition-all ${cls}`} style={{ width: `${pct}%` }} />
    </div>
  );
}

export default function CompliancePage() {
  const { activeTenant } = useSession();
  const tenantId = activeTenant?.tenantId ?? '';

  const { data: obligs = [] } = useQuery({
    queryKey: ['comp-obligs', tenantId],
    queryFn: () => apiFetch<Obligation[]>('/v1/obligations?status=pending&limit=100', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 60_000,
  });
  const { data: risks = [] } = useQuery({
    queryKey: ['comp-risks', tenantId],
    queryFn: () => apiFetch<Risk[]>('/v1/risks?status=open&limit=100', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 60_000,
  });
  const { data: contracts = [] } = useQuery({
    queryKey: ['comp-contracts', tenantId],
    queryFn: () => apiFetch<Contract[]>('/v1/contracts?status=active', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 120_000,
  });
  const { data: txMissing = [] } = useQuery({
    queryKey: ['comp-tx', tenantId],
    queryFn: () => apiFetch<Transaction[]>('/v1/transactions?evidenceStatus=missing&limit=200', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 60_000,
  });
  const { data: allTx = [] } = useQuery({
    queryKey: ['comp-tx-all', tenantId],
    queryFn: () => apiFetch<Transaction[]>('/v1/transactions?limit=500', { tenantId }),
    enabled: Boolean(tenantId), staleTime: 120_000,
  });

  const overdueObligs = obligs.filter((o) => o.dueDate && daysUntil(o.dueDate) < 0);
  const urgentObligs  = obligs.filter((o) => o.dueDate && daysUntil(o.dueDate) >= 0 && daysUntil(o.dueDate) <= 30);
  const criticalRisks = risks.filter((r) => (r.riskScore ?? 0) >= 12);
  const highRisks     = risks.filter((r) => (r.riskScore ?? 0) >= 6 && (r.riskScore ?? 0) < 12);
  const expiringContracts = contracts.filter((c) => c.endDate && daysUntil(c.endDate) <= 60);

  const evidencePct = allTx.length > 0
    ? Math.round(allTx.filter((t) => t.evidenceStatus === 'complete' || t.evidenceStatus === 'not_required').length / allTx.length * 100)
    : 100;

  // Compliance health score (0-100)
  const score = Math.max(0, 100
    - overdueObligs.length * 15
    - criticalRisks.length * 10
    - highRisks.length * 5
    - expiringContracts.filter((c) => daysUntil(c.endDate!) <= 14).length * 8
    - Math.round((100 - evidencePct) * 0.3)
  );

  const scoreColor = score >= 80 ? 'text-signal-ok' : score >= 60 ? 'text-signal-warn' : 'text-signal-danger';
  const scoreBarCls = score >= 80 ? 'bg-signal-ok' : score >= 60 ? 'bg-signal-warn' : 'bg-signal-danger';

  return (
    <div className="max-w-5xl space-y-6 p-6">
      <div>
        <h1 className="font-display text-2xl font-semibold text-ink">Dashboard Conformitate</h1>
        <p className="text-sm text-ink-faint mt-1">Vedere consolidată a riscurilor, obligațiilor și dovezilor</p>
      </div>

      {/* Health score */}
      <div className="card p-6">
        <div className="flex items-end justify-between mb-3">
          <div>
            <h2 className="text-xs font-semibold uppercase tracking-wider text-ink-faint mb-1">Scor Conformitate</h2>
            <p className={`font-display text-5xl font-bold ${scoreColor}`}>{score}</p>
            <p className="text-xs text-ink-faint mt-1">/100 — actualizat în timp real</p>
          </div>
          <div className="text-right space-y-1">
            <div className="flex items-center gap-2 justify-end">
              <span className="w-2 h-2 rounded-full bg-signal-ok" />
              <span className="text-xs text-ink-faint">≥80 Bine</span>
            </div>
            <div className="flex items-center gap-2 justify-end">
              <span className="w-2 h-2 rounded-full bg-signal-warn" />
              <span className="text-xs text-ink-faint">60–79 Atenție</span>
            </div>
            <div className="flex items-center gap-2 justify-end">
              <span className="w-2 h-2 rounded-full bg-signal-danger" />
              <span className="text-xs text-ink-faint">&lt;60 Critic</span>
            </div>
          </div>
        </div>
        <ScoreBar value={score} cls={scoreBarCls} />
      </div>

      {/* 4 summary cards */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        {[
          { label: 'Obligații scadente', val: overdueObligs.length, cls: 'text-signal-danger', link: `${B}/obligations`, warn: overdueObligs.length > 0 },
          { label: 'Riscuri critice',    val: criticalRisks.length,  cls: 'text-signal-danger', link: `${B}/risks`,       warn: criticalRisks.length > 0 },
          { label: 'Contracte expirate', val: expiringContracts.length, cls: 'text-signal-warn', link: `${B}/contracts`,  warn: expiringContracts.length > 0 },
          { label: 'Acoperire dovezi',   val: `${evidencePct}%`, cls: evidencePct >= 80 ? 'text-signal-ok' : 'text-signal-warn', link: `${B}/evidence`, warn: evidencePct < 80 },
        ].map(({ label, val, cls, link, warn }) => (
          <Link key={label} href={link}
            className={`card p-4 text-center hover:border-primary/40 transition-colors ${warn ? 'bg-signal-danger/5' : ''}`}>
            <p className={`font-display text-3xl font-bold ${cls}`}>{val}</p>
            <p className="text-xs text-ink-faint mt-1">{label}</p>
          </Link>
        ))}
      </div>

      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
        {/* Overdue obligations */}
        <div className="card p-5 space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-semibold text-ink">
              Obligații <span className="text-signal-danger">depășite</span> ({overdueObligs.length + urgentObligs.length})
            </h2>
            <Link href={`${B}/obligations`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
          </div>
          {overdueObligs.length + urgentObligs.length === 0 ? (
            <p className="text-xs text-center text-ink-faint py-4">✅ Nicio obligație urgentă</p>
          ) : (
            <div className="divide-y divide-border/50 max-h-64 overflow-y-auto">
              {[...overdueObligs, ...urgentObligs].slice(0, 10).map((o) => {
                const days = o.dueDate ? daysUntil(o.dueDate) : null;
                return (
                  <div key={o.id} className="flex items-start gap-3 py-2.5">
                    <span className={`text-lg ${days !== null && days < 0 ? 'text-signal-danger' : 'text-signal-warn'}`}>
                      {days !== null && days < 0 ? '🔴' : '🟡'}
                    </span>
                    <div className="flex-1 min-w-0">
                      <p className="text-xs font-medium text-ink truncate">{o.title}</p>
                      <p className="text-[10px] text-ink-faint mt-0.5">
                        {o.category}{days !== null ? ` · ${days < 0 ? `${Math.abs(days)}z depășit` : `${days}z rămase`}` : ''}
                      </p>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Critical & high risks */}
        <div className="card p-5 space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-semibold text-ink">
              Riscuri <span className="text-signal-danger">critice/ridicate</span> ({criticalRisks.length + highRisks.length})
            </h2>
            <Link href={`${B}/risks`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
          </div>
          {criticalRisks.length + highRisks.length === 0 ? (
            <p className="text-xs text-center text-ink-faint py-4">✅ Niciun risc critic deschis</p>
          ) : (
            <div className="divide-y divide-border/50 max-h-64 overflow-y-auto">
              {[...criticalRisks, ...highRisks].slice(0, 10).map((r) => (
                <div key={r.id} className="flex items-start gap-3 py-2.5">
                  <span className={`font-bold text-sm ${(r.riskScore ?? 0) >= 12 ? 'text-signal-danger' : 'text-signal-warn'}`}>
                    {r.riskScore ?? '?'}
                  </span>
                  <div className="flex-1 min-w-0">
                    <p className="text-xs font-medium text-ink truncate">{r.title}</p>
                    <p className="text-[10px] text-ink-faint mt-0.5">{r.probability}/{r.impact}</p>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Expiring contracts */}
        <div className="card p-5 space-y-3">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-semibold text-ink">
              Contracte cu termen ({expiringContracts.length})
            </h2>
            <Link href={`${B}/contracts`} className="text-xs text-bronze-deep hover:underline">Toate →</Link>
          </div>
          {expiringContracts.length === 0 ? (
            <p className="text-xs text-center text-ink-faint py-4">✅ Niciun contract expirant în 60 zile</p>
          ) : (
            <div className="divide-y divide-border/50">
              {expiringContracts.slice(0, 8).map((c) => {
                const days = daysUntil(c.endDate!);
                return (
                  <div key={c.id} className="flex items-center justify-between py-2.5 gap-3">
                    <p className="text-xs font-medium text-ink truncate flex-1">{c.title}</p>
                    <span className={`text-[10px] font-semibold shrink-0 ${days <= 14 ? 'text-signal-danger' : 'text-signal-warn'}`}>
                      {days}z
                    </span>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* Evidence coverage */}
        <div className="card p-5 space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-semibold text-ink">Acoperire Dovezi</h2>
            <Link href={`${B}/evidence`} className="text-xs text-bronze-deep hover:underline">Centru dovezi →</Link>
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between text-xs">
              <span className="text-ink-faint">Acoperire totală</span>
              <span className={`font-semibold ${scoreColor}`}>{evidencePct}%</span>
            </div>
            <ScoreBar value={evidencePct} cls={scoreBarCls} />
          </div>
          <div className="space-y-2">
            <div className="flex justify-between text-xs">
              <span className="text-signal-danger">Lipsă dovadă</span>
              <span className="font-mono font-medium text-ink">{txMissing.length} tranzacții</span>
            </div>
            {txMissing.slice(0, 4).map((tx) => (
              <div key={tx.id} className="flex items-center justify-between py-1 border-t border-border/30">
                <span className="text-[10px] text-ink-faint truncate flex-1">{tx.description ?? tx.transactionDate}</span>
                <span className="text-[10px] font-mono text-signal-danger shrink-0 ml-2">
                  {(parseFloat(tx.amountMinorUnits) / 100).toFixed(0)} {tx.currency}
                </span>
              </div>
            ))}
            {txMissing.length > 4 && (
              <p className="text-[10px] text-ink-faint text-center">și alte {txMissing.length - 4}…</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}