"use client";

import { useState } from "react";
import StepSelectStore from "./StepSelectorStore";
import StepEnterDetails from "./StepEnterDetails";
import StepConfirmation from "./StepConfirmation";
import StepBookSlot from "./StepBookSlot";


export interface SelectedStore {
  _id: string;
  name: string;
  address: string;
  city: string;
  state: string;
  phone: string;
}

export interface SelectedSlot {
  date: string;
  slotPeriod: "morning" | "afternoon" | "evening";
  timeSlot: string;
}

export interface UserDetails {
  name: string;
  phone: string;
  email: string;
  celebrating: "groom" | "bride" | "event" | "other";
  lookingFor: string;
}

const STEPS = [
  { id: 1, label: "Select Store" },
  { id: 2, label: "Book a Slot" },
  { id: 3, label: "Enter Details" },
];

export default function AppointmentPage() {
  const [step, setStep] = useState(1);

  const [selectedStore, setSelectedStore] = useState<any>(null);
  const [selectedSlot, setSelectedSlot] = useState<any>(null);

  const handleSubmit = async (details: any) => {
  try {
    const res = await fetch("/api/appointments", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        storeId: selectedStore._id,
        storeName: selectedStore.name,

        date: selectedSlot.date,
        timeSlot: selectedSlot.timeSlot,
        slotPeriod: selectedSlot.slotPeriod,

        name: details.name,
        phone: details.phone,
        email: details.email,
        celebrating: details.celebrating,
        lookingFor: details.lookingFor,
      }),
    });

    const data = await res.json();

    if (data.success) {
      alert("Appointment booked successfully!");
      console.log("Appointment ID:", data.data._id);
    } else {
      alert(data.message);
    }
  } catch (error) {
    console.error(error);
    alert("Something went wrong");
  }
};

  return (
    <div className="px-12 w-full min-h-screen bg-[#FAF7F2]">

      {/* HEADER */}
      <div className="text-center py-6 border-b">
        <h1 className="text-black text-2xl italic tracking-wide">
          BOOK AN APPOINTMENT
        </h1>
      </div>

      {/* MAIN LAYOUT */}
      <div className="max-w-5xl mx-auto flex gap-10 p-10">

        {/* LEFT STEP PER (FIXED) */}
        {/* LEFT STEP PER (IMPROVED) */}
        <div className="w-[300px]">

        <div className="relative space-y-10">

            {/* LINE CONNECTOR */}
            <div className="absolute left-4 top-5 bottom-5 w-[2px] bg-gray-200" />

            {/* STEP 1 */}
            <div className="flex items-start gap-4 relative">

            <div className={`w-10 h-10 rounded-full flex items-center justify-center border z-10
                ${step === 1
                ? "border-orange-500 bg-orange-500 text-white"
                : selectedStore
                    ? "border-green-500 bg-green-500 text-white"
                    : "border-gray-300 text-gray-400"
                }`}
            >
                {selectedStore ? "✓" : "1"}
            </div>

            <div className="flex-1">

                <div className="flex justify-between items-center">
                <p className={`font-medium ${
                    step === 1 ? "text-orange-600" : ""
                }`}>
                    {selectedStore?.name ? selectedStore?.name : 'Pick a location'}
                </p>

                {selectedStore && (
                    <button
                        onClick={() => { setStep(1); setSelectedStore(null) }}
                        className="text-xs text-orange-500 hover:underline"
                    >
                    Edit
                    </button>
                )}
                </div>

                {selectedStore && (
                <p className="text-xs text-gray-500 mt-1">
                    {selectedStore.name}
                </p>
                )}
            </div>
            </div>

            {/* STEP 2 */}
            <div className="flex items-start gap-4 relative">

            <div className={`w-10 h-10 rounded-full flex items-center justify-center border z-10
                ${step === 2
                ? "border-orange-500 bg-orange-500 text-white"
                : selectedSlot
                    ? "border-green-500 bg-green-500 text-white"
                    : "border-gray-300 text-gray-400"
                }`}
            >
                {selectedSlot ? "✓" : "2"}
            </div>

            <div className="flex-1">

                <div className="flex justify-between items-center">
                <p className={`font-medium ${
                    step === 2 ? "text-orange-600" : ""
                }`}>
                    Book a slot
                </p>

                {selectedSlot && (
                    <button
                    onClick={() => { setStep(2); setSelectedSlot(null) }}
                    className="text-xs text-orange-500 hover:underline"
                    >
                    Edit
                    </button>
                )}
                </div>

                {selectedSlot && (
                <p className="text-xs text-gray-500 mt-1">
                    {selectedSlot.date} • {selectedSlot.timeSlot}
                </p>
                )}
            </div>
            </div>

            {/* STEP 3 */}
            <div className="flex items-start gap-4 relative">

            <div className={`w-10 h-10 rounded-full flex items-center justify-center border z-10
                ${step === 3
                ? "border-orange-500 bg-orange-500 text-white"
                : "border-gray-300 text-gray-400"
                }`}
            >
                3
            </div>

            <div className="flex-1">

                <p className={`font-medium ${
                step === 3 ? "text-orange-600" : ""
                }`}>
                Enter details
                </p>

                {step === 3 && (
                <p className="text-xs text-gray-500 mt-1">
                    Final step
                </p>
                )}
            </div>
            </div>

        </div>
        </div>

        {/* RIGHT CONTENT (DYNAMIC PANEL) */}
        <div className="flex-1">

          {step === 1 && (
            <StepSelectStore
              onSelect={(store) => {
                setSelectedStore(store);
                setStep(2);
              }}
            />
          )}

          {step === 2 && selectedStore && (
            <StepBookSlot
              selectedStore={selectedStore}
              onSelect={(slot) => {
                setSelectedSlot(slot);
                setStep(3);
              }}
              onEditStore={() => {
                setSelectedStore(null);
                setStep(1);
              }}
            />
          )}

          {step === 3 && selectedStore && selectedSlot && (
            <StepEnterDetails
                selectedStore={selectedStore}
                selectedSlot={selectedSlot}
                onSubmit={(details) => {
                    handleSubmit(details)
                }}
                onEditStore={() => {
                    setStep(1);
                }}
                onEditSlot={() => {
                    setStep(2);
                }}
            />
          )}

        </div>
      </div>
    </div>
  );
}