'use client';

import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';

export default function WelcomePage() {
  const router = useRouter();
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    {
      image: 'https://images.unsplash.com/photo-1509062522246-3755977927d7?auto=format&fit=crop&w=1200&q=80',
      title: 'Welcome to GCX FSHS',
      subtitle: 'Field Staff Portal',
      description: 'Your mobile companion for tracking and recording food commodity deliveries to schools across Ghana.',
    },
    {
      image: 'https://images.unsplash.com/photo-1580582932707-520aed937b7b?auto=format&fit=crop&w=1200&q=80',
      title: 'Free SHS Programme',
      subtitle: 'Nourishing 1.6 Million Students',
      description: 'Supporting the Government of Ghana\'s vision of accessible quality education through reliable food supply to Senior High Schools.',
    },
    {
      image: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?auto=format&fit=crop&w=1200&q=80',
      title: 'Track Deliveries',
      subtitle: 'Real-time Monitoring',
      description: 'Record rice, beans, oil, maize and other essential commodities. Works offline and syncs automatically when connected.',
    },
    {
      image: 'https://images.unsplash.com/photo-1594608661623-aa0bd3a69799?auto=format&fit=crop&w=1200&q=80',
      title: 'Serving All Regions',
      subtitle: '700+ Schools Nationwide',
      description: 'From Greater Accra to the Northern Region, we ensure every student receives nutritious meals for better learning.',
    },
  ];

  // Auto-advance slides
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length]);

  const handleGetStarted = () => {
    localStorage.setItem('gcx_fshs_welcome_seen', 'true');
    router.push('/field-staff');
  };

  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
  const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);

  const isLastSlide = currentSlide === slides.length - 1;

  return (
    <div className="relative h-screen w-full overflow-hidden bg-black">
      {/* Full-screen Image Slides */}
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`absolute inset-0 transition-opacity duration-700 ${
            currentSlide === index ? 'opacity-100' : 'opacity-0'
          }`}
        >
          <img
            src={slide.image}
            alt={slide.title}
            className="h-full w-full object-cover"
          />
          {/* Gradient Overlay */}
          <div className="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent" />
        </div>
      ))}

      {/* Top Header - Logo */}
      <div className="absolute left-0 right-0 top-0 z-20 flex items-center justify-between p-6">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-white shadow-lg">
            <img src="/icon-192.png" alt="GCX FSHS" className="h-8 w-8 object-contain" />
          </div>
          <span className="text-sm font-semibold text-white">GCX FSHS</span>
        </div>
        <button
          onClick={handleGetStarted}
          className="text-sm font-medium text-white/80 transition hover:text-white"
        >
          Skip
        </button>
      </div>

      {/* Content Area */}
      <div className="absolute bottom-0 left-0 right-0 z-20 p-6 pb-10">
        {/* Slide Indicators */}
        <div className="mb-6 flex justify-center gap-2">
          {slides.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentSlide(index)}
              className={`h-1.5 rounded-full transition-all duration-300 ${
                currentSlide === index ? 'w-8 bg-white' : 'w-1.5 bg-white/40'
              }`}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>

        {/* Text Content */}
        <div className="mb-8 text-center">
          {slides.map((slide, index) => (
            <div
              key={index}
              className={`transition-all duration-500 ${
                currentSlide === index ? 'block' : 'hidden'
              }`}
            >
              <p className="text-sm font-medium uppercase tracking-wider text-emerald-400">
                {slide.subtitle}
              </p>
              <h1 className="mt-2 text-3xl font-bold text-white">
                {slide.title}
              </h1>
              <p className="mx-auto mt-4 max-w-sm text-sm leading-relaxed text-white/70">
                {slide.description}
              </p>
            </div>
          ))}
        </div>

        {/* Navigation & Action */}
        <div className="flex items-center justify-between gap-4">
          {/* Previous Button */}
          <button
            onClick={prevSlide}
            className="flex h-12 w-12 items-center justify-center rounded-full border border-white/20 text-white transition hover:bg-white/10"
            aria-label="Previous slide"
          >
            <ChevronLeft className="h-5 w-5" />
          </button>

          {/* Get Started / Next Button */}
          {isLastSlide ? (
            <button
              onClick={handleGetStarted}
              className="flex flex-1 items-center justify-center gap-2 rounded-full bg-emerald-500 py-4 font-semibold text-white shadow-lg shadow-emerald-500/30 transition hover:bg-emerald-400"
            >
              <span>Get Started</span>
              <ArrowRight className="h-5 w-5" />
            </button>
          ) : (
            <button
              onClick={nextSlide}
              className="flex flex-1 items-center justify-center gap-2 rounded-full bg-white py-4 font-semibold text-slate-900 transition hover:bg-white/90"
            >
              <span>Next</span>
              <ArrowRight className="h-5 w-5" />
            </button>
          )}

          {/* Next Button */}
          <button
            onClick={nextSlide}
            className="flex h-12 w-12 items-center justify-center rounded-full border border-white/20 text-white transition hover:bg-white/10"
            aria-label="Next slide"
          >
            <ChevronRight className="h-5 w-5" />
          </button>
        </div>

        {/* Footer */}
        <p className="mt-6 text-center text-[10px] text-white/40">
          Government of Ghana · Ministry of Education
        </p>
      </div>
    </div>
  );
}