"use client";

import type { LucideIcon } from "lucide-react";
import {
  Bell,
  Clock,
  Clock11Icon,
  Cloud,
  CloudDrizzle,
  CloudLightning,
  CloudRain,
  CloudSnow,
  CloudSun,
  Eye,
  FileInput,
  FilePlus,
  FileSearch,
  FileText,
  HardDrive,
  Key,
  LifeBuoy,
  Lock,
  Mail,
  Palette,
  Shield,
  ShieldAlert,
  ShieldCheck,
  ShieldPlus,
  ShieldQuestion,
  Star,
  UserCheck,
  UserCog,
  UserPlus,
  Users,
  VoicemailIcon,
} from "lucide-react";
import { useState } from "react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

const formatPrice = (value: string | number) =>
  `${(typeof value === "string" ? Number(value) : value).toLocaleString("fa-IR")} ریال`;

interface PricingPackage {
  id: string;
  title: string;
  monthlyPrice: number;
  annualPrice: number;
  description: string;
  features: {
    title: string;
    items: { icon: LucideIcon; text: string }[];
  }[];
  isPopular?: boolean;
}

interface Pricing28Props {
  className?: string;
}

const Pricing28 = ({ className }: Pricing28Props) => {
  const [isAnnually, setIsAnnually] = useState(false);

  const packages: PricingPackage[] = [
    {
      id: "basic",
      title: "طرح پایه",
      monthlyPrice: 790000,
      annualPrice: 630000,
      description: "۱۰ اعتبار در مجموع",
      features: [
        {
          title: "امنیت",
          items: [
            { icon: ShieldCheck, text: "امنیت استاندارد" },
            { icon: Lock, text: "رمزنگاری پایه" },
            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
          ],
        },
        {
          title: "ظاهر",
          items: [
            { icon: Palette, text: "برندسازی پایه" },
            { icon: Eye, text: "قالب ایمیل و فیلد سفارشی پایه ظاهر" },
          ],
        },
        {
          title: "ذخیره‌سازی",
          items: [
            { icon: HardDrive, text: "۵ گیگابایت فضای ذخیره" },
            { icon: FileText, text: "نسخه‌بندی فایل" },
          ],
        },
        {
          title: "پشتیبانی",
          items: [
            { icon: Mail, text: "فقط پشتیبانی ایمیل" },
            { icon: Clock, text: "ثبت زمان پایه" },
          ],
        },
        {
          title: "همکاری",
          items: [
            { icon: Users, text: "تا ۳ کاربر" },
            { icon: UserPlus, text: "همکاری پایه تیمی" },
          ],
        },
      ],
    },
    {
      id: "pro",
      title: "طرح حرفه‌ای",
      monthlyPrice: 299000,
      annualPrice: 239000,
      description: "۵۰ اعتبار در مجموع",
      features: [
        {
          title: "امنیت",
          items: [
            { icon: ShieldPlus, text: "امنیت پیشرفته" },
            { icon: Shield, text: "رمزنگاری پیشرفته" },
            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
          ],
        },
        {
          title: "ظاهر",
          items: [
            { icon: Palette, text: "برندسازی سفارشی" },
            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
            { icon: Star, text: "تم‌های سفارشی" },
          ],
        },
        {
          title: "ذخیره‌سازی",
          items: [
            { icon: HardDrive, text: "۵۰ گیگابایت فضای ذخیره" },
            { icon: FilePlus, text: "نسخه‌بندی فایل" },
            { icon: Cloud, text: "پشتیبان‌گیری و بازیابی" },
          ],
        },
        {
          title: "پشتیبانی",
          items: [
            { icon: Bell, text: "پشتیبانی اولویت‌دار" },
            { icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
            { icon: Mail, text: "پشتیبانی ایمیل و چت" },
          ],
        },
        {
          title: "همکاری",
          items: [
            { icon: Users, text: "عضو نامحدود فضای کاری" },
            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
          ],
        },
      ],
    },
    {
      id: "business",
      title: "طرح تجاری",
      monthlyPrice: 599000,
      annualPrice: 479000,
      description: "۱۰۰ اعتبار در مجموع",
      features: [
        {
          title: "امنیت",
          items: [
            { icon: ShieldPlus, text: "امنیت پیشرفته" },
            { icon: ShieldCheck, text: "رمزنگاری در سطح سازمانی" },
            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
            { icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
          ],
        },
        {
          title: "ظاهر",
          items: [
            { icon: Palette, text: "برندسازی سفارشی" },
            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
            { icon: Star, text: "تم‌های سفارشی" },
            { icon: Star, text: "برچسب سفید" },
          ],
        },
        {
          title: "ذخیره‌سازی",
          items: [
            { icon: HardDrive, text: "۵۰۰ گیگابایت فضای ذخیره" },
            { icon: FileSearch, text: "نسخه‌بندی فایل" },
            { icon: CloudRain, text: "پشتیبان‌گیری و بازیابی" },
            { icon: CloudSnow, text: "آپلود فایل نامحدود" },
          ],
        },
        {
          title: "پشتیبانی",
          items: [
            { icon: Bell, text: "پشتیبانی اولویت‌دار" },
            { icon: Clock, text: "پشتیبانی اولویت‌دار ۲۴/۷" },
            { icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
            { icon: Star, text: "مدیر موفقیت مشتری اختصاصی" },
          ],
        },
        {
          title: "همکاری",
          items: [
            { icon: Users, text: "اعضای تیم نامحدود" },
            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
            { icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
          ],
        },
      ],
      isPopular: true,
    },
    {
      id: "enterprise",
      title: "طرح سازمانی",
      monthlyPrice: 1199000,
      annualPrice: 959000,
      description: "اعتبار نامحدود",
      features: [
        {
          title: "امنیت",
          items: [
            { icon: ShieldPlus, text: "امنیت در سطح سازمانی" },
            { icon: ShieldCheck, text: "رمزنگاری پیشرفته" },
            { icon: Key, text: "احراز هویت دو مرحله‌ای" },
            { icon: ShieldAlert, text: "جلوگیری از از دست رفتن داده" },
            { icon: LifeBuoy, text: "تیم امنیتی اختصاصی" },
            { icon: ShieldQuestion, text: "گواهی‌های انطباق" },
          ],
        },
        {
          title: "ظاهر",
          items: [
            { icon: Palette, text: "برندسازی سفارشی" },
            { icon: Eye, text: "شخصی‌سازی پیشرفته ظاهر" },
            { icon: Star, text: "تم‌های سفارشی" },
            { icon: Star, text: "برچسب سفید" },
            { icon: Star, text: "انیمیشن‌های سفارشی" },
          ],
        },
        {
          title: "ذخیره‌سازی",
          items: [
            { icon: HardDrive, text: "۱ ترابایت فضای ذخیره" },
            { icon: FileInput, text: "نسخه‌بندی فایل" },
            { icon: CloudLightning, text: "پشتیبان‌گیری و بازیابی" },
            { icon: CloudDrizzle, text: "آپلود فایل نامحدود" },
            { icon: CloudSun, text: "راهکار ذخیره‌سازی سفارشی" },
          ],
        },
        {
          title: "پشتیبانی",
          items: [
            { icon: Bell, text: "پشتیبانی پریمیوم ۲۴/۷" },
            { icon: Clock, text: "مدیر موفقیت مشتری اختصاصی" },
            { icon: Mail, text: "پشتیبانی ایمیل، چت و تلفن" },
            { icon: Star, text: "توافق‌نامه SLA سفارشی" },
          ],
        },
        {
          title: "همکاری",
          items: [
            { icon: Users, text: "عضو نامحدود فضای کاری" },
            { icon: UserCheck, text: "همکاری پیشرفته تیمی" },
            { icon: UserCog, text: "کنترل دسترسی مبتنی بر نقش" },
            { icon: Clock11Icon, text: "گردش‌کارهای سفارشی" },
            { icon: VoicemailIcon, text: "یکپارچه‌سازی نامحدود" },
          ],
        },
      ],
    },
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl text-center">
          <h2 className="mb-4 text-xl font-semibold lg:text-2xll">
            طرح مناسب خود را انتخاب کنید
          </h2>
        </div>

        <div className="mx-auto mb-12 flex max-w-3xl items-center justify-center gap-4">
          <div className="relative me-2 flex items-center">
            <Avatar className="size-8 border border-primary">
              <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
              <AvatarFallback>U1</AvatarFallback>
            </Avatar>
            <Avatar className="absolute start-6 size-8 border border-primary">
              <AvatarImage src="/block-media/shadcnblocks/block/avatar-2.webp" />
              <AvatarFallback>U2</AvatarFallback>
            </Avatar>
            <Avatar className="absolute start-12 size-8 border border-primary">
              <AvatarImage src="/block-media/shadcnblocks/block/avatar-3.webp" />
              <AvatarFallback>U3</AvatarFallback>
            </Avatar>
          </div>

          <div className="ms-8 flex items-center gap-4">
            <span className="text-sm font-medium">
              بیش از ۵۰ هزار توسعه‌دهنده به ما اعتماد دارند
            </span>
            <div className="h-8 w-px bg-border" />
            <span className="text-sm font-medium">
              لغو در هر زمان، بدون دردسر
            </span>
          </div>
        </div>

        <div className="flex flex-col items-center gap-2">
          <span className="text-muted-foreground">دوره صورتحساب</span>
          <div className="inline-flex items-center rounded-full bg-muted p-1">
            <RadioGroup
              defaultValue="monthly"
              className="grid h-auto w-auto grid-cols-2 gap-0"
              onValueChange={(value) => {
                setIsAnnually(value === "annually");
              }}
            >
              <div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
                <RadioGroupItem
                  value="monthly"
                  id="monthly"
                  className="peer sr-only"
                />
                <Label
                  htmlFor="monthly"
                  className="flex h-11 cursor-pointer items-center justify-center whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
                >
                  ماهانه
                </Label>
              </div>
              <div className='rounded-full transition-all has-[button[data-state="checked"]]:bg-background'>
                <RadioGroupItem
                  value="annually"
                  id="annually"
                  className="peer sr-only"
                />
                <Label
                  htmlFor="annually"
                  className="flex h-11 cursor-pointer items-center justify-center gap-2 whitespace-nowrap px-6 text-base font-semibold text-muted-foreground peer-data-[state=checked]:text-primary"
                >
                  <span>سالانه</span>
                  <Badge
                    variant="outline"
                    className="shrink-0 bg-primary px-1.5 text-xs text-secondary"
                  >
                    ۲۰٪-
                  </Badge>
                </Label>
              </div>
            </RadioGroup>
          </div>
        </div>

        <div className="mt-10 grid gap-2 md:grid-cols-2 lg:grid-cols-4">
          {packages.map((pkg) => (
            <div key={pkg.id} className="rounded-2xl border p-6">
              <div className="flex h-full flex-col justify-between gap-5">
                <div>
                  <div className="mb-4 flex items-center justify-between">
                    <h3 className="text-xl">{pkg.title}</h3>
                    {pkg.isPopular && <Badge>محبوب</Badge>}
                  </div>
                  <div className="mb-2 flex items-center gap-2">
                    <span className="text-2xll font-semibold">
                      {formatPrice(
                        isAnnually ? pkg.annualPrice : pkg.monthlyPrice,
                      )}
                    </span>
                    <span className="text-muted-foreground">
                      {isAnnually ? "در ماه، صورتحساب سالانه" : "در ماه"}
                    </span>
                  </div>
                  <TooltipProvider delayDuration={100}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <span className="cursor-pointer border-b border-dashed border-muted-foreground">
                          {pkg.description}
                        </span>
                      </TooltipTrigger>
                      <TooltipContent className="">
                        اعتبارها برای امکانات و خدمات پریمیوم قابل استفاده
                        هستند.
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                  <Button className="mt-6 w-full rounded-full">
                    {pkg.id === "enterprise"
                      ? "گفتگو با فروش"
                      : `دریافت ${pkg.title}`}
                  </Button>
                  <div className="mt-6">
                    {pkg.features.map((feature, i) => (
                      <div key={i} className="mb-6">
                        <h4 className="mb-3 text-sm font-medium text-muted-foreground">
                          {feature.title}
                        </h4>
                        <ul className="flex flex-col gap-3">
                          {feature.items.map((item, j) => (
                            <li key={j} className="flex gap-2">
                              <item.icon className="mt-1 size-4 shrink-0 text-primary" />
                              {item.text}
                            </li>
                          ))}
                        </ul>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-8 flex items-center justify-center text-muted-foreground">
          <Lock className="size-4" />
          <span className="ms-2 text-sm">
            پرداخت امن. قدرت گرفته از{" "}
            <a href="https://ShadcnBlocks" className="underline">
              نوافروش
            </a>
          </span>
        </div>
      </div>
    </section>
  );
};

export { Pricing28 };