import React from 'react';

interface Props {
  rows: { vendor: string; date: string; category: string; amount: string; status: 'confirmed' | 'pending' | 'scanned' }[];
  highlightRow?: number;
  scale?: number;
}

const STATUS_COLORS = {
  confirmed: { bg: '#F0FDF4', text: '#15803D', border: '#BBF7D0' },
  pending: { bg: '#FFFBEB', text: '#B45309', border: '#FDE68A' },
  scanned: { bg: '#EFF6FF', text: '#1D4ED8', border: '#BFDBFE' },
};

export const ExcelMock: React.FC<Props> = ({ rows, highlightRow, scale = 1 }) => {
  const cols = ['#', 'VENDOR', 'DATE', 'CATEGORY', 'AMOUNT', 'STATUS'];

  return (
    <div
      style={{
        background: '#FFFFFF',
        border: '1px solid #E2E8F0',
        overflow: 'hidden',
        boxShadow: '0 20px 60px -20px rgba(22,28,34,0.2)',
        fontFamily: "'Inter', sans-serif",
      }}
    >
      {/* Toolbar */}
      <div
        style={{
          background: '#F8FAFC',
          borderBottom: '1px solid #E2E8F0',
          padding: `${7 * scale}px ${12 * scale}px`,
          display: 'flex',
          alignItems: 'center',
          gap: 8 * scale,
          fontFamily: 'monospace',
          fontSize: 9 * scale,
          letterSpacing: '0.1em',
          textTransform: 'uppercase' as const,
          color: '#64748B',
        }}
      >
        <div
          style={{
            background: '#FFFFFF',
            border: '1px solid #E2E8F0',
            borderBottom: 'none',
            padding: `${3 * scale}px ${8 * scale}px`,
            color: '#000000',
            fontSize: 9 * scale,
          }}
        >
          Sheet1
        </div>
        <div style={{ padding: `${3 * scale}px ${8 * scale}px` }}>DATEV</div>
        <div style={{ marginLeft: 'auto', color: '#059669', display: 'flex', alignItems: 'center', gap: 4 * scale }}>
          <div style={{ width: 6 * scale, height: 6 * scale, borderRadius: '50%', background: '#059669' }} />
          AUTO-SAVED
        </div>
      </div>

      {/* Table */}
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            {cols.map((col) => (
              <th
                key={col}
                style={{
                  textAlign: 'left',
                  padding: `${6 * scale}px ${10 * scale}px`,
                  borderBottom: '1px solid #E2E8F0',
                  borderRight: '1px solid #E2E8F0',
                  background: '#F8FAFC',
                  fontFamily: 'monospace',
                  fontSize: 8 * scale,
                  letterSpacing: '0.1em',
                  color: '#64748B',
                  fontWeight: 500,
                }}
              >
                {col}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => {
            const isHighlighted = highlightRow === i;
            const s = STATUS_COLORS[row.status];
            return (
              <tr
                key={i}
                style={{
                  background: isHighlighted ? '#F0F9FF' : i % 2 === 0 ? '#FFFFFF' : '#FAFBFC',
                  borderLeft: isHighlighted ? `3px solid #3B82F6` : '3px solid transparent',
                  transition: 'all 0.3s ease',
                }}
              >
                <td style={cellStyle(scale)}>
                  <span style={{ fontFamily: 'monospace', fontSize: 9 * scale, color: '#94A3B8' }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                </td>
                <td style={{ ...cellStyle(scale), fontWeight: 600, color: '#161C22', fontSize: 11 * scale }}>
                  {row.vendor}
                </td>
                <td style={{ ...cellStyle(scale), fontFamily: 'monospace', fontSize: 9 * scale, color: '#475569' }}>
                  {row.date}
                </td>
                <td style={{ ...cellStyle(scale), fontSize: 10 * scale, color: '#475569' }}>{row.category}</td>
                <td
                  style={{
                    ...cellStyle(scale),
                    fontFamily: 'monospace',
                    fontSize: 11 * scale,
                    fontWeight: 700,
                    color: '#161C22',
                    textAlign: 'right',
                  }}
                >
                  {row.amount}
                </td>
                <td style={cellStyle(scale)}>
                  <span
                    style={{
                      background: s.bg,
                      color: s.text,
                      border: `1px solid ${s.border}`,
                      padding: `${2 * scale}px ${6 * scale}px`,
                      fontSize: 8 * scale,
                      fontFamily: 'monospace',
                      letterSpacing: '0.08em',
                      textTransform: 'uppercase' as const,
                    }}
                  >
                    {row.status}
                  </span>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

const cellStyle = (scale: number): React.CSSProperties => ({
  padding: `${7 * scale}px ${10 * scale}px`,
  borderBottom: '1px solid #EDF0F4',
  borderRight: '1px solid #EDF0F4',
  fontSize: 11 * scale,
  color: '#475569',
});
