import { useState, useMemo } from 'react';
import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer, Legend } from 'recharts';

const COLORS = ['#6366f1','#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#ec4899'];

function fmtVal(n) {
  const abs = Math.abs(n);
  if (abs >= 1e9) return (n/1e9).toFixed(1)+'B';
  if (abs >= 1e6) return (n/1e6).toFixed(1)+'M';
  if (abs >= 1e3) return (n/1e3).toFixed(1)+'K';
  return Math.round(n).toLocaleString();
}

const data = [
  {
    "month": "Jan",
    "revenue": 12400,
    "users": 340,
    "region": "North",
    "status": "Active"
  },
  {
    "month": "Feb",
    "revenue": 18200,
    "users": 415,
    "region": "South",
    "status": "Active"
  },
  {
    "month": "Mar",
    "revenue": 15800,
    "users": 398,
    "region": "North",
    "status": "Paused"
  },
  {
    "month": "Apr",
    "revenue": 22100,
    "users": 512,
    "region": "East",
    "status": "Active"
  },
  {
    "month": "May",
    "revenue": 19600,
    "users": 487,
    "region": "West",
    "status": "Active"
  },
  {
    "month": "Jun",
    "revenue": 28400,
    "users": 634,
    "region": "East",
    "status": "Active"
  },
  {
    "month": "Jul",
    "revenue": 24300,
    "users": 589,
    "region": "South",
    "status": "Paused"
  },
  {
    "month": "Aug",
    "revenue": 31200,
    "users": 712,
    "region": "North",
    "status": "Active"
  },
  {
    "month": "Sep",
    "revenue": 29800,
    "users": 681,
    "region": "West",
    "status": "Active"
  },
  {
    "month": "Oct",
    "revenue": 35600,
    "users": 798,
    "region": "East",
    "status": "Active"
  },
  {
    "month": "Nov",
    "revenue": 32100,
    "users": 745,
    "region": "South",
    "status": "Paused"
  },
  {
    "month": "Dec",
    "revenue": 41800,
    "users": 923,
    "region": "North",
    "status": "Active"
  }
];

const cardStyle = { background: '#1f2937', border: '1px solid #374151', borderLeft: '3px solid #6366f1', borderRadius: 8, padding: '12px 16px', minWidth: 120, flex: 1 };
const thStyle = { padding: '9px 12px', fontSize: 11, fontWeight: 700, color: '#9ca3af', textAlign: 'left', background: '#111827', borderBottom: '2px solid #374151', whiteSpace: 'nowrap', cursor: 'pointer' };
const tdStyle = { padding: '8px 12px', fontSize: 11.5, color: '#d1d5db', borderBottom: '1px solid #1f2937', maxWidth: 180, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };

export default function Dashboard() {
  const [filter_region, setFilter_region] = useState('');
  const [filter_status, setFilter_status] = useState('');
  const [sort, setSort] = useState('');
  const [dir, setDir] = useState('asc');

  const filtered = data.filter(row =>
      (!filter_region || String(row['region']) === filter_region) &&
      (!filter_status || String(row['status']) === filter_status)
  );

  const chartData = useMemo(() => {
    const map = {};
    filtered.forEach(row => {
      const key = String(row['region'] ?? '');
      if (!map[key]) map[key] = { 'region': key, 'revenue': 0 };
      map[key]['revenue'] += Number(row['revenue']) || 0;
    });
    return Object.values(map).slice(0, 30);
  }, [filtered]);

  const sorted = sort
    ? [...filtered].sort((a, b) => {
        const va = a[sort], vb = b[sort];
        const num = typeof va === 'number' && typeof vb === 'number';
        return dir === 'asc'
          ? num ? va - vb : String(va).localeCompare(String(vb))
          : num ? vb - va : String(vb).localeCompare(String(va));
      })
    : filtered;

  const tableRows = sorted.slice(0, 50);

  function handleSort(field) {
    if (sort === field) setDir(d => d === 'asc' ? 'desc' : 'asc');
    else { setSort(field); setDir('asc'); }
  }

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', background: '#111827', color: '#f9fafb', padding: 24, minHeight: '100vh' }}>
      {/* Stat Cards */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 16 }}>

        <div style={cardStyle}>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#9ca3af', marginBottom: 4 }}>REVENUE</div>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'monospace' }}>{fmtVal(filtered.reduce((sum, r) => sum + (Number(r['revenue']) || 0), 0))}</div>
          <div style={{ fontSize: 10, color: '#6b7280', marginTop: 2 }}>{filtered.length} rows</div>
        </div>
        <div style={cardStyle}>
          <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: '#9ca3af', marginBottom: 4 }}>USERS</div>
          <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'monospace' }}>{fmtVal(filtered.reduce((sum, r) => sum + (Number(r['users']) || 0), 0))}</div>
          <div style={{ fontSize: 10, color: '#6b7280', marginTop: 2 }}>{filtered.length} rows</div>
        </div>
      </div>

      {/* Filters */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', padding: '10px 14px', background: '#1f2937', borderRadius: 8, border: '1px solid #374151', marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <label style={{ fontSize: 11, color: '#6b7280', fontWeight: 600 }}>region:</label>
          <select value={filter_region} onChange={e => setFilter_region(e.target.value)} style={{ fontSize: 11, padding: '3px 6px', borderRadius: 4, border: '1px solid #374151', background: '#1f2937', color: '#f9fafb', cursor: 'pointer' }}>
            <option value="">All</option>
            <option value="North">North</option>
            <option value="South">South</option>
            <option value="East">East</option>
            <option value="West">West</option>
          </select>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <label style={{ fontSize: 11, color: '#6b7280', fontWeight: 600 }}>status:</label>
          <select value={filter_status} onChange={e => setFilter_status(e.target.value)} style={{ fontSize: 11, padding: '3px 6px', borderRadius: 4, border: '1px solid #374151', background: '#1f2937', color: '#f9fafb', cursor: 'pointer' }}>
            <option value="">All</option>
            <option value="Active">Active</option>
            <option value="Paused">Paused</option>
          </select>
        </div>
      </div>

      {/* Chart */}
      <div style={{ background: '#1f2937', border: '1px solid #374151', borderRadius: 8, padding: '14px 16px', marginBottom: 16 }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: '#9ca3af', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 }}>revenue by region</div>

      <ResponsiveContainer width="100%" height={300}>
        <PieChart>
          <Pie data={chartData} dataKey="revenue" nameKey="region" cx="50%" cy="50%" outerRadius={100} innerRadius={50} label>
            {chartData.map((_, i) => <Cell key={i} fill={COLORS[i % COLORS.length]} />)}
          </Pie>
          <Tooltip />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
      </div>

      {/* Table */}
      <div style={{ background: '#1f2937', border: '1px solid #374151', borderRadius: 8, overflow: 'hidden' }}>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
          <th key="month" style={thStyle} onClick={() => setSort('month')}>month {sort === 'month' ? (dir === 'asc' ? '↑' : '↓') : ''}</th>
          <th key="revenue" style={thStyle} onClick={() => setSort('revenue')}>revenue {sort === 'revenue' ? (dir === 'asc' ? '↑' : '↓') : ''}</th>
          <th key="users" style={thStyle} onClick={() => setSort('users')}>users {sort === 'users' ? (dir === 'asc' ? '↑' : '↓') : ''}</th>
          <th key="region" style={thStyle} onClick={() => setSort('region')}>region {sort === 'region' ? (dir === 'asc' ? '↑' : '↓') : ''}</th>
          <th key="status" style={thStyle} onClick={() => setSort('status')}>status {sort === 'status' ? (dir === 'asc' ? '↑' : '↓') : ''}</th>
              </tr>
            </thead>
            <tbody>
              {tableRows.map((row, i) => (
                <tr key={i} style={{ background: i % 2 === 0 ? 'transparent' : 'rgba(255,255,255,0.02)' }}>
            <td key="month" style={tdStyle}>{String(row['month'] ?? '')}</td>
            <td key="revenue" style={tdStyle}>{String(row['revenue'] ?? '')}</td>
            <td key="users" style={tdStyle}>{String(row['users'] ?? '')}</td>
            <td key="region" style={tdStyle}>{String(row['region'] ?? '')}</td>
            <td key="status" style={tdStyle}>{String(row['status'] ?? '')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {sorted.length > 50 && (
          <div style={{ fontSize: 11, color: '#6b7280', padding: '8px 12px', borderTop: '1px solid #374151' }}>
            Showing 50 of {sorted.length} rows
          </div>
        )}
      </div>
    </div>
  );
}