thermcool/components/shop/MultisplitContactForm.tsx

'use client';

import { useState } from 'react';
import { Check, Loader2, CheckCircle2 } from 'lucide-react';
import { submitMultisplitForm } from '@/app/zapytanie-multisplit/actions';
import { getRecaptchaToken } from '@/lib/getRecaptchaToken';

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 token = await getRecaptchaToken('submit');
      const recaptchaToken = token || '';

      const res = await submitMultisplitForm({
        name: form.name,
        phone: form.phone,
        email: form.email,
        city: form.city,
        rooms: form.rooms,
        message: form.message,
        consent: form.consent,
        productName,
        productSku,
        recaptchaToken,
      });
      if (res.success) setSent(true);
      else setError(res.message || '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="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
        <CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
        <h3 className="text-2xl font-bold font-heading mb-2">Zapytanie wysłane!</h3>
        <p className="text-green-700">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
        <button 
          onClick={() => setSent(false)}
          className="mt-6 px-6 py-2 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
        >
          Wyślij kolejne zapytanie
        </button>
      </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="[email protected]"
            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>
  );
}