import { Trash2, FolderOpen } from 'lucide-react';

const fmt = (n) => `$${(n || 0).toFixed(2)}`;
const fmtPct = (n) => `${(n || 0).toFixed(1)}%`;

const cardStyle = {
  background: '#1a1a2e',
  border: '1px solid rgba(107,47,179,0.4)',
  boxShadow: '0 0 20px rgba(107,47,179,0.15)',
};

export default function SavedCalculations({ history, onLoad, onDelete }) {
  return (
    <div className="rounded-2xl overflow-hidden" style={cardStyle}>
      <div className="px-5 py-4" style={{ borderBottom: '1px solid rgba(107,47,179,0.2)' }}>
        <div className="flex items-center gap-2">
          <div className="w-1 h-5 rounded-full" style={{ background: 'linear-gradient(to bottom, #7c3aed, #f97316)' }} />
          <span className="text-sm font-bold text-white">💾 Saved Calculations</span>
          <span className="ml-auto text-xs px-2 py-0.5 rounded-full font-semibold"
            style={{ background: 'rgba(124,58,237,0.2)', color: '#c084fc' }}>
            {history.length}
          </span>
        </div>
      </div>

      <div className="overflow-x-auto">
        <table className="w-full text-sm min-w-[600px]">
          <thead>
            <tr style={{ borderBottom: '1px solid rgba(107,47,179,0.15)' }}>
              {['STL Name', 'Saved', 'Total Cost', 'Consumer', 'Reseller', 'Margin', ''].map(h => (
                <th key={h} className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider"
                  style={{ color: 'rgba(200,180,255,0.5)' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {history.map((entry, i) => (
              <tr key={entry.id}
                style={{
                  borderBottom: i < history.length - 1 ? '1px solid rgba(107,47,179,0.1)' : 'none',
                  background: i % 2 === 0 ? 'transparent' : 'rgba(107,47,179,0.04)',
                }}>
                <td className="px-4 py-3 font-medium text-white max-w-[160px] truncate">
                  {entry.inputs.productName || <span style={{ color: 'rgba(255,255,255,0.3)' }}>Unnamed</span>}
                </td>
                <td className="px-4 py-3 text-xs" style={{ color: 'rgba(200,180,255,0.5)' }}>
                  {entry.savedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                  <br />
                  {entry.savedAt.toLocaleDateString()}
                </td>
                <td className="px-4 py-3 font-mono font-semibold" style={{ color: '#a78bfa' }}>
                  {fmt(entry.results.totalCost)}
                </td>
                <td className="px-4 py-3 font-mono font-semibold text-white">
                  {fmt(entry.results.consumerPrice)}
                </td>
                <td className="px-4 py-3 font-mono" style={{ color: 'rgba(200,180,255,0.7)' }}>
                  {fmt(entry.results.resellerPrice)}
                </td>
                <td className="px-4 py-3">
                  <span className="text-xs px-2 py-1 rounded-full font-semibold"
                    style={{ background: 'rgba(74,222,128,0.1)', color: '#4ade80' }}>
                    {fmtPct(entry.results.profitMarginConsumer)}
                  </span>
                </td>
                <td className="px-4 py-3">
                  <div className="flex items-center gap-1.5">
                    <button
                      onClick={() => onLoad(entry)}
                      className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-semibold transition-all hover:opacity-80"
                      style={{ background: 'rgba(124,58,237,0.2)', color: '#c084fc', border: '1px solid rgba(124,58,237,0.3)' }}
                    >
                      <FolderOpen size={11} /> Load
                    </button>
                    <button
                      onClick={() => onDelete(entry.id)}
                      className="p-1.5 rounded-lg transition-all hover:opacity-80"
                      style={{ background: 'rgba(239,68,68,0.1)', color: '#f87171', border: '1px solid rgba(239,68,68,0.2)' }}
                    >
                      <Trash2 size={11} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}