/* @component-map
 * App — Main container, handles view switching and layout
 * Calendar — Calendar panel with month navigation and date selection
 * TimeSlots — Time slot selection panel
 * BookingForm — Client details form
 * Confirmation — Booking confirmation view
 * Stepper — Step indicator component
 * @end-component-map */

import { Calendar } from './components/Calendar.jsx';
import { TimeSlots } from './components/TimeSlots.jsx';
import { BookingForm } from './components/BookingForm.jsx';
import { Confirmation } from './components/Confirmation.jsx';
import { Stepper } from './components/Stepper.jsx';

function App() {
  const [step, setStep] = useState(0);
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);
  const [form, setForm] = useState({ name: "", email: "", company: "", notes: "" });

  const reset = () => {
    setStep(0);
    setSelectedDate(null);
    setSelectedTime(null);
    setForm({ name: "", email: "", company: "", notes: "" });
  };

  const onDateSelect = (date) => {
    setSelectedDate(date);
    setSelectedTime(null);
    setStep(1);
  };

  return (
    <div className="wrapper">
      <div className="header">
        <div className="logo-mark">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
            <rect x="2" y="2" width="24" height="24" rx="4" stroke="var(--primary)" strokeWidth="2" />
            <line x1="9" y1="9" x2="19" y2="19" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
            <line x1="19" y1="9" x2="9" y2="19" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </div>
        <div>
          <h1 className="title">Book a Consultation</h1>
          <p className="subtitle">Schedule a 60-minute strategy session</p>
        </div>
      </div>

      <Stepper step={step} />

      {step === 3 ? (
        <Confirmation form={form} selectedDate={selectedDate} selectedTime={selectedTime} onReset={reset} />
      ) : (
        <div className="main-grid">
          <Calendar selectedDate={selectedDate} onDateSelect={onDateSelect} />
          <div className="right-panel">
            {step === 0 && <PlaceholderPanel />}
            {step === 1 && selectedDate && (
              <TimeSlots selectedDate={selectedDate} selectedTime={selectedTime} setSelectedTime={setSelectedTime} onContinue={() => setStep(2)} />
            )}
            {step === 2 && (
              <BookingForm form={form} setForm={setForm} selectedDate={selectedDate} selectedTime={selectedTime} onBack={() => setStep(1)} onConfirm={() => setStep(3)} />
            )}
          </div>
        </div>
      )}

      <div className="footer">
        <span>All times shown in Eastern Time (ET)</span>
        <span className="footer-dot">·</span>
        <span>60-minute sessions</span>
      </div>
    </div>
  );
}

function PlaceholderPanel() {
  return (
    <div className="placeholder fade-in">
      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" className="placeholder-icon">
        <rect x="6" y="10" width="36" height="32" rx="4" stroke="var(--primary)" strokeWidth="2" />
        <line x1="6" y1="20" x2="42" y2="20" stroke="var(--primary)" strokeWidth="2" />
        <line x1="16" y1="6" x2="16" y2="14" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
        <line x1="32" y1="6" x2="32" y2="14" stroke="var(--primary)" strokeWidth="2" strokeLinecap="round" />
      </svg>
      <p className="placeholder-text">Select a date on the calendar to view available time slots</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);