'use client';

/**
 * PreviousPeriodCard — Displays the previous quarter summary.
 *
 * Shows "Período anterior" heading with the quarter date range, a status
 * badge, the final balance in CLP, an expandable "Mostrar detalles" section,
 * and a "Descargar Declaración" dropdown button.
 *
 * Requirements: 5.1, 5.2, 5.3, 5.4, 5.5
 */

import { useState } from 'react';
import type { PortalPeriod } from '@/lib/mock-data/types';
import { useCompactCurrencyFormatter } from '@/lib/hooks/useCurrencyFormatter';
import { useTranslation } from '@/lib/hooks/useTranslation';

interface PreviousPeriodCardProps {
  period: PortalPeriod;
}

/** Map period status to badge styling */
function statusBadgeClass(status: PortalPeriod['status']): string {
  switch (status) {
    case 'Establecido':
      return 'bg-green-900/40 text-green-400 border-green-700/50';
    case 'Activo':
      return 'bg-blue-900/40 text-blue-400 border-blue-700/50';
    case 'Pendiente':
      return 'bg-yellow-900/40 text-yellow-400 border-yellow-700/50';
    default:
      return 'bg-gray-900/40 text-gray-400 border-gray-700/50';
  }
}

export default function PreviousPeriodCard({ period }: PreviousPeriodCardProps) {
  const [showDetails, setShowDetails] = useState(false);
  const [showDownload, setShowDownload] = useState(false);
  const t = useTranslation();
  const fmtMoney = useCompactCurrencyFormatter();

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card p-5">
      {/* Header */}
      <div className="mb-4 flex items-start justify-between">
        <div>
          <h2 className="text-lg font-semibold text-divisi-text-primary">
            {t.portal.previousPeriod}
          </h2>
          <p className="text-sm text-divisi-text-secondary">{period.label}</p>
        </div>
        <span
          className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${statusBadgeClass(period.status)}`}
        >
          {period.status}
        </span>
      </div>

      {/* Final Balance */}
      <div className="mb-4">
        <p className="text-xs font-medium text-divisi-text-secondary">
          {t.portal.finalBalance}
        </p>
        <p className="mt-1 text-xl font-bold text-divisi-text-primary">
          {fmtMoney(period.balance)}
        </p>
      </div>

      {/* Expandable Details */}
      <button
        type="button"
        onClick={() => setShowDetails(!showDetails)}
        className="mb-3 flex items-center gap-1 text-sm font-medium text-divisi-accent hover:text-divisi-accent-hover transition-colors"
      >
        <svg
          className={`h-4 w-4 transition-transform ${showDetails ? 'rotate-180' : ''}`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
        {showDetails ? t.portal.hideDetails : t.portal.showDetails}
      </button>

      {showDetails && (
        <div className="mb-4 grid grid-cols-2 gap-3 rounded-lg border border-divisi-border bg-divisi-bg p-3">
          <div>
            <p className="text-xs text-divisi-text-secondary">{t.portal.advances}</p>
            <p className="text-sm font-semibold text-divisi-text-primary">
              {fmtMoney(period.advances)}
            </p>
          </div>
          <div>
            <p className="text-xs text-divisi-text-secondary">{t.portal.adjustments}</p>
            <p className="text-sm font-semibold text-divisi-text-primary">
              {fmtMoney(period.adjustments)}
            </p>
          </div>
          <div>
            <p className="text-xs text-divisi-text-secondary">{t.portal.netEarnings}</p>
            <p className="text-sm font-semibold text-divisi-text-primary">
              {fmtMoney(period.netEarnings)}
            </p>
          </div>
        </div>
      )}

      {/* Download Dropdown */}
      <div className="relative">
        <button
          type="button"
          onClick={() => setShowDownload(!showDownload)}
          className="inline-flex items-center gap-2 rounded-lg border border-divisi-border bg-divisi-bg px-4 py-2 text-sm font-medium text-divisi-text-primary hover:border-divisi-accent/50 transition-colors"
        >
          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          {t.portal.downloadStatement}
          <svg
            className={`h-3 w-3 transition-transform ${showDownload ? 'rotate-180' : ''}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
          </svg>
        </button>

        {showDownload && (
          <div className="absolute left-0 top-full z-10 mt-1 w-48 rounded-lg border border-divisi-border bg-divisi-card py-1 shadow-lg">
            <button
              type="button"
              className="w-full px-4 py-2 text-left text-sm text-divisi-text-primary hover:bg-divisi-bg transition-colors"
              onClick={() => setShowDownload(false)}
            >
              PDF
            </button>
            <button
              type="button"
              className="w-full px-4 py-2 text-left text-sm text-divisi-text-primary hover:bg-divisi-bg transition-colors"
              onClick={() => setShowDownload(false)}
            >
              Excel
            </button>
          </div>
        )}
      </div>
    </div>
  );
}