import type { StatusAmountMetric } from '../../api/dashboardApi';
import { formatMoney } from '../../utils/formatters';
import { StatusBadge } from '../StatusBadge';
import { Card } from '../ui/Card';
import { EmptyState } from '../ui/EmptyState';

type StatusSummaryTableProps = {
  title: string;
  metrics: StatusAmountMetric[];
};

export function StatusSummaryTable({ title, metrics }: StatusSummaryTableProps) {
  const maxCount = Math.max(...metrics.map((metric) => metric.count), 1);

  return (
    <Card className="p-4">
      <h2 className="text-base font-semibold text-slate-900">{title}</h2>
      {metrics.length === 0 ? (
        <EmptyState title="Данных пока нет" />
      ) : (
        <div className="mt-4 overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b border-slate-200 text-left text-slate-500">
                <th className="pb-2 font-medium">Статус</th>
                <th className="pb-2 font-medium">Количество</th>
                <th className="pb-2 font-medium">Сумма</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {metrics.map((metric) => (
                <tr key={metric.status}>
                  <td className="py-3">
                    <div className="flex min-w-44 items-center gap-3">
                      <span className="w-32"><StatusBadge status={metric.status} /></span>
                      <span className="h-2 flex-1 overflow-hidden rounded-sm bg-slate-100">
                        <span
                          className="block h-full rounded-sm bg-slate-800"
                          style={{ width: `${Math.max((metric.count / maxCount) * 100, 4)}%` }}
                        />
                      </span>
                    </div>
                  </td>
                  <td className="py-3 text-slate-700">{metric.count}</td>
                  <td className="py-3 text-slate-700">{formatMoney(metric.totalAmount)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </Card>
  );
}