'use client';

import { useState } from 'react';
import { AlertTriangle, Wrench, Phone, Check, Clock, Zap } from 'lucide-react';
import Link from 'next/link';
import { companyDetails } from '@/content/company';
import { submitAwariaForm } from '@/app/zgloszenie-awarii/actions';

// Kody błędów popularnych marek
const ERROR_CODES: Record<string, Record<string, string>> = {
  'Gree': {
    'E1': 'Błąd czujnika temperatury powietrza wewnętrznego',
    'E2': 'Błąd czujnika temperatury wymiennika wewnętrznego',
    'E3': 'Błąd czujnika temperatury zewnętrznej',
    'E4': 'Wysokie ciśnienie — możliwy problem ze sprężarką lub skraplaczem',
    'E5': 'Niskie ciśnienie — możliwy brak czynnika chłodniczego',
    'E6': 'Błąd komunikacji między jednostkami',
    'F1': 'Awaria czujnika temperatury — wymagana wymiana czujnika',
    'H6': 'Blokada silnika wentylatora wewnętrznego',
  },
  'LG': {
    'CH01': 'Błąd czujnika temperatury powietrza wewnętrznego',
    'CH02': 'Błąd czujnika wymiennika wewnętrznego',
    'CH03': 'Błąd czujnika wymiennika zewnętrznego',
    'CH05': 'Błąd komunikacji — sprawdź okablowanie',
    'CH07': 'Awaria wentylatora zewnętrznego',
    'CH10': 'Błąd czujnika prądu sprężarki',
    'CH38': 'Błąd modułu WiFi',
    'C1': 'Problem z drenażem — sprawdź odpływ skroplin',
  },
  'Daikin': {
    'A1': 'Awaria PCB — płyta główna jednostki wewnętrznej',
    'A5': 'Przegrzanie — wymagane czyszczenie lub sprawdzenie czynnika',
    'C4': 'Błąd czujnika wymiennika wewnętrznego',
    'E1': 'Awaria PCB jednostki zewnętrznej',
    'E3': 'Wyłącznik wysokiego ciśnienia',
    'E4': 'Wyłącznik niskiego ciśnienia',
    'F3': 'Niskie ciśnienie oleju sprężarki',
    'U4': 'Błąd komunikacji wewnętrzna-zewnętrzna',
  },
  'Samsung': {
    'E1': 'Błąd czujnika temperatury powietrza',
    'E2': 'Błąd czujnika wymiennika ciepła',
    'E3': 'Błąd silnika wentylatora',
    'E4': 'Wyłącznik wysokiego ciśnienia',
    'E6': 'Błąd komunikacji',
    'F1': 'Awaria czujnika — wymagana diagnostyka',
    'C4': 'Błąd czujnika temperatury zewnętrznej',
  },
  'Haier': {
    'E1': 'Błąd czujnika temperatury wewnętrznej',
    'E2': 'Błąd czujnika wymiennika wewnętrznego',
    'E3': 'Błąd czujnika temperatury zewnętrznej',
    'E4': 'Wyłącznik wysokiego ciśnienia',
    'E5': 'Wyłącznik niskiego ciśnienia — sprawdź poziom czynnika',
    'E6': 'Błąd komunikacji',
    'F1': 'Awaria czujnika — wymiana',
  },
  'Rotenso': {
    'E1': 'Błąd czujnika temperatury wewnętrznej',
    'E2': 'Błąd wymiennika wewnętrznego',
    'E3': 'Błąd czujnika zewnętrznego',
    'E5': 'Niskie ciśnienie — sprawdź czynnik chłodniczy',
    'E6': 'Błąd komunikacji między jednostkami',
    'P1': 'Ochrona przed zamrożeniem',
    'P4': 'Wyłącznik wysokiego ciśnienia',
  },
  'Mitsubishi Electric': {
    'E1': 'Błąd czujnika wewnętrznego',
    'E2': 'Błąd czujnika wymiennika',
    'E4': 'Błąd czujnika zewnętrznego',
    'E6': 'Problem z wentylatorem zewnętrznym',
    'P1': 'Błąd czujnika powietrza zewnętrznego',
    'P4': 'Wyłącznik wysokiego ciśnienia',
    'P8': 'Przegrzanie sprężarki',
    'U1': 'Błąd napięcia zasilania',
  },
  'Toshiba': {
    'E01': 'Błąd czujnika temperatury wewnętrznej',
    'E02': 'Błąd czujnika wymiennika wewnętrznego',
    'E03': 'Błąd czujnika zewnętrznego',
    'E04': 'Wyłącznik wysokiego ciśnienia',
    'E07': 'Błąd komunikacji',
    'E08': 'Awaria wentylatora zewnętrznego',
  },
};

const BRANDS = ['Gree', 'Rotenso', 'Haier', 'LG', 'Samsung', 'Daikin', 'Mitsubishi Electric', 'Toshiba', 'Aux', 'Fuji Electric', 'Inna marka'];
const PROBLEM_TYPES = [
  'Nie chłodzi / nie grzeje',
  'Wyświetla kod błędu',
  'Głośna praca / wibracje',
  'Wyciek wody',
  'Brzydki zapach',
  'Nie włącza się',
  'Pilot nie działa',
  'Zamarza wymiennik',
  'Inne',
];

export function AwariaClient() {
  const [step, setStep] = useState<'form' | 'success'>('form');
  const [isUrgent, setIsUrgent] = useState(false);
  const [brand, setBrand] = useState('');
  const [model, setModel] = useState('');
  const [errorCode, setErrorCode] = useState('');
  const [problemType, setProblemType] = useState('');
  const [description, setDescription] = useState('');
  const [lastService, setLastService] = useState('');
  const [warranty, setWarranty] = useState('');
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [city, setCity] = useState('');
  const [consent, setConsent] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Podpowiedź kodu błędu
  const errorHint = brand && errorCode && ERROR_CODES[brand]?.[errorCode.toUpperCase()];

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!consent) {
      alert('Proszę zaznaczyć zgodę na przetwarzanie danych.');
      return;
    }
    setIsSubmitting(true);
    
    await submitAwariaForm({
      isUrgent,
      brand,
      model,
      errorCode,
      problemType,
      description,
      warranty,
      lastService,
      name,
      phone,
      city,
      preferredDate: '',
      preferredTime: '',
    });
    
    setIsSubmitting(false);
    setStep('success');
  };

  if (step === 'success') {
    return (
      <main className="bg-slate-50 min-h-screen flex items-center justify-center py-16">
        <div className="max-w-md mx-auto px-4 text-center">
          <div className="size-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
            <Check className="size-10 text-green-600" />
          </div>
          <h1 className="text-2xl font-extrabold text-primary font-heading mb-3">
            Zgłoszenie przyjęte!
          </h1>
          <p className="text-text-muted mb-2">
            {isUrgent
              ? 'Twoje zgłoszenie oznaczono jako PILNE — skontaktujemy się z Tobą w ciągu 2 godzin.'
              : 'Skontaktujemy się z Tobą w ciągu 24 godzin, aby ustalić termin wizyty serwisanta.'}
          </p>
          <p className="text-sm text-text-muted mb-8">
            Jeśli sprawa jest pilna — zadzwoń bezpośrednio:
          </p>
          <a href={`tel:${companyDetails.phoneRaw}`}>
            <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold mx-auto hover:bg-accent/90 transition-colors mb-4">
              <Phone className="size-4" /> {companyDetails.phone}
            </button>
          </a>
          <Link href="/" className="text-sm text-text-muted hover:text-accent transition-colors">

              Wróć na stronę główną
            
</Link>
        </div>
      </main>
    );
  }

  return (
    <main className="bg-slate-50 min-h-screen py-12">
      <div className="max-w-2xl mx-auto px-4 sm:px-6">
        {/* Header */}
        <div className="text-center mb-8">
          <div className="size-14 bg-red-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
            <Wrench className="size-7 text-red-600" />
          </div>
          <h1 className="text-3xl font-extrabold text-primary font-heading mb-2">
            Zgłoś awarię / serwis
          </h1>
          <p className="text-text-muted">Wypełnij formularz — oddzwonimy i ustalimy termin wizyty</p>
        </div>

        {/* Pilne zgłoszenie toggle */}
        <div
          onClick={() => setIsUrgent(!isUrgent)}
          className={`flex items-center gap-4 p-4 rounded-2xl border-2 cursor-pointer mb-6 transition-all ${
            isUrgent ? 'border-red-400 bg-red-50' : 'border-border bg-white hover:border-red-300'
          }`}
        >
          <div className={`size-10 rounded-xl flex items-center justify-center shrink-0 ${isUrgent ? 'bg-red-500' : 'bg-slate-100'}`}>
            <AlertTriangle className={`size-5 ${isUrgent ? 'text-white' : 'text-text-muted'}`} />
          </div>
          <div className="flex-1">
            <p className={`font-bold text-sm ${isUrgent ? 'text-red-700' : 'text-primary'}`}>
              {isUrgent ? '🚨 ZGŁOSZENIE PILNE — kontakt w ciągu 2 godzin' : 'Oznacz jako PILNE'}
            </p>
            <p className="text-xs text-text-muted">Np. upał, brak chłodzenia, awaria krytyczna</p>
          </div>
          <div className={`size-6 rounded-full border-2 flex items-center justify-center shrink-0 ${isUrgent ? 'border-red-500 bg-red-500' : 'border-slate-300'}`}>
            {isUrgent && <Check className="size-3.5 text-white" />}
          </div>
        </div>

        <form onSubmit={handleSubmit} className="flex flex-col gap-5">

          {/* Sekcja 1: Urządzenie */}
          <div className="bg-white rounded-2xl border border-border p-6">
            <h2 className="text-base font-bold text-primary font-heading mb-4 flex items-center gap-2">
              <Zap className="size-4 text-accent" /> Urządzenie
            </h2>
            <div className="flex flex-col gap-4">
              <div>
                <label className="text-xs font-medium text-primary mb-1 block">Marka *</label>
                <select
                  required value={brand} onChange={e => { setBrand(e.target.value); setErrorCode(''); }}
                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                >
                  <option value="">Wybierz markę...</option>
                  {BRANDS.map(b => <option key={b} value={b}>{b}</option>)}
                </select>
              </div>

              <div>
                <label className="text-xs font-medium text-primary mb-1 block">Model (opcjonalnie)</label>
                <input
                  value={model} onChange={e => setModel(e.target.value)}
                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                  placeholder="Np. Gree Pular, LG Artcool 3,5 kW..."
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-medium text-primary mb-1 block">Na gwarancji?</label>
                  <select
                    value={warranty} onChange={e => setWarranty(e.target.value)}
                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                  >
                    <option value="">Nie wiem</option>
                    <option value="tak">Tak</option>
                    <option value="nie">Nie</option>
                  </select>
                </div>
                <div>
                  <label className="text-xs font-medium text-primary mb-1 block">Ostatni serwis</label>
                  <select
                    value={lastService} onChange={e => setLastService(e.target.value)}
                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                  >
                    <option value="">Nie pamiętam</option>
                    <option value="<1rok">Mniej niż rok temu</option>
                    <option value="1-2lata">1-2 lata temu</option>
                    <option value="2-5lat">2-5 lat temu</option>
                    <option value=">5lat">Ponad 5 lat temu</option>
                    <option value="nigdy">Nigdy nie był serwisowany</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          {/* Sekcja 2: Problem */}
          <div className="bg-white rounded-2xl border border-border p-6">
            <h2 className="text-base font-bold text-primary font-heading mb-4 flex items-center gap-2">
              <AlertTriangle className="size-4 text-accent" /> Opis problemu
            </h2>
            <div className="flex flex-col gap-4">
              <div>
                <label className="text-xs font-medium text-primary mb-2 block">Rodzaj problemu *</label>
                <div className="flex flex-wrap gap-2">
                  {PROBLEM_TYPES.map(p => (
                    <button
                      key={p} type="button"
                      onClick={() => setProblemType(p)}
                      className={`px-3 py-1.5 rounded-xl text-xs font-semibold border-2 transition-all ${
                        problemType === p ? 'border-accent bg-accent text-white' : 'border-border bg-white text-primary hover:border-accent'
                      }`}
                    >
                      {p}
                    </button>
                  ))}
                </div>
              </div>

              {/* Kod błędu z podpowiedzią */}
              <div>
                <label className="text-xs font-medium text-primary mb-1 block">
                  Kod błędu z wyświetlacza (opcjonalnie)
                </label>
                <input
                  value={errorCode}
                  onChange={e => setErrorCode(e.target.value)}
                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                  placeholder="Np. E1, F3, CH05..."
                />
                {errorHint && (
                  <div className="mt-2 p-3 bg-blue-50 border border-blue-200 rounded-xl text-xs text-blue-700">
                    <span className="font-bold">Kod {errorCode.toUpperCase()}:</span> {errorHint}
                  </div>
                )}
                {errorCode && !errorHint && brand && ERROR_CODES[brand] && (
                  <p className="mt-1 text-xs text-text-muted">Kodu nie rozpoznano — serwisant zdiagnozuje na miejscu.</p>
                )}
              </div>

              <div>
                <label className="text-xs font-medium text-primary mb-1 block">Szczegółowy opis</label>
                <textarea
                  value={description} onChange={e => setDescription(e.target.value)}
                  rows={3}
                  className="w-full rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none resize-none"
                  placeholder="Opisz kiedy się pojawił problem, jak często występuje, czy jest jakiś charakterystyczny dźwięk..."
                />
              </div>
            </div>
          </div>



          {/* Sekcja 4: Dane kontaktowe */}
          <div className="bg-white rounded-2xl border border-border p-6">
            <h2 className="text-base font-bold text-primary font-heading mb-4 flex items-center gap-2">
              <Phone className="size-4 text-accent" /> Dane kontaktowe
            </h2>
            <div className="flex flex-col gap-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-medium text-primary mb-1 block">Imię i nazwisko *</label>
                  <input
                    required value={name} onChange={e => setName(e.target.value)}
                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                    placeholder="Jan Kowalski"
                  />
                </div>
                <div>
                  <label className="text-xs font-medium text-primary mb-1 block">Telefon *</label>
                  <input
                    required type="tel" value={phone} onChange={e => setPhone(e.target.value)}
                    className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none"
                    placeholder="+48 600 000 000"
                  />
                </div>
              </div>
              <div>
                <label className="text-xs font-medium text-primary mb-1 block">Miasto *</label>
                <select
                  required value={city} onChange={e => setCity(e.target.value)}
                  className="w-full h-[42px] rounded-xl px-3 py-2.5 text-sm border border-border focus:border-accent outline-none bg-white"
                >
                  <option value="">Wybierz miasto...</option>
                  {['Wrocław', 'Legnica', 'Wałbrzych', 'Jelenia Góra', 'Lubin', 'Głogów', 'Świdnica', 'Dzierżoniów', 'Oleśnica', 'Oława', 'Trzebnica', 'Środa Śląska', 'Siechnice', 'Inne'].map(c => (
                    <option key={c} value={c}>{c}</option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Zgoda RODO */}
          <div
            className="flex items-start gap-3 cursor-pointer"
            onClick={() => setConsent(!consent)}
          >
            <div className={`size-5 rounded border-2 shrink-0 mt-0.5 flex items-center justify-center transition-colors ${
              consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
            }`}>
              {consent && <Check className="size-3 text-white" />}
            </div>
            <span className="text-xs text-text-muted leading-relaxed">
              Wyrażam zgodę na przetwarzanie danych osobowych podanych w formularzu
              w celu obsługi zgłoszenia serwisowego przez firmę ThermCool. *
            </span>
          </div>

          {/* Submit */}
          <button
            type="submit"
            disabled={isSubmitting || !brand || !problemType || !name || !phone || !city || !consent}
            className={`flex items-center justify-center gap-2 py-4 px-6 rounded-2xl font-bold text-base transition-all ${
              isUrgent
                ? 'bg-red-500 hover:bg-red-600 text-white'
                : 'bg-accent hover:bg-accent/90 text-white'
            } disabled:opacity-50 disabled:cursor-not-allowed`}
          >
            {isSubmitting ? 'Wysyłanie...' : isUrgent ? '🚨 Wyślij PILNE zgłoszenie' : 'Wyślij zgłoszenie serwisowe'}
          </button>

          <p className="text-xs text-text-muted text-center">
            {isUrgent ? 'Odpowiadamy na pilne zgłoszenia w ciągu 2 godzin w godzinach pracy.' : 'Skontaktujemy się w ciągu 24 godzin.'}
            {' '}Możesz też zadzwonić bezpośrednio: <a href={`tel:${companyDetails.phoneRaw}`} className="text-accent font-semibold">{companyDetails.phone}</a>
          </p>
        </form>
      </div>
    </main>
  );
}