'use client';

/**
 * TopSongsCard — Ranked list of top-earning songs with percentage bars.
 *
 * Displays "Mejores Canciones" heading, a ranked list of songs showing
 * title, composers, income in CLP, and a percentage bar. Includes a
 * total at the bottom and a "Ver más" link.
 *
 * Requirements: 9.1, 9.2, 9.3, 9.4
 */

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

interface TopSongsCardProps {
  songs: PortalTopSong[];
}

export default function TopSongsCard({ songs }: TopSongsCardProps) {
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();
  const sortedSongs = [...songs].sort((a, b) => b.income - a.income);
  const totalIncome = songs.reduce((sum, s) => sum + s.income, 0);

  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.topSongsTitle}
      </h2>

      <ul className="space-y-3">
        {sortedSongs.map((song, index) => (
          <li key={song.id} className="space-y-1">
            <div className="flex items-start justify-between gap-2">
              <div className="min-w-0 flex-1">
                <p className="text-sm font-medium text-divisi-text-primary truncate">
                  {index + 1}. {song.title}
                </p>
                <p className="text-xs text-divisi-text-secondary truncate">
                  {song.composers.join(', ')}
                </p>
              </div>
              <span className="flex-shrink-0 text-sm font-medium text-divisi-text-primary">
                {fmtMoney(song.income)}
              </span>
            </div>
            {/* Percentage bar */}
            <div className="flex items-center gap-2">
              <div className="h-1.5 flex-1 rounded-full bg-divisi-bg">
                <div
                  className="h-1.5 rounded-full bg-divisi-accent transition-all"
                  style={{ width: `${Math.min(song.percentage, 100)}%` }}
                />
              </div>
              <span className="text-xs text-divisi-text-secondary w-10 text-right">
                {song.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.allSongs}
        </span>
        <span className="text-sm font-bold text-divisi-text-primary">
          {fmtMoney(totalIncome)}
        </span>
      </div>

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