"use client";

import { useState, useCallback } from "react";
import { createLocation } from "@/actions/locations";
import GlassModal from "@/components/admin/GlassModal";

const inputStyle = {
  background: "rgba(0, 0, 0, 0.02)",
  border: "1px solid rgba(0, 0, 0, 0.06)",
  outline: "none",
};

function handleFocus(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
  e.target.style.background = "rgba(16, 185, 129, 0.04)";
  e.target.style.border = "1px solid rgba(16, 185, 129, 0.5)";
  e.target.style.boxShadow = "0 0 0 4px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04)";
}
function handleBlur(e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) {
  e.target.style.background = "rgba(0, 0, 0, 0.02)";
  e.target.style.border = "1px solid rgba(0, 0, 0, 0.06)";
  e.target.style.boxShadow = "none";
}

type Props = {
  isOpen: boolean;
  onClose: () => void;
  brandId: string;
  onSuccess?: (locationId: string) => void;
};

export default function AddLocationModal({ isOpen, onClose, brandId, onSuccess }: Props) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [city, setCity] = useState("");
  const [stateVal, setStateVal] = useState("");
  const [zip, setZip] = useState("");
  const [phone, setPhone] = useState("");
  const [contactName, setContactName] = useState("");
  const [contactEmail, setContactEmail] = useState("");
  const [notes, setNotes] = useState("");

  const reset = useCallback(() => {
    setName("");
    setAddress("");
    setCity("");
    setStateVal("");
    setZip("");
    setPhone("");
    setContactName("");
    setContactEmail("");
    setNotes("");
    setError(null);
  }, []);

  const handleClose = useCallback(() => {
    if (loading) return;
    reset();
    onClose();
  }, [loading, reset, onClose]);

  const handleSubmit = useCallback(
    async (e: React.FormEvent) => {
      e.preventDefault();
      setError(null);
      if (!name.trim()) {
        setError("Venue name is required.");
        return;
      }
      setLoading(true);
      try {
        const result = await createLocation(brandId, {
          name: name.trim(),
          address: address.trim() || null,
          city: city.trim() || null,
          state: stateVal.trim().toUpperCase() || null,
          zip: zip.trim() || null,
          phone: phone.trim() || null,
          contact_name: contactName.trim() || null,
          contact_email: contactEmail.trim() || null,
          notes: notes.trim() || null,
          active: true,
        });
        if (result.success) {
          onSuccess?.(result.id);
          reset();
          onClose();
        } else {
          setError(result.error ?? "Failed to create location");
        }
      } catch {
        setError("Network error. Please try again.");
      } finally {
        setLoading(false);
      }
    },
    [brandId, name, address, city, stateVal, zip, phone, contactName, contactEmail, notes, onSuccess, reset, onClose]
  );

  if (!isOpen) return null;

  return (
    <GlassModal
      title="Add Venue"
      subtitle="Reusable pick-up location. Once saved, you can attach stops to it from the Stops tab."
      onClose={handleClose}
    >
      <form onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <div
            className="rounded-xl px-4 py-3 text-sm text-red-600 backdrop-blur-sm"
            style={{ background: "rgba(239, 68, 68, 0.1)", border: "1px solid rgba(239, 68, 68, 0.2)" }}
          >
            {error}
          </div>
        )}

        <div className="space-y-1.5">
          <label htmlFor="fld-1-venue-name"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Venue name *</label>
          <input id="fld-1-venue-name"  aria-label="Tractor Supply"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Tractor Supply"
            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
            style={inputStyle}
            onFocus={handleFocus}
            onBlur={handleBlur}
            required
          />
        </div>

        <div className="space-y-1.5">
          <label htmlFor="fld-2-street-address"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Street address</label>
          <input id="fld-2-street-address"  aria-label="13778 E I 25 Frontage Rd"
            type="text"
            value={address}
            onChange={(e) => setAddress(e.target.value)}
            placeholder="13778 E I-25 Frontage Rd"
            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
            style={inputStyle}
            onFocus={handleFocus}
            onBlur={handleBlur}
          />
        </div>

        <div className="grid grid-cols-6 gap-4">
          <div className="col-span-3 space-y-1.5">
            <label htmlFor="fld-3-city"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">City</label>
            <input id="fld-3-city"  aria-label="Wellington"
              type="text"
              value={city}
              onChange={(e) => setCity(e.target.value)}
              placeholder="Wellington"
              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
              style={inputStyle}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          </div>
          <div className="col-span-1 space-y-1.5">
            <label htmlFor="fld-4-state"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">State</label>
            <input id="fld-4-state"  aria-label="CO"
              type="text"
              value={stateVal}
              onChange={(e) => setStateVal(e.target.value.toUpperCase())}
              placeholder="CO"
              maxLength={2}
              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
              style={inputStyle}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          </div>
          <div className="col-span-2 space-y-1.5">
            <label htmlFor="fld-5-zip"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">ZIP</label>
            <input id="fld-5-zip"  aria-label="80549"
              type="text"
              value={zip}
              onChange={(e) => setZip(e.target.value)}
              placeholder="80549"
              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
              style={inputStyle}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-1.5">
            <label htmlFor="fld-6-phone"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Phone</label>
            <input id="fld-6-phone"  aria-label="(970) 555 1234"
              type="tel"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
              placeholder="(970) 555-1234"
              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
              style={inputStyle}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          </div>
          <div className="space-y-1.5">
            <label htmlFor="fld-7-contact-name"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact name</label>
            <input id="fld-7-contact-name"  aria-label="Store Manager"
              type="text"
              value={contactName}
              onChange={(e) => setContactName(e.target.value)}
              placeholder="Store manager"
              className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
              style={inputStyle}
              onFocus={handleFocus}
              onBlur={handleBlur}
            />
          </div>
        </div>

        <div className="space-y-1.5">
          <label htmlFor="fld-8-contact-email"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Contact email</label>
          <input id="fld-8-contact-email"  aria-label="Manager@example.com"
            type="email"
            value={contactEmail}
            onChange={(e) => setContactEmail(e.target.value)}
            placeholder="manager@example.com"
            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all"
            style={inputStyle}
            onFocus={handleFocus}
            onBlur={handleBlur}
          />
        </div>

        <div className="space-y-1.5">
          <label htmlFor="fld-9-notes"  className="block text-xs font-medium text-stone-500 uppercase tracking-wide ml-1">Notes</label>
          <textarea id="fld-9-notes"  aria-label="Park On West Side. Use Side Entrance After 9am."
            value={notes}
            onChange={(e) => setNotes(e.target.value)}
            placeholder="Park on west side. Use side entrance after 9am."
            rows={2}
            className="w-full rounded-xl px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 transition-all resize-none"
            style={inputStyle}
            onFocus={handleFocus}
            onBlur={handleBlur}
          />
        </div>

        <div className="flex items-center justify-end gap-3 pt-4" style={{ borderTop: "1px solid rgba(0, 0, 0, 0.04)" }}>
          <button
            type="button"
            onClick={handleClose}
            disabled={loading}
            className="rounded-xl px-5 py-2.5 text-sm font-medium text-stone-500 hover:text-stone-700 transition-all hover:bg-stone-100 disabled:opacity-50"
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={loading}
            className="rounded-xl px-6 py-2.5 text-sm font-semibold text-white transition-all"
            style={{
              background: loading
                ? "rgba(16, 185, 129, 0.4)"
                : "linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%)",
              boxShadow: loading
                ? "none"
                : "0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255,255,255,0.2)",
              opacity: loading ? 0.7 : 1,
            }}
          >
            {loading ? (
              <span className="flex items-center gap-2">
                <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
                Creating…
              </span>
            ) : (
              "Create Venue"
            )}
          </button>
        </div>
      </form>
    </GlassModal>
  );
}