'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { ArrowRight, Smartphone, CheckCircle, Shield, Wifi, Download, Share, Plus, MoreVertical } from 'lucide-react';
import { type PWAInstallState } from '@/hooks/usePWAInstall';

interface HeroSectionProps {
  pwaInstall: PWAInstallState;
}

export function HeroSection({ pwaInstall }: HeroSectionProps) {
  const [showInstructions, setShowInstructions] = useState(false);

  const handleInstallClick = async () => {
    if (pwaInstall.isInstallable) {
      await pwaInstall.promptInstall();
    } else {
      setShowInstructions(true);
    }
  };

  return (
    <section
      id="hero"
      aria-labelledby="hero-heading"
      className="min-h-screen flex items-center justify-center px-4 pt-24 pb-16 relative overflow-hidden"
    >
      {/* Background decorative elements */}
      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-[120px] animate-pulse-subtle pointer-events-none" />
      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/15 rounded-full blur-[120px] animate-pulse-subtle delay-500 pointer-events-none" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-br from-primary/10 to-purple-500/10 rounded-full blur-[150px] pointer-events-none" />

      <div className="container mx-auto max-w-5xl text-center relative z-10">
        {/* Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-8 animate-fade-in">
          <CheckCircle className="h-4 w-4 text-primary" />
          <span className="text-sm font-medium text-primary">Free & Works Offline</span>
        </div>

        {/* Headline */}
        <h1
          id="hero-heading"
          className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight mb-6 animate-fade-in-up"
        >
          <span className="bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
            Take Control
          </span>
          <br />
          <span className="text-foreground">of Your Journey</span>
        </h1>

        {/* Subheadline */}
        <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 animate-fade-in-up delay-200">
          Track nicotine and marijuana usage, celebrate milestones, and watch your health recover.
          Your companion to a healthier life.
        </p>

        {/* Dual CTAs */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in-up delay-300">
          <Button
            asChild
            size="lg"
            className="h-14 px-8 text-lg rounded-xl bg-gradient-to-r from-primary to-purple-600 hover:from-primary/90 hover:to-purple-600/90 hover:scale-105 transition-all shadow-xl shadow-primary/25"
          >
            <Link href="/login">
              Get Started Free
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
          </Button>

          {!pwaInstall.isStandalone && (
            <Button
              size="lg"
              variant="outline"
              onClick={handleInstallClick}
              aria-label="Install QuitTraq as an app on your device"
              className="h-14 px-8 text-lg rounded-xl border-purple-500/30 hover:bg-purple-500/10 hover:scale-105 transition-all"
            >
              <Smartphone className="mr-2 h-5 w-5" />
              Install App
            </Button>
          )}
        </div>

        {/* Trust signals */}
        <div className="flex flex-wrap justify-center gap-6 mt-12 animate-fade-in-up delay-400">
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Shield className="h-4 w-4 text-primary" />
            <span>Privacy First</span>
          </div>
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Wifi className="h-4 w-4 text-primary" />
            <span>Works Offline</span>
          </div>
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <CheckCircle className="h-4 w-4 text-primary" />
            <span>Always Free</span>
          </div>
        </div>
      </div>

      {/* PWA Install Instructions Dialog */}
      <Dialog open={showInstructions} onOpenChange={setShowInstructions}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Download className="h-5 w-5 text-purple-400" />
              Add QuitTraq to Home Screen
            </DialogTitle>
            <DialogDescription>
              Get quick access to track your progress right from your phone&apos;s home screen.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-6 py-4">
            {pwaInstall.isIOS ? (
              <div className="space-y-4">
                <p className="text-sm font-medium text-purple-400">For iPhone / iPad (Safari):</p>
                <ol className="space-y-4 text-sm">
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      1
                    </span>
                    <div>
                      <p>
                        Tap the <strong>Share</strong> button
                      </p>
                      <div className="mt-1 inline-flex items-center gap-1 rounded bg-muted px-2 py-1">
                        <Share className="h-4 w-4" />
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      2
                    </span>
                    <div>
                      <p>
                        Scroll down and tap <strong>&quot;Add to Home Screen&quot;</strong>
                      </p>
                      <div className="mt-1 inline-flex items-center gap-1 rounded bg-muted px-2 py-1">
                        <Plus className="h-4 w-4" /> Add to Home Screen
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      3
                    </span>
                    <p>
                      Tap <strong>&quot;Add&quot;</strong> to confirm
                    </p>
                  </li>
                </ol>
              </div>
            ) : pwaInstall.isAndroid ? (
              <div className="space-y-4">
                <p className="text-sm font-medium text-purple-400">For Android (Chrome):</p>
                <ol className="space-y-4 text-sm">
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      1
                    </span>
                    <div>
                      <p>
                        Tap the <strong>menu</strong> button (3 dots)
                      </p>
                      <div className="mt-1 inline-flex items-center gap-1 rounded bg-muted px-2 py-1">
                        <MoreVertical className="h-4 w-4" />
                      </div>
                    </div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      2
                    </span>
                    <p>
                      Tap <strong>&quot;Add to Home screen&quot;</strong> or{' '}
                      <strong>&quot;Install app&quot;</strong>
                    </p>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-purple-400 text-xs font-bold">
                      3
                    </span>
                    <p>
                      Tap <strong>&quot;Add&quot;</strong> or <strong>&quot;Install&quot;</strong> to
                      confirm
                    </p>
                  </li>
                </ol>
              </div>
            ) : (
              <div className="space-y-4">
                <p className="text-sm font-medium text-purple-400">On mobile device:</p>
                <ul className="space-y-2 text-sm text-muted-foreground">
                  <li>
                    <strong>iPhone/iPad:</strong> Use Safari, tap Share &rarr; Add to Home Screen
                  </li>
                  <li>
                    <strong>Android:</strong> Use Chrome, tap Menu &rarr; Add to Home screen
                  </li>
                </ul>
                <p className="text-xs text-muted-foreground mt-4">
                  Open this page on your phone to add QuitTraq to your home screen for quick access!
                </p>
              </div>
            )}

            <div className="pt-2 border-t border-white/10">
              <p className="text-xs text-muted-foreground text-center">
                Once added, tap the QuitTraq icon to quickly log your usage!
              </p>
            </div>
          </div>

          <Button onClick={() => setShowInstructions(false)} className="w-full">
            Got it!
          </Button>
        </DialogContent>
      </Dialog>
    </section>
  );
}
