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

interface Table {
  id: string;
  number: string;
  status: 'available' | 'occupied' | 'reserved' | 'cleaning';
  seats: number;
  server?: string;
  guestCount?: number;
  seatedAt?: string;
  x: number;
  y: number;
}

export default function TableMap() {
  const [tables, setTables] = useState<Table[]>([]);
  const [filter, setFilter] = useState<string>('all');

  useEffect(() => {
    // Mock data - positioned in grid layout
    setTables([
      { id: '1', number: '1', status: 'occupied', seats: 4, server: 'Mike', guestCount: 4, seatedAt: '12:30 PM', x: 50, y: 50 },
      { id: '2', number: '2', status: 'occupied', seats: 2, server: 'Lisa', guestCount: 2, seatedAt: '12:45 PM', x: 200, y: 50 },
      { id: '3', number: '3', status: 'available', seats: 6, x: 350, y: 50 },
      { id: '4', number: '4', status: 'reserved', seats: 4, x: 500, y: 50 },
      { id: '5', number: '5', status: 'occupied', seats: 2, server: 'Tom', guestCount: 2, seatedAt: '1:00 PM', x: 50, y: 200 },
      { id: '6', number: '6', status: 'available', seats: 4, x: 200, y: 200 },
      { id: '7', number: '7', status: 'cleaning', seats: 4, x: 350, y: 200 },
      { id: '8', number: '8', status: 'occupied', seats: 8, server: 'Mike', guestCount: 6, seatedAt: '12:15 PM', x: 500, y: 200 },
      { id: '9', number: '9', status: 'available', seats: 2, x: 50, y: 350 },
      { id: '10', number: '10', status: 'reserved', seats: 6, x: 200, y: 350 },
      { id: '11', number: '11', status: 'occupied', seats: 4, server: 'Lisa', guestCount: 3, seatedAt: '1:15 PM', x: 350, y: 350 },
      { id: '12', number: '12', status: 'available', seats: 2, x: 500, y: 350 },
    ]);
  }, []);

  const statusColors = {
    available: '#10b981',
    occupied: '#ef4444',
    reserved: '#fbbf24',
    cleaning: '#6b7280',
  };

  const statusCounts = {
    available: tables.filter(t => t.status === 'available').length,
    occupied: tables.filter(t => t.status === 'occupied').length,
    reserved: tables.filter(t => t.status === 'reserved').length,
    cleaning: tables.filter(t => t.status === 'cleaning').length,
  };

  const filteredTables = filter === 'all' ? tables : tables.filter(t => t.status === filter);

  return (
    <div className="app">
      <header className="app-header">
        <h1>🗺️ Table Map</h1>
        <p>Floor plan with live table status</p>
      </header>

      <div className="stats-bar">
        <div className="stat-item available">
          <span className="stat-value">{statusCounts.available}</span>
          <span className="stat-label">Available</span>
        </div>
        <div className="stat-item occupied">
          <span className="stat-value">{statusCounts.occupied}</span>
          <span className="stat-label">Occupied</span>
        </div>
        <div className="stat-item reserved">
          <span className="stat-value">{statusCounts.reserved}</span>
          <span className="stat-label">Reserved</span>
        </div>
        <div className="stat-item cleaning">
          <span className="stat-value">{statusCounts.cleaning}</span>
          <span className="stat-label">Cleaning</span>
        </div>
      </div>

      <div className="filter-bar">
        {['all', 'available', 'occupied', 'reserved', 'cleaning'].map((status) => (
          <button
            key={status}
            className={`filter-btn ${filter === status ? 'active' : ''}`}
            onClick={() => setFilter(status)}
          >
            {status.charAt(0).toUpperCase() + status.slice(1)}
          </button>
        ))}
      </div>

      <div className="floor-plan">
        {filteredTables.map((table) => (
          <div
            key={table.id}
            className="table"
            style={{
              left: `${table.x}px`,
              top: `${table.y}px`,
              borderColor: statusColors[table.status],
            }}
          >
            <div className="table-number">{table.number}</div>
            <div className="table-seats">👥 {table.seats}</div>
            <div
              className="table-status"
              style={{ backgroundColor: statusColors[table.status] }}
            >
              {table.status}
            </div>
            {table.status === 'occupied' && (
              <div className="table-info">
                <div>Server: {table.server}</div>
                <div>Guests: {table.guestCount}</div>
                <div>{table.seatedAt}</div>
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="legend">
        <h3>Legend</h3>
        <div className="legend-items">
          {Object.entries(statusColors).map(([status, color]) => (
            <div key={status} className="legend-item">
              <div className="legend-color" style={{ backgroundColor: color }}></div>
              <span>{status.charAt(0).toUpperCase() + status.slice(1)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
