'use client';

/**
 * TerritoriesCard — Bar chart of territories with legend and totals.
 *
 * Displays "Territorios Principales" heading, a BarChartWidget showing
 * territories (Chile, United States, Spain, Peru), a legend, CLP amounts
 * and percentages, a total, and a "Ver más" link.
 *
 * Requirements: 12.1, 12.2, 12.3, 12.4, 12.5
 */

import Link from 'next/link';
import type { PortalTerritory } from '@/lib/mock-data/types';
import { useCompactCurrencyFormatter } from '@/lib/hooks/useCurrencyFormatter';
import BarChartWidget from '@/components/charts/BarChartWidget';
import { chartColors } from '@/lib/constants/theme';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface TerritoriesCardProps {
  territories: PortalTerritory[];
}

export default function TerritoriesCard({ territories }: TerritoriesCardProps) {
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();
  const totalAmount = territories.reduce((sum, t) => sum + t.amount, 0);

  // Transform data for BarChartWidget
  const chartData = territories.map((territory) => ({
    country: territory.country,
    amount: territory.amount,
  }));

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-5">
      <h2 className="mb-4 flex items-center gap-2 text-lg font-semibold text-divisi-text-primary">
        <svg className="h-5 w-5 text-divisi-accent flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="10" />
          <line x1="2" y1="12" x2="22" y2="12" />
          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
        </svg>
        {t.portal.territoriesTitle}
      </h2>

      {/* Vertical Bar Chart with legend */}
      <BarChartWidget
        data={chartData}
        xKey="country"
        bars={[{ dataKey: 'amount', color: chartColors.tertiary, name: 'Ingresos' }]}
        height={250}
        layout="vertical"
        showLegend
      />

      {/* Territory breakdown */}
      <ul className="mt-4 space-y-2">
        {territories.map((territory) => (
          <li key={territory.country} className="flex items-center justify-between">
            <span className="text-sm text-divisi-text-primary">
              {territory.country}
            </span>
            <div className="flex items-center gap-3">
              <span className="text-sm text-divisi-text-primary">
                {fmtMoney(territory.amount)}
              </span>
              <span className="text-xs text-divisi-text-secondary w-12 text-right">
                {territory.percentage.toFixed(1)}%
              </span>
            </div>
          </li>
        ))}
      </ul>

      {/* Total */}
      <div className="mt-4 border-t border-divisi-border pt-3 flex items-center justify-between">
        <span className="text-xs font-semibold text-divisi-text-secondary uppercase">
          {t.portal.allTerritories}
        </span>
        <span className="text-sm font-bold text-divisi-text-primary">
          {fmtMoney(totalAmount)}
        </span>
      </div>

      {/* Ver más link */}
      <div className="mt-3">
        <Link
          href="/portal/analytics/territories"
          className="text-sm font-medium text-divisi-accent hover:text-divisi-accent-hover transition-colors"
        >
          {t.portal.seeMore}
        </Link>
      </div>
    </div>
  );
}