'use client';

import { useState } from 'react';
import { Check, Loader2 } from 'lucide-react';

interface Props {
  productName: string;
  productSku: string;
}

export default function MultisplitContactForm({ productName, productSku }: Props) {
  const [form, setForm] = useState({
    name: '',
    phone: '',
    email: '',
    city: '',
    rooms: '2',
    message: '',
    consent: false,
  });
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const handle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value,
    }));
  };

  const submit = async () => {
    if (!form.name || !form.phone || !form.consent) {
      setError('Wypełnij wymagane pola i zaznacz zgodę.');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: form.name,
          phone: form.phone,
          email: form.email,
          city: form.city,
          subject: `Zapytanie o multisplit: ${productName} (${productSku})`,
          message: `Liczba pomieszczeń: ${form.rooms}\n\n${form.message}`,
        }),
      });
      if (res.ok) setSent(true);
      else setError('Błąd wysyłki. Zadzwoń do nas bezpośrednio.');
    } catch {
      setError('Błąd połączenia. Spróbuj ponownie.');
    }
    setLoading(false);
  };

  if (sent) {
    return (
      <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
        <div className="size-12 bg-green-100 rounded-full flex items-center justify-center">
          <Check className="size-6 text-green-600" />
        </div>
        <p className="font-bold text-primary">Zapytanie wysłane!</p>
        <p className="text-sm text-text-muted">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      {/* Produkt info */}
      <div className="bg-slate-50 rounded-xl px-4 py-3 text-xs text-text-muted">
        Zapytanie dotyczy: <span className="font-bold text-primary">{productName}</span>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="flex flex-col gap-1">
          <label className="text-xs font-medium text-primary">Imię i nazwisko *</label>
          <input name="name" value={form.name} onChange={handle}
            placeholder="Jan Kowalski"
            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
        </div>
        <div className="flex flex-col gap-1">
          <label className="text-xs font-medium text-primary">Telefon *</label>
          <input name="phone" value={form.phone} onChange={handle}
            placeholder="+48 600 000 000"
            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
        </div>
      </div>

      <div className="grid grid-cols-2 gap-3">
        <div className="flex flex-col gap-1">
          <label className="text-xs font-medium text-primary">Email</label>
          <input name="email" value={form.email} onChange={handle}
            placeholder="jan@example.com"
            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
        </div>
        <div className="flex flex-col gap-1">
          <label className="text-xs font-medium text-primary">Miasto *</label>
          <input name="city" value={form.city} onChange={handle}
            placeholder="Wrocław"
            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
        </div>
      </div>

      <div className="flex flex-col gap-1">
        <label className="text-xs font-medium text-primary">Ile pomieszczeń do klimatyzacji?</label>
        <select name="rooms" value={form.rooms} onChange={handle}
          className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none bg-white">
          <option value="2">2 pomieszczenia</option>
          <option value="3">3 pomieszczenia</option>
          <option value="4">4 pomieszczenia</option>
          <option value="5">5 pomieszczeń</option>
        </select>
      </div>

      <div className="flex flex-col gap-1">
        <label className="text-xs font-medium text-primary">Dodatkowe informacje (opcjonalnie)</label>
        <textarea name="message" value={form.message} onChange={handle}
          rows={3}
          placeholder="Np. metraż pomieszczeń, typ budynku, piętro..."
          className="px-3 py-2.5 text-sm border border-border rounded-xl focus:border-accent outline-none resize-none" />
      </div>

      <label className="flex items-start gap-2.5 cursor-pointer">
        <div className="relative mt-0.5">
          <input
            type="checkbox"
            name="consent"
            checked={form.consent}
            onChange={handle}
            className="sr-only"
          />
          <div className={`size-4 rounded border-2 flex items-center justify-center transition-colors ${
            form.consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
          }`}>
            {form.consent && (
              <svg viewBox="0 0 10 8" className="size-2.5" fill="none">
                <path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </div>
        </div>
        <span className="text-xs text-text-muted leading-relaxed">
          Wyrażam zgodę na przetwarzanie moich danych osobowych w celu obsługi zapytania przez ThermCool. *
        </span>
      </label>

      {error && <p className="text-xs text-red-500">{error}</p>}

      <button
        onClick={submit}
        disabled={loading}
        className="flex items-center justify-center gap-2 h-11 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors disabled:opacity-60"
      >
        {loading ? <Loader2 className="size-4 animate-spin" /> : null}
        {loading ? 'Wysyłanie...' : 'Wyślij zapytanie o wycenę'}
      </button>
    </div>
  );
}