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

interface Reservation {
  id: string;
  confirmationNumber: string;
  customerName: string;
  customerEmail: string;
  customerPhone: string;
  partySize: number;
  date: string;
  time: string;
  duration: number;
  status: 'pending' | 'confirmed' | 'seated' | 'completed' | 'cancelled' | 'no_show';
  table?: string;
  notes?: string;
  specialRequests?: string;
  createdAt: string;
  seatedAt?: string;
}

export default function ReservationDetail() {
  const [reservation, setReservation] = useState<Reservation | null>(null);

  useEffect(() => {
    // Mock data
    setReservation({
      id: '1',
      confirmationNumber: 'RES-2024-001',
      customerName: 'Sarah Johnson',
      customerEmail: 'sarah.johnson@email.com',
      customerPhone: '(555) 123-4567',
      partySize: 6,
      date: '2024-02-15',
      time: '19:00',
      duration: 90,
      status: 'confirmed',
      table: 'Table 12',
      notes: 'Anniversary celebration - please prepare champagne',
      specialRequests: 'Window seating preferred, quiet area',
      createdAt: '2024-02-10T14:30:00Z',
    });
  }, []);

  if (!reservation) {
    return <div className="loading">Loading reservation...</div>;
  }

  const getStatusColor = (status: string) => {
    const colors = {
      pending: '#fbbf24',
      confirmed: '#3b82f6',
      seated: '#10b981',
      completed: '#6b7280',
      cancelled: '#ef4444',
      no_show: '#ef4444',
    };
    return colors[status as keyof typeof colors] || '#6b7280';
  };

  return (
    <div className="app">
      <header className="app-header">
        <div>
          <h1>📋 Reservation Detail</h1>
          <p>{reservation.confirmationNumber}</p>
        </div>
        <span
          className="status-badge"
          style={{ backgroundColor: getStatusColor(reservation.status) }}
        >
          {reservation.status.toUpperCase().replace('_', ' ')}
        </span>
      </header>

      <div className="content-grid">
        <div className="main-panel">
          <div className="info-card">
            <h2>Guest Information</h2>
            <div className="info-grid">
              <div className="info-item">
                <span className="label">Guest Name</span>
                <span className="value">{reservation.customerName}</span>
              </div>
              <div className="info-item">
                <span className="label">Email</span>
                <span className="value">{reservation.customerEmail}</span>
              </div>
              <div className="info-item">
                <span className="label">Phone</span>
                <span className="value">{reservation.customerPhone}</span>
              </div>
              <div className="info-item">
                <span className="label">Party Size</span>
                <span className="value party-size">
                  👥 {reservation.partySize} guests
                </span>
              </div>
            </div>
          </div>

          <div className="info-card">
            <h2>Reservation Details</h2>
            <div className="info-grid">
              <div className="info-item">
                <span className="label">Date</span>
                <span className="value">
                  {new Date(reservation.date).toLocaleDateString('en-US', {
                    weekday: 'long',
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                  })}
                </span>
              </div>
              <div className="info-item">
                <span className="label">Time</span>
                <span className="value">{reservation.time}</span>
              </div>
              <div className="info-item">
                <span className="label">Duration</span>
                <span className="value">{reservation.duration} minutes</span>
              </div>
              <div className="info-item">
                <span className="label">Table Assignment</span>
                <span className="value">{reservation.table || 'Not assigned'}</span>
              </div>
            </div>
          </div>

          {reservation.specialRequests && (
            <div className="info-card">
              <h2>Special Requests</h2>
              <p className="special-requests">{reservation.specialRequests}</p>
            </div>
          )}

          {reservation.notes && (
            <div className="info-card">
              <h2>Internal Notes</h2>
              <p className="notes">{reservation.notes}</p>
            </div>
          )}
        </div>

        <div className="side-panel">
          <div className="timeline-card">
            <h2>Timeline</h2>
            <div className="timeline">
              <div className="timeline-item">
                <div className="timeline-dot"></div>
                <div className="timeline-content">
                  <div className="timeline-title">Reservation Created</div>
                  <div className="timeline-time">
                    {new Date(reservation.createdAt).toLocaleString()}
                  </div>
                </div>
              </div>
              {reservation.status !== 'pending' && (
                <div className="timeline-item active">
                  <div className="timeline-dot"></div>
                  <div className="timeline-content">
                    <div className="timeline-title">Confirmed</div>
                    <div className="timeline-time">Confirmed by guest</div>
                  </div>
                </div>
              )}
              {reservation.seatedAt && (
                <div className="timeline-item active">
                  <div className="timeline-dot"></div>
                  <div className="timeline-content">
                    <div className="timeline-title">Seated</div>
                    <div className="timeline-time">
                      {new Date(reservation.seatedAt).toLocaleString()}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="actions-card">
            <h2>Actions</h2>
            <div className="actions">
              <button className="action-btn primary">Seat Guest</button>
              <button className="action-btn">Send Reminder</button>
              <button className="action-btn">Edit Details</button>
              <button className="action-btn">Assign Table</button>
              <button className="action-btn danger">Cancel Reservation</button>
              <button className="action-btn danger">Mark No-Show</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
