'use client';

/**
 * ExploitationSourcesCard — Horizontal bar chart of exploitation sources.
 *
 * Displays "Resumen de Fuentes de Explotación" heading, a BarChartWidget
 * with horizontal layout showing platforms (Spotify, YouTube, SCD, etc.),
 * CLP amounts and percentage trends, a total, and a "Ver más" link.
 *
 * Requirements: 11.1, 11.2, 11.3, 11.4, 11.5
 */

import Link from 'next/link';
import type { PortalExploitationSource } 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 ExploitationSourcesCardProps {
  sources: PortalExploitationSource[];
}

export default function ExploitationSourcesCard({ sources }: ExploitationSourcesCardProps) {
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();
  const totalAmount = sources.reduce((sum, s) => sum + s.amount, 0);

  // Transform data for BarChartWidget
  const chartData = sources.map((source) => ({
    platform: source.platform,
    amount: source.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.exploitationSourcesTitle}
      </h2>

      {/* Horizontal Bar Chart */}
      <BarChartWidget
        data={chartData}
        xKey="platform"
        bars={[{ dataKey: 'amount', color: chartColors.primary, name: 'Ingresos' }]}
        height={250}
        layout="horizontal"
      />

      {/* Source breakdown with trends */}
      <ul className="mt-4 space-y-2">
        {sources.map((source) => (
          <li key={source.platform} className="flex items-center justify-between">
            <span className="text-sm text-divisi-text-primary">
              {source.platform}
            </span>
            <div className="flex items-center gap-3">
              <span className="text-sm text-divisi-text-primary">
                {fmtMoney(source.amount)}
              </span>
              <span
                className={`text-xs w-14 text-right ${
                  source.trend >= 0
                    ? 'text-green-400'
                    : 'text-red-400'
                }`}
              >
                {source.trend >= 0 ? '+' : ''}{source.trend.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.allSources}
        </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/sources"
          className="text-sm font-medium text-divisi-accent hover:text-divisi-accent-hover transition-colors"
        >
          {t.portal.seeMore}
        </Link>
      </div>
    </div>
  );
}