import React, { useState } from 'react';
import axios from 'axios';

function TablePage({ tablesList, loadSystemData, API_URL }) {
  const [tableNum, setTableNum] = useState('');
  const [custName, setCustName] = useState('');
  const [guests, setGuests] = useState(1);
  const [phone, setPhone] = useState('');
  const [waiter, setWaiter] = useState('');

  const handleTableSubmit = async (e) => {
    e.preventDefault();
    try {
      await axios.post(`${API_URL}/tables`, {
        tableNumber: tableNum,
        customerName: custName,
        guestCount: guests,
        phone,
        waiterName: waiter
      });
      setTableNum(''); setCustName(''); setPhone(''); setWaiter('');
      loadSystemData();
    } catch (err) {
      alert('Error recording table configurations.');
    }
  };

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div className="glass-panel p-6 rounded-2xl border border-slate-800 h-fit">
        <h2 className="text-xl font-bold mb-4">Assign Active Customer Seats</h2>
        <form onSubmit={handleTableSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2">Table Number</label>
            <input type="number" value={tableNum} onChange={(e) => setTableNum(e.target.value)} className="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5" required />
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2">Customer Profile Name</label>
            <input type="text" value={custName} onChange={(e) => setCustName(e.target.value)} className="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5" required />
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2">Total Guests Count</label>
            <input type="number" min="1" value={guests} onChange={(e) => setGuests(e.target.value)} className="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5" required />
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2">Contact Phone</label>
            <input type="text" value={phone} onChange={(e) => setPhone(e.target.value)} className="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5" required />
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-400 mb-2">Assigned Waiter Name</label>
            <input type="text" value={waiter} onChange={(e) => setWaiter(e.target.value)} className="w-full bg-slate-900 border border-slate-800 rounded-xl px-4 py-2.5" required />
          </div>
          <button type="submit" className="w-full bg-slate-100 hover:bg-white text-slate-950 font-bold py-3 rounded-xl transition-colors">Commit Entry</button>
        </form>
      </div>
      <div className="lg:col-span-2 glass-panel p-6 rounded-2xl border border-slate-800">
        <h2 className="text-xl font-bold mb-4">Operational Floor Seat Blueprints</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {tablesList.map(t => (
            <div key={t.TableNumber} className="p-4 bg-slate-900/60 border border-slate-800 rounded-xl">
              <div className="text-lg font-bold text-amber-400">Table Slot {t.TableNumber}</div>
              <div className="text-sm mt-1">Host: {t.CustomerName} ({t.GuestCount} Seats Allocated)</div>
              <div className="text-xs text-slate-500 mt-2">Waiter: {t.WaiterName}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default TablePage;