import type { CohortBucket } from '../types';

export interface CohortTableProps {
  /** Cohort data */
  cohorts: CohortBucket[];
  /** Table title */
  title?: string;
  /** Format function for cohort dates */
  dateFormatter?: (date: Date) => string;
  /** Loading state */
  loading?: boolean;
  /** Custom CSS class */
  className?: string;
}

const defaultDateFormatter = (date: Date): string => {
  return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
};

const getHeatmapColor = (percentage: number): string => {
  if (percentage >= 80) return '#22c55e';
  if (percentage >= 60) return '#84cc16';
  if (percentage >= 40) return '#eab308';
  if (percentage >= 20) return '#f97316';
  return '#ef4444';
};

export function CohortTable({
  cohorts,
  title,
  dateFormatter = defaultDateFormatter,
  loading = false,
  className,
}: CohortTableProps) {
  if (loading) {
    return (
      <div
        className={className}
        style={{
          padding: '20px',
          backgroundColor: '#fff',
          borderRadius: '8px',
          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        }}
      >
        <div style={{ height: '300px', backgroundColor: '#f5f5f5', borderRadius: '4px' }} />
      </div>
    );
  }

  const maxPeriods = Math.max(...cohorts.map((c) => c.periods.length), 0);
  const periodHeaders = Array.from({ length: maxPeriods }, (_, i) => `P${i + 1}`);

  return (
    <div
      className={className}
      style={{
        padding: '20px',
        backgroundColor: '#fff',
        borderRadius: '8px',
        boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
        overflow: 'auto',
      }}
    >
      {title && (
        <div
          style={{
            fontSize: '16px',
            fontWeight: 600,
            marginBottom: '16px',
            color: '#111827',
          }}
        >
          {title}
        </div>
      )}
      <table
        style={{
          width: '100%',
          borderCollapse: 'collapse',
          fontSize: '13px',
        }}
      >
        <thead>
          <tr>
            <th
              style={{
                textAlign: 'left',
                padding: '8px',
                borderBottom: '2px solid #e5e7eb',
                color: '#6b7280',
                fontWeight: 500,
              }}
            >
              Cohort
            </th>
            <th
              style={{
                textAlign: 'right',
                padding: '8px',
                borderBottom: '2px solid #e5e7eb',
                color: '#6b7280',
                fontWeight: 500,
              }}
            >
              Users
            </th>
            {periodHeaders.map((header) => (
              <th
                key={header}
                style={{
                  textAlign: 'center',
                  padding: '8px',
                  borderBottom: '2px solid #e5e7eb',
                  color: '#6b7280',
                  fontWeight: 500,
                }}
              >
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {cohorts.map((cohort, index) => (
            <tr key={index}>
              <td
                style={{
                  padding: '8px',
                  borderBottom: '1px solid #f3f4f6',
                  color: '#374151',
                }}
              >
                {dateFormatter(cohort.cohortDate)}
              </td>
              <td
                style={{
                  padding: '8px',
                  borderBottom: '1px solid #f3f4f6',
                  textAlign: 'right',
                  color: '#374151',
                }}
              >
                {cohort.cohortSize.toLocaleString()}
              </td>
              {periodHeaders.map((_, periodIndex) => {
                const period = cohort.periods[periodIndex];
                return (
                  <td
                    key={periodIndex}
                    style={{
                      padding: '8px',
                      borderBottom: '1px solid #f3f4f6',
                      textAlign: 'center',
                      backgroundColor: period
                        ? `${getHeatmapColor(period.percentage)}20`
                        : 'transparent',
                      color: period ? getHeatmapColor(period.percentage) : '#9ca3af',
                      fontWeight: period ? 500 : 400,
                    }}
                  >
                    {period ? `${period.percentage.toFixed(1)}%` : '-'}
                  </td>
                );
              })}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
