'use client';

/**
 * IncomeGroupsCard — Donut chart of income categories with totals.
 *
 * Displays "Grupos de Ingresos Más Altos" heading, a PieChartWidget donut
 * chart showing income categories (Synchronisation, Digital Mechanical, etc.),
 * CLP amounts and percentages, a total, and a "Ver más" link.
 *
 * Requirements: 10.1, 10.2, 10.3, 10.4, 10.5
 */

import Link from 'next/link';
import type { PortalIncomeGroup } from '@/lib/mock-data/types';
import { useCompactCurrencyFormatter } from '@/lib/hooks/useCurrencyFormatter';
import PieChartWidget from '@/components/charts/PieChartWidget';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface IncomeGroupsCardProps {
  groups: PortalIncomeGroup[];
}

export default function IncomeGroupsCard({ groups }: IncomeGroupsCardProps) {
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();
  const totalAmount = groups.reduce((sum, g) => sum + g.amount, 0);

  // Transform data for PieChartWidget (expects { name, value } items)
  const chartData = groups.map((group) => ({
    name: group.category,
    value: group.amount,
  }));

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-5">
      <h2 className="mb-4 text-lg font-semibold text-divisi-text-primary">
        {t.portal.incomeGroupsTitle}
      </h2>

      {/* Donut Chart */}
      <PieChartWidget data={chartData} height={250} innerRadius={50} />

      {/* Category breakdown */}
      <ul className="mt-4 space-y-2">
        {groups.map((group) => (
          <li key={group.category} className="flex items-center justify-between">
            <span className="text-sm text-divisi-text-primary">
              {group.category}
            </span>
            <div className="flex items-center gap-3">
              <span className="text-sm text-divisi-text-primary">
                {fmtMoney(group.amount)}
              </span>
              <span className="text-xs text-divisi-text-secondary w-12 text-right">
                {group.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.mainIncomeTypes}
        </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/income-groups"
          className="text-sm font-medium text-divisi-accent hover:text-divisi-accent-hover transition-colors"
        >
          {t.portal.seeMore}
        </Link>
      </div>
    </div>
  );
}