"use client";

import { CheckIcon, Info, MinusIcon } from "lucide-react";
import { Fragment, useState } from "react";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Switch } from "@/components/ui/switch";
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")} ریال`;

type TierName = "Free" | "Pro" | "Premium";

interface Tier {
  id: TierName;
  name: string;
  monthlyPrice: number;
  annualPrice: number;
  description: string;
}

interface Feature {
  name: string;
  tiers: Partial<Record<TierName, boolean>>;
  tooltip?: string;
}

interface Section {
  name: string;
  features: Feature[];
}

const tiers: Tier[] = [
  {
    id: "Free",
    name: "رایگان",
    monthlyPrice: 0,
    annualPrice: 0,
    description: "مناسب شروع و آشنایی با پلتفرم.",
  },
  {
    id: "Pro",
    name: "حرفه‌ای",
    monthlyPrice: 100000,
    annualPrice: 100000,
    description: "برای تیم‌های کوچک و کسب‌وکارهای در حال رشد.",
  },
  {
    id: "Premium",
    name: "پریمیوم",
    monthlyPrice: 150000,
    annualPrice: 150000,
    description: "برای سازمان‌هایی با نیازهای پیشرفته.",
  },
];

const sections: Section[] = [
  {
    name: "امکانات کلیدی",
    features: [
      {
        name: "هم‌زمانی تیم فروش روی یک قیف",
        tiers: { Free: true, Pro: true, Premium: true },
        tooltip: "همکاری همزمان تیمی روی پروژه‌ها",
      },
      {
        name: "پروژه‌های نامحدود",
        tiers: { Free: true, Pro: true, Premium: true },
        tooltip: "بدون محدودیت در تعداد پروژه‌ها",
      },
      {
        name: "دسترسی‌های سفارشی",
        tiers: { Pro: true, Premium: true },
        tooltip: "تعیین سطح دسترسی برای هر عضو تیم",
      },
      {
        name: "اعضای تیم",
        tiers: {
          Premium: true,
        },
        tooltip: "مدیریت اعضای تیم در سطح سازمانی",
      },
    ],
  },
  {
    name: "گزارش‌دهی",
    features: [
      {
        name: "گزارش‌های پایه",
        tiers: { Free: true, Pro: true, Premium: true },
        tooltip: "گزارش‌های ضروری عملکرد و فعالیت",
      },
      {
        name: "گزارش‌های پیشرفته",
        tiers: { Pro: true, Premium: true },
        tooltip: "تحلیل عمیق‌تر با فیلترها و نمودارها",
      },
      {
        name: "گزارش‌های سفارشی فروش",
        tiers: { Premium: true },
        tooltip: "ساخت گزارش متناسب با نیاز سازمان",
      },
      {
        name: "خروجی گرفتن از داده",
        tiers: { Premium: true },
        tooltip: "دریافت خروجی داده در قالب‌های مختلف",
      },
    ],
  },
];

interface Pricing9Props {
  className?: string;
}

const Pricing9 = ({ className }: Pricing9Props) => {
  const [isAnnual, setIsAnnual] = useState(false);
  return (
    <section className={cn("py-24 sm:py-32", className)}>
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-4xl text-center">
          <p className="mt-2 text-xl font-bold tracking-tight sm:text-2xll">
            طرح خود را انتخاب کنید
          </p>
        </div>
        <p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-muted-foreground">
          طرحی را انتخاب کنید که با نیازهای تیم و کسب‌وکار شما هماهنگ باشد.
        </p>
        <div className="mt-10 flex flex-col items-center gap-2 lg:hidden">
          <span className="flex items-center gap-3 text-base font-medium">
            سالانه
            <Switch
              checked={isAnnual}
              onCheckedChange={() => setIsAnnual(!isAnnual)}
            />
            ماهانه
          </span>
        </div>

        <div className="mx-auto mt-12 max-w-md space-y-8 sm:mt-16 lg:hidden">
          {tiers.map((tier) => (
            <Card key={tier.id} className="p-8">
              <CardHeader className="p-0">
                <div className="flex flex-col gap-2 text-center">
                  <span className="text-xl leading-7 font-bold uppercase">
                    <CardTitle className="text-xl">{tier.name}</CardTitle>
                  </span>
                  <span className="text-sm font-normal text-muted-foreground">
                    {tier.description}
                  </span>
                </div>
                <div className="flex flex-col justify-center gap-x-1 pt-8 text-center">
                  <span className="text-xl font-bold">
                    {formatPrice(
                      isAnnual ? tier.annualPrice : tier.monthlyPrice,
                    )}
                  </span>
                  <span className="text-sm leading-6 text-muted-foreground">
                    در ماه
                  </span>
                </div>
              </CardHeader>
              <Button className="mt-8 w-full">خرید طرح</Button>
              <CardContent className="p-0">
                <ul className="mt-10 space-y-4 text-sm leading-6">
                  <TooltipProvider>
                    {sections.map((section) => (
                      <li key={section.name}>
                        <ul role="list" className="space-y-4">
                          {section.features.map(
                            (feature) =>
                              feature.tiers[tier.id] && (
                                <li
                                  key={feature.name}
                                  className="flex items-center justify-between"
                                >
                                  <span className="flex items-center gap-3">
                                    <CheckIcon className="h-5 w-5 flex-none" />
                                    <span>{feature.name}</span>
                                  </span>
                                  <Tooltip>
                                    <TooltipTrigger>
                                      <Info className="me-1 h-4 w-4 text-muted-foreground" />
                                    </TooltipTrigger>
                                    <TooltipContent>
                                      {feature.tooltip}
                                    </TooltipContent>
                                  </Tooltip>
                                </li>
                              ),
                          )}
                        </ul>
                      </li>
                    ))}
                  </TooltipProvider>
                </ul>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="isolate mt-20 hidden lg:block">
          <div className="relative -mx-8">
            {tiers.map((tier, idx) => (
              <div
                className="absolute inset-x-4 inset-y-0 -z-10 flex"
                key={tier.id}
              >
                <div
                  className="flex w-1/4 px-4"
                  style={{
                    marginInlineStart: `${(idx + 1) * 25}%`,
                  }}
                >
                  <div className="w-full border-s border-e" />
                </div>
              </div>
            ))}
            <table className="w-full table-fixed border-separate border-spacing-x-8 text-start">
              <thead>
                <tr>
                  <td />
                  {tiers.map((tier) => (
                    <th key={tier.id} className="px-6 pt-6 xl:px-8 xl:pt-8">
                      <div className="flex flex-col gap-2 text-center">
                        <span className="text-xl leading-7 font-bold uppercase">
                          {tier.name}
                        </span>
                        <span className="text-sm font-normal text-muted-foreground">
                          {tier.description}
                        </span>
                      </div>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th>
                    <div className="flex flex-col gap-2">
                      <p className="text-sm font-normal text-muted-foreground">
                        صورتحساب
                      </p>
                      <span className="flex items-center gap-3 text-base font-medium">
                        سالانه
                        <Switch
                          checked={isAnnual}
                          onCheckedChange={() => setIsAnnual(!isAnnual)}
                        />
                        ماهانه
                      </span>
                    </div>
                  </th>
                  {tiers.map((tier) => (
                    <td key={tier.id} className="px-6 pt-10 xl:px-8">
                      <div className="flex flex-col justify-center gap-x-1 text-center">
                        <span className="text-xl font-bold">
                          {formatPrice(
                            isAnnual ? tier.annualPrice : tier.monthlyPrice,
                          )}
                        </span>
                        <span className="text-sm leading-6 text-muted-foreground">
                          در ماه
                        </span>
                      </div>
                      <Button className="mt-8 w-full">شروع رایگان</Button>
                    </td>
                  ))}
                </tr>
                {sections.map((section, sectionIdx) => (
                  <Fragment key={section.name}>
                    <tr>
                      <th
                        className={cn(
                          "pb-4 text-sm leading-6 font-semibold",
                          sectionIdx === 0 ? "pt-8" : "pt-16",
                        )}
                      >
                        {section.name}
                      </th>
                    </tr>
                    <TooltipProvider delayDuration={200}>
                      {section.features.map((feature) => (
                        <tr key={feature.name}>
                          <th className="flex items-center justify-between py-4 text-sm leading-6 font-normal">
                            {feature.name}
                            <Tooltip>
                              <TooltipTrigger>
                                <Info className="me-1 h-4 w-4 text-muted-foreground hover:text-foreground" />
                              </TooltipTrigger>
                              <TooltipContent>{feature.tooltip}</TooltipContent>
                            </Tooltip>
                          </th>
                          {tiers.map((tier) => (
                            <td key={tier.id} className="px-6 py-4 xl:px-8">
                              <>
                                {feature.tiers[tier.id] ? (
                                  <CheckIcon className="mx-auto h-5 w-5" />
                                ) : (
                                  <MinusIcon className="mx-auto h-5 w-5 text-muted-foreground" />
                                )}
                              </>
                            </td>
                          ))}
                        </tr>
                      ))}
                    </TooltipProvider>
                  </Fragment>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
};
export { Pricing9 };