"use client";

import * as React from "react";
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/components/ui/select";
import { useTranslations } from "next-intl";
import { CheckCircle, SaudiRiyal } from "lucide-react";

interface PricingPlan {
  key: string;
  title: string;
  price: string;
  features: string[];
}

export default function PlanSummary() {
  const currency = <SaudiRiyal className="h-6 h-6 inline" />;
  const t = useTranslations("subscribe");
  const tForm = useTranslations("subscribe.forms");
  const tPackages = useTranslations("pricingPackages");
  const plans: PricingPlan[] = [
    {
      key: "basic",
      title: tPackages("plans.basic.title"),
      price: "200",
      features: tPackages.raw("plans.basic.features") as string[],
    },
    {
      key: "standard",
      title: tPackages("plans.standard.title"),
      price: "500",
      features: tPackages.raw("plans.standard.features") as string[],
    },
    {
      key: "master",
      title: tPackages("plans.master.title"),
      price: "700",
      features: tPackages.raw("plans.master.features") as string[],
    },
  ];

  const [selected, setSelected] = React.useState<PricingPlan>(plans[0]);

  return (
    <div className="p-4 md:p-10 [background:var(--color-radial-gradient-white)] [box-shadow:var(--shadow-pricing-card)] rounded-[16px] space-y-5">
      <h3 className="text-text text-[24px] font-bold">{t("planSummary")}</h3>

      <div className="space-y-6">
        <div className="flex flex-col md:flex-row gap-2 p-[10px] rounded-[8px] border border-secondary-main bg-white">
          <div className="flex items-center gap-2 w-full">
            <label className="text-[18px] font-bold text-text whitespace-nowrap">
              {tForm("packageName")}
            </label>
            <Select
              onValueChange={(value: string) =>
                setSelected(plans[Number(value)])
              }
              defaultValue="0"
            >
              <SelectTrigger className="w-full max-w-[232px] border border-[#DFE3E8] color-[#5F6972]">
                <SelectValue placeholder={tForm("choosePackage")} />
              </SelectTrigger>
              <SelectContent>
                {plans.map((plan, index) => (
                  <SelectItem key={index} value={String(index)}>
                    {plan.title}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-2 shrink-0">
            <span className="text-[18px] font-bold text-text whitespace-nowrap">
              {tForm("packageValue")}
            </span>
            <strong className="text-[32px] font-bold text-text whitespace-nowrap">
              {selected.price}
              {currency}/<span className="text-[18px]">{tForm("month")}</span>
            </strong>
          </div>
        </div>
        <div className="space-y-6">
          <h4 className="text-[18px] font-bold text-text">
            {tForm("packageFeatures")}
          </h4>
          <ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {selected.features.map((feature, i) => (
              <li
                key={i}
                className="flex items-center gap-2 text-[20px] font-bold text-text"
              >
                <span className="w-6 h-6 flex items-center justify-center rounded-full text-primary-main">
                  <CheckCircle className="w-4" />
                </span>
                {feature}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}