"use client";

import React, { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Progress } from '@/components/ui/progress';
import { Rocket, BrainCircuit, UserCog, Database, Shield } from 'lucide-react';

// Register GSAP plugins
gsap.registerPlugin(ScrollTrigger);

interface OnboardingStep {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  component: React.ReactNode;
}

export default function DigitalTwinOnboarding() {
  const containerRef = useRef<HTMLDivElement>(null);
  const progressRef = useRef<HTMLDivElement>(null);
  const [currentStep, setCurrentStep] = React.useState(0);
  const [completedSteps, setCompletedSteps] = React.useState<Set<string>>(new Set());

  // Animation setup
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from(".onboarding-card", {
        opacity: 0,
        y: 50,
        duration: 0.8,
        stagger: 0.15,
        ease: "power3.out",
      });

      ScrollTrigger.create({
        trigger: containerRef.current,
        start: "top top",
        end: "bottom bottom",
        onUpdate: (self) => {
          if (progressRef.current) {
            progressRef.current.style.width = `${self.progress * 100}%`;
          }
        },
      });
    }, containerRef);

    return () => ctx.revert();
  }, []);

  const onboardingSteps: OnboardingStep[] = [
    {
      id: "personalization",
      title: "Personalization Setup",
      description: "Configure your digital twin's personality and interaction style",
      icon: <UserCog className="w-6 h-6 text-indigo-600" />,
      component: (
        <div className="space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="communication-style">Communication Style</Label>
              <select
                id="communication-style"
                className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              >
                <option value="professional">Professional</option>
                <option value="friendly">Friendly</option>
                <option value="concise">Concise</option>
                <option value="detailed">Detailed</option>
              </select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="response-length">Response Length</Label>
              <Input id="response-length" type="range" min="1" max="5" defaultValue="3" />
            </div>
          </div>
          <div className="space-y-2">
            <Label htmlFor="knowledge-domains">Primary Knowledge Domains</Label>
            <div className="flex flex-wrap gap-2">
              {['Technology', 'Business', 'Creative Arts', 'Science', 'Health'].map((domain) => (
                <Button
                  key={domain}
                  variant="outline"
                  className="rounded-full"
                  size="sm"
                >
                  {domain}
                </Button>
              ))}
            </div>
          </div>
        </div>
      ),
    },
    {
      id: "data-sources",
      title: "Data Integration",
      description: "Connect your digital twin to your knowledge sources",
      icon: <Database className="w-6 h-6 text-blue-600" />,
      component: (
        <div className="space-y-6">
          <div className="space-y-4">
            <div className="flex items-center gap-4">
              <div className="flex-1 space-y-1">
                <Label>Email Integration</Label>
                <p className="text-sm text-muted-foreground">
                  Connect your email for communication context
                </p>
              </div>
              <Button variant="outline">Connect</Button>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex-1 space-y-1">
                <Label>Calendar Access</Label>
                <p className="text-sm text-muted-foreground">
                  Enable scheduling and time management
                </p>
              </div>
              <Button variant="outline">Connect</Button>
            </div>
            <div className="flex items-center gap-4">
              <div className="flex-1 space-y-1">
                <Label>Cloud Storage</Label>
                <p className="text-sm text-muted-foreground">
                  Access your documents and files
                </p>
              </div>
              <Button variant="outline">Connect</Button>
            </div>
          </div>
        </div>
      ),
    },
    {
      id: "capabilities",
      title: "Capabilities Selection",
      description: "Select your digital twin's core competencies",
      icon: <BrainCircuit className="w-6 h-6 text-purple-600" />,
      component: (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            "Email Management",
            "Schedule Optimization",
            "Research Assistant",
            "Meeting Summaries",
            "Data Analysis",
            "Content Generation",
            "Task Automation",
            "Learning Companion",
          ].map((capability) => (
            <Card key={capability} className="hover:border-primary transition-colors">
              <CardHeader className="flex flex-row items-center space-y-0 space-x-4 p-4">
                <input
                  type="checkbox"
                  id={`capability-${capability.toLowerCase().replace(' ', '-')}`}
                  className="h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                />
                <Label htmlFor={`capability-${capability.toLowerCase().replace(' ', '-')}`}>
                  {capability}
                </Label>
              </CardHeader>
            </Card>
          ))}
        </div>
      ),
    },
    {
      id: "security",
      title: "Privacy & Security",
      description: "Configure your data protection preferences",
      icon: <Shield className="w-6 h-6 text-green-600" />,
      component: (
        <div className="space-y-6">
          <div className="space-y-4">
            <div className="flex items-start space-x-4">
              <div className="flex items-center h-5">
                <input
                  id="data-retention"
                  name="data-retention"
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  defaultChecked
                />
              </div>
              <div className="flex-1">
                <Label htmlFor="data-retention">Automatic Data Retention</Label>
                <p className="text-sm text-muted-foreground">
                  Allow temporary data storage for context continuity
                </p>
              </div>
            </div>
            <div className="flex items-start space-x-4">
              <div className="flex items-center h-5">
                <input
                  id="analytics"
                  name="analytics"
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  defaultChecked
                />
              </div>
              <div className="flex-1">
                <Label htmlFor="analytics">Anonymous Usage Analytics</Label>
                <p className="text-sm text-muted-foreground">
                  Help improve the system while protecting your identity
                </p>
              </div>
            </div>
            <div className="flex items-start space-x-4">
              <div className="flex items-center h-5">
                <input
                  id="encryption"
                  name="encryption"
                  type="checkbox"
                  className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
                  defaultChecked
                />
              </div>
              <div className="flex-1">
                <Label htmlFor="encryption">End-to-End Encryption</Label>
                <p className="text-sm text-muted-foreground">
                  Maximum security for all your communications
                </p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
  ];

  const handleNext = () => {
    setCompletedSteps(new Set(completedSteps).add(onboardingSteps[currentStep].id));
    if (currentStep < onboardingSteps.length - 1) {
      setCurrentStep(currentStep + 1);
    }
  };

  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1);
    }
  };

  return (
    <div 
      ref={containerRef}
      className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 py-12 px-4 sm:px-6 lg:px-8"
    >
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl mb-4">
            Configure Your <span className="text-indigo-600">Digital Twin</span>
          </h1>
          <p className="text-xl text-slate-600 max-w-3xl mx-auto">
            Personalize your AI companion in just a few steps
          </p>
        </div>

        <div className="mb-8">
          <div className="flex justify-between mb-2">
            {onboardingSteps.map((step, index) => (
              <div
                key={step.id}
                className={`flex flex-col items-center ${index < onboardingSteps.length - 1 ? 'flex-1' : ''}`}
              >
                <div
                  className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 transition-colors ${
                    currentStep >= index
                      ? 'bg-indigo-600 text-white'
                      : 'bg-slate-200 text-slate-600'
                  } ${
                    completedSteps.has(step.id) ? 'ring-2 ring-offset-2 ring-indigo-500' : ''
                  }`}
                >
                  {index + 1}
                </div>
                <span
                  className={`text-sm font-medium ${
                    currentStep === index ? 'text-indigo-600' : 'text-slate-600'
                  }`}
                >
                  {step.title}
                </span>
              </div>
            ))}
          </div>
          <div className="relative h-2 bg-slate-200 rounded-full overflow-hidden">
            <div
              ref={progressRef}
              className="absolute top-0 left-0 h-full bg-indigo-600 transition-all duration-300 ease-out"
              style={{
                width: `${(currentStep / (onboardingSteps.length - 1)) * 100}%`,
              }}
            />
          </div>
        </div>

        <Card className="onboarding-card shadow-xl">
          <CardHeader>
            <div className="flex items-center gap-4 mb-2">
              {onboardingSteps[currentStep].icon}
              <div>
                <CardTitle className="text-2xl">
                  {onboardingSteps[currentStep].title}
                </CardTitle>
                <CardDescription>
                  {onboardingSteps[currentStep].description}
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-8">
              {onboardingSteps[currentStep].component}

              <div className="flex justify-between pt-6 border-t border-slate-200">
                <Button
                  variant="outline"
                  onClick={handleBack}
                  disabled={currentStep === 0}
                >
                  Back
                </Button>
                <Button
                  onClick={handleNext}
                  className="gap-2"
                >
                  {currentStep === onboardingSteps.length - 1 ? (
                    <>
                      Complete Setup <Rocket className="w-4 h-4" />
                    </>
                  ) : (
                    <>
                      Next Step
                    </>
                  )}
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}