"use client";
import { useState } from "react";

type Props = { onSave: (data: any) => void };

const DAYS = [
  "MONDAY",
  "TUESDAY",
  "WEDNESDAY",
  "THURSDAY",
  "FRIDAY",
  "SATURDAY",
  "SUNDAY",
];

export default function Settings({ onSave }: Props) {
  const [addressLine1, setAddressLine1] = useState("");
  const [city, setCity] = useState("");
  const [stateOrProvince, setStateOrProvince] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [country, setCountry] = useState("US");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [timeZoneId, setTimeZoneId] = useState("America/New_York");
  const [open, setOpen] = useState("09:00:00");
  const [close, setClose] = useState("18:00:00");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const operatingHours = DAYS.map((day) => ({
      dayOfWeekEnum: day,
      intervals: [{ open, close }],
    }));

    const payload = {
      location: {
        address: { addressLine1, city, stateOrProvince, postalCode, country },
      },
      locationTypes: ["STORE"],
      name,
      phone,
      operatingHours,
      timeZoneId,
      merchantLocationStatus: "ENABLED",
    };

    onSave(payload);
  };

  return (
    <div className="min-h-screen flex items-center justify-center p-6">
      <div className="w-full max-w-2xl bg-white border border-gray-100 rounded-3xl shadow-2xl p-10 relative overflow-hidden">
        {/* Glow Accent */}
        <div className="absolute top-0 left-0 w-full h-2 bg-[#00d1ff]" />

        <h2 className="text-3xl font-bold text-center text-[#00d1ff] mb-8 tracking-tight">
          Create New Location
        </h2>

        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Store Name */}
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-1">
              Store Name *
            </label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              placeholder="Enter store name"
            />
          </div>

          {/* Phone */}
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-1">
              Phone *
            </label>
            <input
              type="text"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              required
              className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              placeholder="Enter phone number"
            />
          </div>

          {/* Address */}
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-1">
              Address Line 1 *
            </label>
            <input
              type="text"
              value={addressLine1}
              onChange={(e) => setAddressLine1(e.target.value)}
              required
              className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              placeholder="Enter address"
            />
          </div>

          {/* City / State */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                City *
              </label>
              <input
                type="text"
                value={city}
                onChange={(e) => setCity(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
                placeholder="City"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                State *
              </label>
              <input
                type="text"
                value={stateOrProvince}
                onChange={(e) => setStateOrProvince(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
                placeholder="State"
              />
            </div>
          </div>

          {/* Postal / Country */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Postal Code *
              </label>
              <input
                type="text"
                value={postalCode}
                onChange={(e) => setPostalCode(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
                placeholder="Postal Code"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Country *
              </label>
              <input
                type="text"
                value={country}
                onChange={(e) => setCountry(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
                placeholder="Country Code (e.g. US)"
              />
            </div>
          </div>

          {/* Time Zone */}
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-1">
              Time Zone *
            </label>
            <input
              type="text"
              value={timeZoneId}
              onChange={(e) => setTimeZoneId(e.target.value)}
              required
              className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              placeholder="e.g. America/New_York"
            />
          </div>

          {/* Hours */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Open Time *
              </label>
              <input
                type="time"
                value={open}
                onChange={(e) => setOpen(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Close Time *
              </label>
              <input
                type="time"
                value={close}
                onChange={(e) => setClose(e.target.value)}
                required
                className="w-full border border-gray-200 rounded-xl p-3 focus:ring-2 focus:ring-[#00d1ff] focus:border-[#00d1ff] outline-none transition duration-300 shadow-sm"
              />
            </div>
          </div>

          {/* Button */}
          <button
            type="submit"
            className="w-full bg-[#00d1ff] text-white py-3 rounded-xl font-semibold shadow-lg hover:bg-[#00c2ed] hover:shadow-xl transition-all duration-300"
          >
            Save & Console JSON
          </button>
        </form>
      </div>
    </div>
  );
}