"use client"

import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import {
  AlertTriangle,
  Brain,
  Briefcase,
  Clock,
  Eye,
  FileText,
  Files,
  Globe,
  HelpCircle,
  ListChecks,
  Lock,
  Mic,
  Network,
  Scale,
  ShieldCheck,
  Video,
  Youtube,
  Zap,
} from "lucide-react"
import { handleSignupFlow } from "@/lib/cookies"

const IconMap = {
  AlertTriangle,
  Brain,
  Briefcase,
  Clock,
  Eye,
  FileText,
  Files,
  Globe,
  ListChecks,
  Lock,
  Mic,
  Video,
  Network,
  Scale,
  ShieldCheck,
  Youtube,
  Zap,
  HelpCircle
}
import { MockToolClient } from "@/components/tools/mock-tool-client"

interface Feature {
  icon: string
  title: string
  description: string
}

interface Step {
  number: number
  title: string
  description: string
}

interface UserType {
  title: string
  description: string
}

interface Benefit {
  icon: string
  title: string
  description: string
}

interface ToolPageProps {
  title: string
  subtitle: string
  description: string
  ctaText: string
  ctaLink?: string
  whatIsTitle: string
  whatIsDescription: string
  features: Feature[]
  featuresTitle: string
  featuresSubtitle: string
  howItWorks: Step[]
  userTypes: UserType[]
  userTypesTitle: string
  benefits: Benefit[]
  benefitsTitle: string
  finalCta: {
    title: string
    description: string
    buttonText: string
  }
}

export function ToolPageTemplate({
  title,
  subtitle,
  description,
  ctaText,
  ctaLink = "https://app.codeframeai.com",
  whatIsTitle,
  whatIsDescription,
  features,
  featuresTitle,
  featuresSubtitle,
  howItWorks,
  userTypes,
  userTypesTitle,
  benefits,
  benefitsTitle,
  finalCta
}: ToolPageProps) {
  const [resolvedCtaLink, setResolvedCtaLink] = useState('/products')

  useEffect(() => {
    if (ctaLink && ctaLink !== "https://app.codeframeai.com") {
      setResolvedCtaLink(ctaLink)
    } else {
      setResolvedCtaLink(handleSignupFlow())
    }
  }, [ctaLink])

  return (
    <>
      {/* Hero Section */}
      <section className="relative overflow-hidden bg-gradient-to-br from-primary/5 via-background to-accent/5 pt-4 pb-16 sm:pt-6 sm:pb-24 lg:pt-8 lg:pb-24">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
        </div>

        <div className="mx-auto max-w-4xl px-4 lg:px-8 text-center">
          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-4 text-balance">
            {title}
          </h1>
          <p className="text-base text-muted-foreground mb-4 max-w-2xl mx-auto text-pretty leading-relaxed">
            {description}
          </p>

          {/* Interactive Mock Tool */}
          <div className="mt-2">
            <MockToolClient buttonText={ctaText} ctaLink={resolvedCtaLink} />
          </div>
        </div>
      </section>

      {/* What Is Section */}
      <section className="py-16 sm:py-20 bg-card">
        <div className="mx-auto max-w-4xl px-4 lg:px-8 text-center">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4">
            {whatIsTitle}
          </h2>
          <p className="text-muted-foreground leading-relaxed text-lg">
            {whatIsDescription}
          </p>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-16 sm:py-20 bg-background">
        <div className="mx-auto max-w-7xl px-4 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-2">
              {featuresTitle}
            </h2>
            <p className="text-muted-foreground">{featuresSubtitle}</p>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {features.map((feature) => {
              const IconComponent = (IconMap as any)[feature.icon] || IconMap.HelpCircle;
              return (
                <div
                  key={feature.title}
                  className="bg-card/90 backdrop-blur-sm rounded-xl border border-border p-6 hover:border-primary/30 hover:shadow-lg hover:-translate-y-1 transition-all duration-300 group"
                >
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4 group-hover:bg-primary transition-colors">
                    <IconComponent className="h-6 w-6 text-primary group-hover:text-primary-foreground transition-colors" />
                  </div>
                  <h3 className="font-semibold text-foreground mb-2">{feature.title}</h3>
                  <p className="text-sm text-muted-foreground">{feature.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* How It Works Section */}
      {howItWorks.length > 0 && (
        <section className="py-16 sm:py-20 bg-card">
          <div className="mx-auto max-w-4xl px-4 lg:px-8">
            <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-12">
              How It Works
            </h2>

            <div className="grid md:grid-cols-3 gap-8">
              {howItWorks.map((step) => (
                <div key={step.number} className="text-center">
                  <div className="h-14 w-14 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xl font-bold mx-auto mb-4">
                    {step.number}
                  </div>
                  <h3 className="font-semibold text-foreground mb-2">{step.title}</h3>
                  <p className="text-sm text-muted-foreground">{step.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* User Types Section */}
      <section className="py-16 sm:py-20 bg-background">
        <div className="mx-auto max-w-4xl px-4 lg:px-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-12">
            {userTypesTitle}
          </h2>

          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {userTypes.map((user) => (
              <div
                key={user.title}
                className="bg-card/90 backdrop-blur-sm rounded-xl border border-border p-5 text-center hover:border-primary/30 hover:shadow-md hover:-translate-y-1 transition-all duration-300"
              >
                <h3 className="font-semibold text-foreground mb-1">{user.title}</h3>
                <p className="text-sm text-muted-foreground">{user.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section className="py-16 sm:py-20 bg-card">
        <div className="mx-auto max-w-4xl px-4 lg:px-8">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-center mb-12">
            {benefitsTitle}
          </h2>

          <div className="grid md:grid-cols-3 gap-6">
            {benefits.map((benefit) => {
              const IconComponent = (IconMap as any)[benefit.icon] || IconMap.HelpCircle;
              return (
                <div key={benefit.title} className="bg-card/90 backdrop-blur-sm rounded-xl border border-border p-6 text-center hover:border-primary/30 hover:shadow-md hover:-translate-y-1 transition-all duration-300 group">
                  <div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-primary transition-colors">
                    <IconComponent className="h-6 w-6 text-primary group-hover:text-primary-foreground transition-colors" />
                  </div>
                  <h3 className="font-semibold text-foreground mb-2">{benefit.title}</h3>
                  <p className="text-sm text-muted-foreground">{benefit.description}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-16 sm:py-20 bg-gradient-to-r from-primary/10 via-background to-accent/10">
        <div className="mx-auto max-w-3xl px-4 lg:px-8 text-center">
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground mb-4 text-balance">
            {finalCta.title}
          </h2>
          <p className="text-muted-foreground mb-8">
            {finalCta.description}
          </p>
          <Button asChild size="lg" className="px-8">
            <Link href={resolvedCtaLink}>{finalCta.buttonText}</Link>
          </Button>
        </div>
      </section>
    </>
  )
}