import { StatCard } from './StatCard';
import type { NationalStats, CountyStats } from './types';
import { formatRON, formatCount } from './utils';

interface NationalProps {
  national: NationalStats | null;
  counties: CountyStats[];
}

export function NationalPanel({ national, counties }: NationalProps) {
  if (!national) return null;

  const totalValue = Number(national.total_value);
  const matched = national.uats_with_data;
  const totalUats = matched + (national.unmatched_cuis || 0);
  const matchPct = totalUats > 0 ? Math.round((matched / totalUats) * 100) : 0;

  return (
    <div className="harta-statcol">
      <div className="harta-statcol-header">
        <div className="harta-statcol-kicker">SEAP · e-licitație.ro</div>
        <h2 className="harta-statcol-title">Imagine de ansamblu</h2>
      </div>

      <div className="harta-statcol-hero">
        <div className="harta-statcol-hero-label">Valoare totală anunțuri</div>
        <div className="harta-statcol-hero-value tabular-nums">
          {formatRON(totalValue)} <span className="harta-statcol-hero-unit">RON</span>
        </div>
      </div>

      <div className="harta-statcol-grid">
        <StatCard label="Achiziții directe" value={formatCount(national.total_da)} accent="primary" />
        <StatCard label="Contracte" value={formatCount(national.total_contracts)} accent="primary" />
        <StatCard label="Autorități" value={formatCount(national.total_authorities)} accent="neutral" />
        <StatCard label="Furnizori" value={formatCount(national.total_suppliers)} accent="neutral" />
      </div>

      <div className="harta-statcol-progress">
        <div className="flex items-center justify-between mb-1.5">
          <span className="harta-statcol-progress-label">UAT-uri cu date geolocalizate</span>
          <span className="harta-statcol-progress-num tabular-nums">{matchPct}%</span>
        </div>
        <div className="harta-statcol-progress-track">
          <div className="harta-statcol-progress-fill" style={{ width: `${matchPct}%` }} />
        </div>
        <div className="harta-statcol-progress-hint">
          {formatCount(matched)} UAT din {formatCount(totalUats)} autorități contractante
        </div>
      </div>

      {counties.length > 0 && (
        <div className="harta-statcol-block">
          <div className="harta-statcol-block-title">Top județe după valoare</div>
          <div className="harta-statcol-bars">
            {counties.slice(0, 10).map((c, i) => {
              const max = Number(counties[0].total_value) || 1;
              const pct = (Number(c.total_value) / max) * 100;
              return (
                <div key={c.county} className="harta-statcol-bar">
                  <div className="harta-statcol-bar-label">
                    <span className="harta-statcol-bar-rank">{String(i + 1).padStart(2, '0')}</span>
                    <span className="truncate">{c.county}</span>
                  </div>
                  <div className="harta-statcol-bar-track">
                    <div className="harta-statcol-bar-fill" style={{ width: `${pct}%` }} />
                  </div>
                  <div className="harta-statcol-bar-value tabular-nums">{formatRON(Number(c.total_value))}</div>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

interface UatProps {
  detail: any;
  onClose: () => void;
}

export function UatDetailPanel({ detail, onClose }: UatProps) {
  const stats = detail?.stats;
  if (!stats) return null;

  return (
    <div className="harta-statcol">
      <div className="harta-statcol-header">
        <button onClick={onClose} className="harta-statcol-back">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="15 18 9 12 15 6" />
          </svg>
          <span>înapoi la statistici naționale</span>
        </button>
        <div className="harta-statcol-kicker">{stats.county || '—'}</div>
        <h2 className="harta-statcol-title">{stats.uat_name}</h2>
      </div>

      <div className="harta-statcol-hero">
        <div className="harta-statcol-hero-label">Valoare totală</div>
        <div className="harta-statcol-hero-value tabular-nums">
          {formatRON(Number(stats.total_value))} <span className="harta-statcol-hero-unit">RON</span>
        </div>
        <div className="harta-statcol-hero-sub">{formatCount(stats.total_contracts)} contracte</div>
      </div>

      <div className="harta-statcol-grid">
        <StatCard label="Achiziții directe" value={formatCount(stats.da_count)} accent="primary" />
        <StatCard label="Licitații" value={formatCount(stats.notice_count)} accent="primary" />
      </div>

      {detail.topSuppliers?.length > 0 && (
        <div className="harta-statcol-block">
          <div className="harta-statcol-block-title">Top furnizori</div>
          <div className="harta-statcol-suppliers">
            {detail.topSuppliers.slice(0, 5).map((s: any, i: number) => (
              <div key={i} className="harta-statcol-supplier">
                <div className="harta-statcol-supplier-name">{s.supplier_name}</div>
                <div className="harta-statcol-supplier-meta">
                  <span>{s.contract_count} contracte</span>
                  <span className="tabular-nums font-semibold">{formatRON(Number(s.total_value))} RON</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {detail.recentAcquisitions?.length > 0 && (
        <div className="harta-statcol-block">
          <div className="harta-statcol-block-title">Anunțuri recente</div>
          <div className="harta-statcol-recent">
            {detail.recentAcquisitions.slice(0, 8).map((a: any) => (
              <a
                key={a.id}
                href={a.seap_url || '#'}
                target={a.seap_url ? '_blank' : undefined}
                rel={a.seap_url ? 'noopener noreferrer' : undefined}
                className="harta-statcol-recent-row"
              >
                <div className="harta-statcol-recent-title">{a.name}</div>
                <div className="harta-statcol-recent-meta">
                  <span>{new Date(a.date).toLocaleDateString('ro-RO')}</span>
                  <span className="tabular-nums font-semibold">{formatRON(Number(a.value))} RON</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
