/*
 * DESIGN: "Clinical Warmth"
 * Sezione registrazione/login visibile ma non ancora attiva.
 * Gli elementi restano leggibili, ma ogni interazione mostra
 * il messaggio "Servizio in corso di attivazione".
 */
import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { Button } from "@/components/ui/button";
import { User, Mail, Lock, Eye, CheckCircle2, PawPrint, Clock3 } from "lucide-react";
import { toast } from "sonner";

const benefits = [
  "Storico visite e referti digitali",
  "Promemoria vaccinazioni automatici",
  "Prenotazioni online prioritarie",
  "Comunicazioni dirette con il veterinario",
  "Gestione di piu animali domestici",
];

function showActivationToast() {
  toast.info("Servizio in corso di attivazione", {
    description: "L'area riservata sara disponibile a breve.",
  });
}

function DisabledInput({
  icon,
  type,
  placeholder,
}: {
  icon: React.ComponentType<{ size?: number; className?: string }>;
  type: string;
  placeholder: string;
}) {
  const Icon = icon;

  return (
    <div className="relative">
      <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
      <input
        type={type}
        placeholder={placeholder}
        disabled
        className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50/90 py-2.5 pl-9 pr-3 text-sm text-gray-400 opacity-90"
      />
    </div>
  );
}

export default function AuthSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <section id="registrazione" className="bg-white py-20 md:py-28">
      <div className="container">
        <div className="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
          <motion.div
            ref={ref}
            initial={{ opacity: 0, x: -30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8 }}
          >
            <div className="mb-4 flex items-center gap-3">
              <div className="h-0.5 w-12 bg-[#4ECDC4]" />
              <span className="text-sm font-semibold uppercase tracking-widest text-[#4ECDC4]">
                Area Personale
              </span>
            </div>

            <h2
              className="mb-6 text-[#1B4F72]"
              style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: "clamp(2rem, 4vw, 3rem)",
                fontWeight: 600,
                lineHeight: 1.2,
              }}
            >
              Accedi e gestisci{" "}
              <span className="italic">la salute del tuo animale</span>
            </h2>

            <p className="mb-8 text-base leading-relaxed text-gray-600">
              L&apos;area riservata e la registrazione online sono in fase di attivazione.
              Qui i clienti potranno gestire i propri dati, consultare lo storico e accedere
              ai servizi digitali della clinica in uno spazio personale dedicato.
            </p>

            <div className="mb-8 space-y-3">
              {benefits.map((benefit) => (
                <div key={benefit} className="flex items-center gap-3">
                  <div className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-[#4ECDC4]/15">
                    <CheckCircle2 size={14} className="text-[#4ECDC4]" />
                  </div>
                  <span className="text-sm text-gray-700">{benefit}</span>
                </div>
              ))}
            </div>

            <div className="flex items-center gap-4 rounded-2xl bg-[#F5F0E8] p-6">
              <div className="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full bg-[#1B4F72]">
                <PawPrint size={24} className="text-[#4ECDC4]" />
              </div>
              <div>
                <p className="text-sm font-semibold text-[#1B4F72]">Servizio in attivazione</p>
                <p className="mt-0.5 text-xs text-gray-600">
                  La clinica sta completando la configurazione dell&apos;area riservata per offrirti
                  un accesso semplice e sicuro.
                </p>
              </div>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={isInView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="relative overflow-hidden rounded-2xl border border-gray-100 bg-white shadow-lg">
              <div className="flex border-b border-gray-100">
                <button
                  type="button"
                  disabled
                  className="flex-1 cursor-not-allowed border-b-2 border-[#4ECDC4] bg-[#F5F0E8]/50 py-4 text-sm font-semibold text-[#1B4F72]"
                >
                  Registrati
                </button>
                <button
                  type="button"
                  disabled
                  className="flex-1 cursor-not-allowed py-4 text-sm font-semibold text-gray-400"
                >
                  Accedi
                </button>
              </div>

              <div className="p-6 md:p-8">
                <div className="mb-5 flex items-center gap-3 rounded-xl border border-[#E4D7C6] bg-[#FFF9F1] px-4 py-3">
                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#A95F3A]/12">
                    <Clock3 size={18} className="text-[#A95F3A]" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-[#1B4F72]">Servizio in corso di attivazione</p>
                    <p className="text-xs text-gray-600">
                      Registrazione e accesso saranno disponibili a breve.
                    </p>
                  </div>
                </div>

                <div className="space-y-4 opacity-75">
                  <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                      <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
                        Nome
                      </label>
                      <DisabledInput icon={User} type="text" placeholder="Mario" />
                    </div>
                    <div>
                      <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
                        Cognome
                      </label>
                      <DisabledInput icon={User} type="text" placeholder="Rossi" />
                    </div>
                  </div>

                  <div>
                    <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
                      Email
                    </label>
                    <DisabledInput icon={Mail} type="email" placeholder="mario.rossi@email.it" />
                  </div>

                  <div>
                    <label className="mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-600">
                      Password
                    </label>
                    <div className="relative">
                      <Lock size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                      <input
                        type="password"
                        placeholder="••••••••"
                        disabled
                        className="w-full cursor-not-allowed rounded-lg border border-gray-200 bg-gray-50/90 py-2.5 pl-9 pr-10 text-sm text-gray-400 opacity-90"
                      />
                      <span className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                        <Eye size={15} />
                      </span>
                    </div>
                  </div>

                  <div className="flex items-start gap-2 pt-1">
                    <input
                      type="checkbox"
                      disabled
                      className="mt-0.5 cursor-not-allowed accent-[#4ECDC4]"
                    />
                    <p className="text-xs leading-relaxed text-gray-500">
                      Accetto la Privacy Policy e i Termini di Servizio.
                    </p>
                  </div>

                  <Button
                    type="button"
                    disabled
                    className="w-full cursor-not-allowed bg-[#1B4F72] py-3 text-base font-bold text-white opacity-70"
                  >
                    Crea il tuo account
                  </Button>

                  <p className="text-center text-xs text-gray-400">Password dimenticata?</p>
                </div>
              </div>

              <button
                type="button"
                aria-label="Servizio in corso di attivazione"
                onClick={showActivationToast}
                className="absolute inset-0 z-10"
              />
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}