'use client'
import React, { useState } from 'react'
import { usePathname } from 'next/navigation'
import { MapPin, Phone, Mail, Clock, MessageCircle, Send } from 'lucide-react'
import type { Page } from '../../payload-types'

type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'contactInfo' }>

export const ContactInfoBlock: React.FC<Props> = ({
  address = 'DO POTWIERDZENIA PRZEZ KLIENTA',
  phone = '+49 123 456 789',
  email = 'kontakt@example.com',
  hours = 'Pon-Pt: 9:00 - 17:00\nPo wcześniejszym umówieniu',
}) => {
  const pathname = usePathname()
  const isDe = pathname?.startsWith('/de')

  const [formData, setFormData] = useState({
    service: '',
    name: '',
    email: '',
    message: '',
  })
  const [submitted, setSubmitted] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // TODO: Podłączyć logikę wysyłki formularza przez backend API (np. Resend / SMTP / Payload custom endpoint).
    // Pamiętać o przekazaniu w payloadzie: formData.service (wybrana usługa), formData.name, formData.email, formData.message.
    setSubmitted(true)
  }

  return (
    <section className="py-12 md:py-16 bg-background">
      <div className="container-premium">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start">
          
          {/* Kolumna 1: Dane kontaktowe + WhatsApp CTA (Główna opcja) */}
          <div className="lg:col-span-5 flex flex-col gap-8">
            <div className="bg-card border border-border p-8 rounded-none shadow-sm flex flex-col gap-6">
              <h2 className="font-heading text-2xl font-bold text-foreground">
                {isDe ? 'Direkter Kontakt' : 'Bezpośredni kontakt'}
              </h2>
              
              <ul className="flex flex-col gap-5 text-foreground/80 text-base">
                {address && (
                  <li className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                      <MapPin size={20} />
                    </div>
                    <div>
                      <span className="text-xs text-foreground/50 uppercase tracking-wider font-semibold block mb-0.5">
                        {isDe ? 'Adresse' : 'Adres'}
                      </span>
                      <span className="font-medium whitespace-pre-line text-foreground">{address}</span>
                    </div>
                  </li>
                )}

                {phone && (
                  <li className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                      <Phone size={20} />
                    </div>
                    <div>
                      <span className="text-xs text-foreground/50 uppercase tracking-wider font-semibold block mb-0.5">
                        {isDe ? 'Telefon' : 'Telefon'}
                      </span>
                      <a href={`tel:${phone.replace(/\s+/g, '')}`} className="font-medium hover:text-accent transition-colors text-foreground">
                        {phone}
                      </a>
                    </div>
                  </li>
                )}

                {email && (
                  <li className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                      <Mail size={20} />
                    </div>
                    <div>
                      <span className="text-xs text-foreground/50 uppercase tracking-wider font-semibold block mb-0.5">
                        {isDe ? 'E-Mail' : 'E-mail'}
                      </span>
                      <a href={`mailto:${email}`} className="font-medium hover:text-accent transition-colors text-foreground">
                        {email}
                      </a>
                    </div>
                  </li>
                )}

                {hours && (
                  <li className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded-none bg-accent/10 flex items-center justify-center text-accent shrink-0 mt-0.5">
                      <Clock size={20} />
                    </div>
                    <div>
                      <span className="text-xs text-foreground/50 uppercase tracking-wider font-semibold block mb-0.5">
                        {isDe ? 'Öffnungszeiten' : 'Godziny pracy'}
                      </span>
                      <span className="font-medium whitespace-pre-line text-foreground">{hours}</span>
                    </div>
                  </li>
                )}
              </ul>
            </div>

            {/* Główne CTA: WhatsApp */}
            <div className="p-8 bg-card border-2 border-green-500/20 rounded-none flex flex-col gap-4">
              <span className="inline-block text-xs font-bold uppercase tracking-widest text-green-600 dark:text-green-400">
                {isDe ? 'Empfohlen & Am schnellsten' : 'Zalecany i najszybszy kontakt'}
              </span>
              <h3 className="font-heading text-xl font-bold text-foreground">
                {isDe ? 'Schreiben Sie auf WhatsApp' : 'Napisz na WhatsApp'}
              </h3>
              <p className="text-sm text-foreground/70 leading-relaxed">
                {isDe 
                  ? 'Erhalten Sie schnelle Antworten auf Ihre Fragen direkt von Dipl.-Ing. Janusz Kędzierski.' 
                  : 'Najszybsza forma kontaktu. Prześlij zapytanie lub dokumenty i uzyskaj szybką odpowiedź.'}
              </p>
              <a
                href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-2 inline-flex items-center justify-center gap-3 px-6 py-4 bg-green-500 hover:bg-green-600 text-white font-bold text-base rounded-none transition-colors shadow-sm"
              >
                <MessageCircle size={22} />
                <span>{isDe ? 'WhatsApp Chat starten' : 'Napisz na WhatsApp'}</span>
              </a>
            </div>
          </div>

          {/* Kolumna 2: Prosty formularz kontaktowy (Drugorzędna opcja) */}
          <div className="lg:col-span-7 bg-card border border-border p-8 md:p-10 rounded-none shadow-sm">
            <div className="mb-8">
              <h2 className="font-heading text-2xl md:text-3xl font-bold text-foreground">
                {isDe ? 'Kontaktformular' : 'Formularz kontaktowy'}
              </h2>
              <p className="text-sm md:text-base text-foreground/70 mt-2 leading-relaxed">
                {isDe
                  ? 'Bevorzugen Sie eine schriftliche Nachricht? Füllen Sie das folgende Formular aus — wir antworten in der Regel innerhalb von 24 Stunden.'
                  : 'Wolisz kontakt tradycyjny? Wypełnij formularz, a odpowiemy najszybciej jak to możliwe.'}
              </p>
            </div>

            {submitted ? (
              <div className="p-6 bg-accent/10 border border-accent/20 rounded-none text-center">
                <h3 className="font-heading font-bold text-lg text-foreground mb-2">
                  {isDe ? 'Vielen Dank für Ihre Nachricht!' : 'Dziękujemy za wiadomość!'}
                </h3>
                <p className="text-sm text-foreground/70">
                  {isDe 
                    ? 'Ihre Anfrage wurde entgegengenommen. Wir melden uns in Kürze.' 
                    : 'Twoje zapytanie zostało zarejestrowane. Skontaktujemy się wkrótce.'}
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                <div>
                  <label htmlFor="service" className="block text-sm font-semibold text-foreground mb-2">
                    {isDe ? 'Worum geht es?' : 'Czego dotyczy zapytanie?'} <span className="text-accent">*</span>
                  </label>
                  <select
                    id="service"
                    required
                    value={formData.service}
                    onChange={(e) => setFormData({ ...formData, service: e.target.value })}
                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  >
                    <option value="" disabled>
                      {isDe ? '— Bitte auswählen —' : '— Wybierz temat zapytania —'}
                    </option>
                    {isDe ? (
                      <>
                        <option value="Steuererklärung">Steuererklärung</option>
                        <option value="Steuerbescheidprüfung">Steuerbescheidprüfung</option>
                        <option value="Kindergeld / Riester-Rente">Kindergeld / Riester-Rente</option>
                        <option value="Sonstiges">Sonstiges</option>
                      </>
                    ) : (
                      <>
                        <option value="Rozliczenie roczne (Steuererklärung)">Rozliczenie roczne (Steuererklärung)</option>
                        <option value="Sprawdzenie decyzji podatkowej (Steuerbescheid)">Sprawdzenie decyzji podatkowej (Steuerbescheid)</option>
                        <option value="Zasiłki i dopłaty (Kindergeld, Riester-Rente)">Zasiłki i dopłaty (Kindergeld, Riester-Rente)</option>
                        <option value="Inna sprawa">Inna sprawa</option>
                      </>
                    )}
                  </select>
                </div>

                <div>
                  <label htmlFor="name" className="block text-sm font-semibold text-foreground mb-2">
                    {isDe ? 'Vor- und Nachname' : 'Imię i nazwisko'} <span className="text-accent">*</span>
                  </label>
                  <input
                    type="text"
                    id="name"
                    required
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder={isDe ? 'z. B. Jan Kowalski' : 'np. Jan Kowalski'}
                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  />
                </div>

                <div>
                  <label htmlFor="email" className="block text-sm font-semibold text-foreground mb-2">
                    {isDe ? 'E-Mail-Adresse' : 'Adres e-mail'} <span className="text-accent">*</span>
                  </label>
                  <input
                    type="email"
                    id="email"
                    required
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="kontakt@example.com"
                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
                  />
                </div>

                <div>
                  <label htmlFor="message" className="block text-sm font-semibold text-foreground mb-2">
                    {isDe ? 'Ihre Nachricht' : 'Treść wiadomości'} <span className="text-accent">*</span>
                  </label>
                  <textarea
                    id="message"
                    required
                    rows={5}
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    placeholder={isDe ? 'Wie können wir Ihnen helfen?' : 'W czym możemy Ci pomóc? Opisz krótko swoją sprawę...'}
                    className="w-full px-4 py-3 bg-background border border-border rounded-none text-foreground focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition-all resize-y"
                  />
                </div>

                <div className="pt-2">
                  <button
                    type="submit"
                    className="w-full sm:w-auto px-8 py-4 bg-accent hover:bg-accent-hover text-accent-foreground font-bold text-base rounded-none transition-colors shadow-sm flex items-center justify-center gap-2 cursor-pointer"
                  >
                    <Send size={18} />
                    <span>{isDe ? 'Nachricht senden' : 'Wyślij wiadomość'}</span>
                  </button>
                </div>
              </form>
            )}
          </div>

        </div>
      </div>
    </section>
  )
}