import { useState, useEffect } from 'react';
import './styles.css';

interface HourlySales {
  hour: string;
  revenue: number;
  orders: number;
}

interface TopItem {
  name: string;
  quantity: number;
  revenue: number;
}

export default function SalesDashboard() {
  const [hourlySales, setHourlySales] = useState<HourlySales[]>([]);
  const [topItems, setTopItems] = useState<TopItem[]>([]);
  const [stats, setStats] = useState({
    totalRevenue: 0,
    totalOrders: 0,
    avgTicket: 0,
    salesVsGoal: 0,
  });

  useEffect(() => {
    // Mock data
    setStats({
      totalRevenue: 8547.32,
      totalOrders: 142,
      avgTicket: 60.19,
      salesVsGoal: 85.5,
    });

    setHourlySales([
      { hour: '11am', revenue: 847.50, orders: 15 },
      { hour: '12pm', revenue: 1568.75, orders: 28 },
      { hour: '1pm', revenue: 1892.40, orders: 32 },
      { hour: '2pm', revenue: 1034.50, orders: 18 },
      { hour: '3pm', revenue: 678.20, orders: 12 },
      { hour: '4pm', revenue: 445.80, orders: 8 },
      { hour: '5pm', revenue: 1245.60, orders: 22 },
      { hour: '6pm', revenue: 834.57, orders: 35 },
    ]);

    setTopItems([
      { name: 'Classic Burger', quantity: 45, revenue: 674.55 },
      { name: 'Caesar Salad', quantity: 38, revenue: 379.62 },
      { name: 'Grilled Salmon', quantity: 32, revenue: 799.68 },
      { name: 'Chicken Wings', quantity: 28, revenue: 363.72 },
      { name: 'French Fries', quantity: 52, revenue: 259.48 },
      { name: 'Margherita Pizza', quantity: 24, revenue: 407.76 },
      { name: 'Chocolate Cake', quantity: 22, revenue: 175.78 },
      { name: 'Craft Beer', quantity: 56, revenue: 391.44 },
    ]);
  }, []);

  const maxRevenue = Math.max(...hourlySales.map(h => h.revenue));
  const maxQuantity = Math.max(...topItems.map(i => i.quantity));

  return (
    <div className="app">
      <header className="app-header">
        <h1>📈 Sales Dashboard</h1>
        <p>Revenue analytics and top performers</p>
      </header>

      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Total Revenue</div>
          <div className="stat-value revenue">${stats.totalRevenue.toFixed(2)}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Orders</div>
          <div className="stat-value">{stats.totalOrders}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Average Ticket</div>
          <div className="stat-value">${stats.avgTicket.toFixed(2)}</div>
        </div>
        <div className="stat-card goal-card">
          <div className="stat-label">Sales vs Goal</div>
          <div className="stat-value goal">{stats.salesVsGoal}%</div>
          <div className="goal-bar">
            <div
              className="goal-fill"
              style={{ width: `${Math.min(stats.salesVsGoal, 100)}%` }}
            ></div>
          </div>
        </div>
      </div>

      <div className="content-grid">
        <div className="chart-panel">
          <h2>Revenue by Hour</h2>
          <div className="hourly-chart">
            {hourlySales.map((item) => (
              <div key={item.hour} className="hour-bar">
                <div
                  className="bar-fill"
                  style={{ height: `${(item.revenue / maxRevenue) * 100}%` }}
                >
                  <div className="bar-tooltip">
                    <div className="tooltip-revenue">${item.revenue.toFixed(0)}</div>
                    <div className="tooltip-orders">{item.orders} orders</div>
                  </div>
                </div>
                <div className="bar-label">{item.hour}</div>
              </div>
            ))}
          </div>

          <div className="summary-cards">
            <div className="summary-card">
              <div className="summary-label">Peak Hour</div>
              <div className="summary-value">
                {hourlySales.reduce((max, h) => h.revenue > max.revenue ? h : max).hour}
              </div>
            </div>
            <div className="summary-card">
              <div className="summary-label">Peak Revenue</div>
              <div className="summary-value">
                ${Math.max(...hourlySales.map(h => h.revenue)).toFixed(2)}
              </div>
            </div>
          </div>
        </div>

        <div className="top-items-panel">
          <h2>Top Selling Items</h2>
          <div className="items-list">
            {topItems.map((item, index) => (
              <div key={item.name} className="item-row">
                <div className="item-rank">#{index + 1}</div>
                <div className="item-info">
                  <div className="item-name">{item.name}</div>
                  <div className="item-bar">
                    <div
                      className="item-bar-fill"
                      style={{ width: `${(item.quantity / maxQuantity) * 100}%` }}
                    ></div>
                  </div>
                  <div className="item-stats">
                    <span className="item-quantity">{item.quantity} sold</span>
                    <span className="item-revenue">${item.revenue.toFixed(2)}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}
