"use client";

import { Check } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import Link from "next/link";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
interface Service {
  name: string;
  price: string;
  description?: string;
}

interface ServiceCategory {
  id: string;
  title: string;
  badge: string;
  services: Service[];
}

import React, { useState } from "react";

const Pricing = () => {
  const [showRequiredDialog, setShowRequiredDialog] = useState(false);

  const serviceCategories: ServiceCategory[] = [
    {
      id: "basic",
      title: "Basic Services",
      badge: "Essential",
      services: [
        {
          name: "Dental Consultation / Checkup",
          price: "₱500 – ₱1,500",
          description: "Basic dental examination to check overall condition of teeth and gums",
        },
        {
          name: "Oral Prophylaxis (Cleaning)",
          price: "₱1,200 – ₱3,000",
          description: "Regular teeth cleaning, recommended every 6 months",
        },
        {
          name: "Tooth X-Ray",
          price: "₱700 – ₱2,500+",
          description: "Depends on type (periapical, panoramic, etc.)",
        },
        {
          name: "Simple Tooth Extraction",
          price: "₱1,500 – ₱5,000",
          description: "Basic tooth extraction procedure",
        },
        {
          name: "Deep Cleaning / Scaling and Root Planing",
          price: "₱3,000 – ₱10,000+",
          description: "For early signs of gum disease, deeper cleaning procedure",
        },
      ],
    },
    {
      id: "fillings",
      title: "Dental Fillings",
      badge: "Restorative",
      services: [
        {
          name: "Amalgam Filling (Silver)",
          price: "₱800 – ₱2,500",
          description: "Traditional silver-colored filling material",
        },
        {
          name: "Composite Filling (Tooth-colored)",
          price: "₱1,500 – ₱4,500+",
          description: "Natural-looking tooth-colored filling",
        },
        {
          name: "Ceramic/Gold Filling",
          price: "₱5,000 – ₱15,000+",
          description: "Premium filling materials for durability",
        },
      ],
    },
    {
      id: "advanced",
      title: "Advanced Treatments",
      badge: "Popular",
      services: [
        {
          name: "Surgical/Impacted Tooth Extraction",
          price: "₱10,000 – ₱30,000+",
          description: "Complex extraction for impacted teeth",
        },
        {
          name: "Root Canal Treatment",
          price: "₱5,000 – ₱20,000+",
          description: "Treatment for infected tooth pulp, cleaned and sealed",
        },
        {
          name: "Dental Crowns (Basic - Metal or PFM)",
          price: "₱8,000 – ₱20,000+",
          description: "Cap for damaged tooth, metal or porcelain-fused-to-metal",
        },
        {
          name: "Dental Crowns (Premium - Zirconia, Emax)",
          price: "₱30,000 – ₱45,000+",
          description: "High-quality aesthetic crowns",
        },
        {
          name: "Teeth Whitening (Bleaching)",
          price: "₱9,000 – ₱30,000+",
          description: "Laser or in-clinic whitening procedure",
        },
      ],
    },
    {
      id: "replacement",
      title: "Tooth Replacement",
      badge: "Restoration",
      services: [
        {
          name: "Partial Denture",
          price: "₱10,000 – ₱30,000+",
          description: "Removable denture for missing teeth",
        },
        {
          name: "Full Denture",
          price: "Contact for pricing",
          description: "Complete denture set, depends on number of teeth",
        },
        {
          name: "Dental Bridges",
          price: "₱20,000 – ₱60,000+",
          description: "Replacement of missing teeth using adjacent teeth",
        },
        {
          name: "Dental Implants",
          price: "₱80,000 – ₱150,000+",
          description: "Permanent tooth replacement using titanium post + crown",
        },
      ],
    },
    {
      id: "cosmetic",
      title: "Cosmetic & Orthodontics",
      badge: "Premium",
      services: [
        {
          name: "Dental Veneers",
          price: "₱12,000 – ₱35,000+ per tooth",
          description: "For aesthetic purposes - straight, white, beautiful teeth",
        },
        {
          name: "Traditional Metal Braces",
          price: "₱35,000 – ₱80,000+",
          description: "Classic metal braces for teeth alignment",
        },
        {
          name: "Ceramic / Clear Braces",
          price: "₱100,000 – ₱200,000+",
          description: "Aesthetic clear or tooth-colored braces",
        },
      ],
    },
  ];

  return (
    <section className="py-32 ml-10">
      <div className="container">
        <div className="mx-auto flex max-w-7xl flex-col gap-8">
          <div className="text-center space-y-4">
            <h2 className="text-pretty text-4xl font-bold lg:text-6xl">
              Dental Services & Pricing
            </h2>
            <p className="text-muted-foreground max-w-3xl mx-auto lg:text-xl">
              Transparent pricing for all your dental needs. Quality dental care at competitive rates.
            </p>
          </div>

          <Tabs defaultValue="basic" className="w-full">
            <TabsList className="grid w-full grid-cols-2 lg:grid-cols-5 h-auto gap-2">
              {serviceCategories.map((category) => (
                <TabsTrigger
                  key={category.id}
                  value={category.id}
                  className="text-sm sm:text-base"
                >
                  {category.title}
                </TabsTrigger>
              ))}
            </TabsList>

            {serviceCategories.map((category) => (
              <TabsContent 
                key={category.id} 
                value={category.id} 
                className="mt-8 animate-in fade-in-50 slide-in-from-bottom-4 duration-500"
              >
                <Card>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-2xl lg:text-3xl">{category.title}</CardTitle>
                      <Badge className="uppercase">{category.badge}</Badge>
                    </div>
                    <CardDescription>
                      Professional dental services with transparent pricing
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {category.services.map((service, index) => (
                        <div
                          key={index}
                          className="flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-lg border hover:border-primary transition-all duration-300 hover:shadow-md gap-2 animate-in fade-in-50 slide-in-from-left-4"
                          style={{ animationDelay: `${index * 100}ms` }}
                        >
                          <div className="flex-1">
                            <div className="flex items-start gap-2">
                              <Check className="size-5 text-primary mt-1 shrink-0" />
                              <div>
                                <h3 className="font-semibold text-lg">{service.name}</h3>
                                {service.description && (
                                  <p className="text-muted-foreground text-sm mt-1">
                                    {service.description}
                                  </p>
                                )}
                              </div>
                            </div>
                          </div>
                          <div className="text-right sm:text-left sm:ml-4">
                            <span className="text-xl font-bold text-primary whitespace-nowrap">
                              {service.price}
                            </span>
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="mt-6 flex justify-center animate-in fade-in-50 zoom-in-95 duration-500 delay-300">
                      <Button
                        size="lg"
                        className="w-full sm:w-auto"
                        onClick={() => setShowRequiredDialog(true)}
                      >
                        <Link href="patient/book-appointment" className="flex items-center">
                          Book Appointment
                        </Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
       <Dialog open={showRequiredDialog} onOpenChange={setShowRequiredDialog}>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Required To Sign In & Sign Up</DialogTitle>
                  <DialogDescription>
                    Please sign in or sign up to access this content.
                  </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                  <DialogClose asChild>
                    <Button variant="outline"><Link href="/sign-in">Sign In</Link></Button>
                  </DialogClose>
                  <Button variant="default">
                    <Link href="/sign-up">Sign Up</Link>
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
    </section>
  );
};

export { Pricing };