'use client';

/**
 * DocumentsList — Displays a list of available documents for the user.
 *
 * Each entry shows the document name, type (statement/contract/report),
 * and a download action button. Uses Divisi design system styling.
 *
 * Requirements: 14.1, 14.2, 14.3
 */

import type { PortalDocument } from '@/lib/mock-data/types';
import { useTranslation } from '@/lib/hooks/useTranslation';
import type { TranslationKeys } from '@/lib/i18n/translations';

interface DocumentsListProps {
  documents: PortalDocument[];
}

function getTypeLabel(type: PortalDocument['type'], t: TranslationKeys): string {
  switch (type) {
    case 'statement':
      return t.portal.docTypeStatement;
    case 'contract':
      return t.portal.docTypeContract;
    case 'report':
      return t.portal.docTypeReport;
    default:
      return type;
  }
}

const TYPE_COLORS: Record<PortalDocument['type'], string> = {
  statement: 'bg-blue-500/10 text-blue-400',
  contract: 'bg-emerald-500/10 text-emerald-400',
  report: 'bg-amber-500/10 text-amber-400',
};

export default function DocumentsList({ documents }: DocumentsListProps) {
  const t = useTranslation();

  if (documents.length === 0) {
    return (
      <div className="rounded-xl border border-divisi-border bg-divisi-card p-6 text-center">
        <p className="text-sm text-divisi-text-secondary">
          {t.portal.noDocs}
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-xl border border-divisi-border bg-divisi-card overflow-hidden">
      {/* Table header */}
      <div className="grid grid-cols-[1fr_auto_auto] gap-4 border-b border-divisi-border bg-divisi-bg px-5 py-3">
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary">
          {t.portal.docName}
        </span>
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary">
          {t.portal.docType}
        </span>
        <span className="text-xs font-semibold uppercase text-divisi-text-secondary">
          {t.portal.docAction}
        </span>
      </div>

      {/* Document rows */}
      <ul className="divide-y divide-divisi-border">
        {documents.map((doc) => (
          <li
            key={doc.id}
            className="grid grid-cols-[1fr_auto_auto] gap-4 items-center px-5 py-3 hover:bg-divisi-bg/50 transition-colors"
          >
            <div className="min-w-0">
              <span className="text-sm font-medium text-divisi-text-primary truncate block">
                {doc.name}
              </span>
              {doc.periodLabel && (
                <span className="text-xs text-divisi-text-secondary">
                  {doc.periodLabel}
                </span>
              )}
            </div>

            <span
              className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${TYPE_COLORS[doc.type]}`}
            >
              {getTypeLabel(doc.type, t)}
            </span>

            <a
              href={doc.downloadUrl}
              className="inline-flex items-center gap-1.5 rounded-lg border border-divisi-border px-3 py-1.5 text-xs font-medium text-divisi-text-primary hover:bg-divisi-bg transition-colors"
              download
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7 10 12 15 17 10" />
                <line x1="12" y1="15" x2="12" y2="3" />
              </svg>
              {t.portal.docDownload}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}