"use client";

import { CheckCircle2, Zap } from "lucide-react";
import { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

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

interface Pricing16Props {
  className?: string;
}

const Pricing16 = ({ className }: Pricing16Props) => {
  const [isMonthly, setIsMonthly] = useState(true);

  return (
    <section className={cn("bg-muted/50 py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6">
          <Badge variant="outline">تعرفه‌ها</Badge>
          <h1 className="text-center text-xl font-semibold text-balance sm:text-2xll lg:text-2xll">
            قیمت‌گذاری ساده برای همه؛ همین امروز رایگان شروع رایگان
          </h1>
          <Tabs
            value={isMonthly ? "monthly" : "yearly"}
            onValueChange={(value) => setIsMonthly(value === "monthly")}
            className="w-80"
          >
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="monthly">صورتحساب ماهانه</TabsTrigger>
              <TabsTrigger value="yearly">صورتحساب سالانه</TabsTrigger>
            </TabsList>
          </Tabs>
          <div className="mx-auto mt-4 grid w-full max-w-5xl gap-6 lg:grid-cols-3">
            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
              <div className="flex flex-col gap-1">
                <h3 className="text-xl font-semibold">رایگان</h3>
                <p className="text-sm text-muted-foreground">رایگان برای همیشه</p>
              </div>
              <Separator className="my-6" />
              <div className="font-semibold">
                <p className="text-2xll leading-none">{formatPrice(0)}</p>
              </div>
              <p className="text-sm text-muted-foreground">
                به ازای هر کاربر در ماه، صورتحساب{" "}
                {isMonthly ? "ماهانه" : "سالانه"}
              </p>
              <Button variant="outline" className="mt-4 mb-2 w-full">
                رایگان شروع رایگان
              </Button>
              <p className="text-center text-sm text-muted-foreground">
                نیاز به کارت اعتباری نیست
              </p>
              <Separator className="my-6" />
              <div>
                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
                <ul className="flex flex-col gap-2">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>تا ۵ پروژه</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>تا ۵ کاربر</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>تا ۵۰ وظیفه</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>مدیریت وظایف</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>تحلیل‌ها و گزارش‌ها</p>
                  </li>
                </ul>
              </div>
            </div>
            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
              <div className="flex flex-col gap-1">
                <div className="flex items-center gap-2">
                  <h3 className="text-xl font-semibold">شروع</h3>
                  <Badge className="flex items-center gap-1">
                    <Zap className="size-3" />
                    محبوب
                  </Badge>
                </div>
                <p className="text-sm text-muted-foreground">
                  برای تیم‌های کوچک و استارتاپ‌ها
                </p>
              </div>
              <Separator className="my-6" />
              <div className="flex items-center gap-2">
                <div className="font-semibold">
                  <p className="text-2xll leading-none">
                    {formatPrice(isMonthly ? 20 : 15)}
                  </p>
                </div>
                {!isMonthly && (
                  <div className="flex flex-col text-sm">
                    <p className="font-semibold text-destructive">۲۵٪ تخفیف</p>
                    <p className="text-muted-foreground line-through">
                      {formatPrice(200000)}
                    </p>
                  </div>
                )}
              </div>
              <p className="text-sm text-muted-foreground">
                به ازای هر کاربر در ماه، صورتحساب{" "}
                {isMonthly ? "ماهانه" : "سالانه"}
              </p>
              <Button className="mt-4 mb-2 w-full">۱۴ روز رایگان امتحان کنید</Button>
              <p className="text-center text-sm text-muted-foreground">
                نیاز به کارت اعتباری نیست
              </p>
              <Separator className="my-6" />
              <div>
                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
                <ul className="flex flex-col gap-2">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>پروژه‌های نامحدود</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>عضو نامحدود فضای کاری</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>وظایف نامحدود</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>فضای ذخیره فایل</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>گردش‌کارهای قابل شخصی‌سازی</p>
                  </li>
                </ul>
              </div>
            </div>
            <div className="w-full rounded-lg border bg-background p-8 shadow-sm lg:max-w-96">
              <div className="flex flex-col gap-1">
                <h3 className="text-xl font-semibold">سازمانی</h3>
                <p className="text-sm text-muted-foreground">
                  برای تیم‌های بزرگ و سازمان‌ها
                </p>
              </div>
              <Separator className="my-6" />
              <div className="flex items-center gap-2">
                <div className="font-semibold">
                  <p className="text-2xll leading-none">
                    {formatPrice(isMonthly ? 40 : 30)}
                  </p>
                </div>
                {!isMonthly && (
                  <div className="flex flex-col text-sm">
                    <p className="font-semibold text-destructive">۲۵٪ تخفیف</p>
                    <p className="text-muted-foreground line-through">
                      {formatPrice(400000)}
                    </p>
                  </div>
                )}
              </div>
              <p className="text-sm text-muted-foreground">
                به ازای هر کاربر در ماه، صورتحساب{" "}
                {isMonthly ? "ماهانه" : "سالانه"}
              </p>
              <Button variant="outline" className="mt-4 mb-2 w-full">
                ۱۴ روز رایگان امتحان کنید
              </Button>
              <p className="text-center text-sm text-muted-foreground">
                نیاز به کارت اعتباری نیست
              </p>
              <Separator className="my-6" />
              <div>
                <p className="mb-3 text-sm font-semibold">امکانات کلیدی:</p>
                <ul className="flex flex-col gap-2">
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>یکپارچه‌سازی نامحدود</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>بازخورد خودکار</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>دسترسی اتصال هوشمند</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>احراز هویت احراز هویت سازمانی</p>
                  </li>
                  <li className="flex items-center gap-2">
                    <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-700" />
                    <p>پشتیبانی اختصاصی</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Pricing16 };