import { Plus } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface DataItem {
  title: string;
  value: string;
  description: string;
}

const DATA: DataItem[] = [
  {
    title: "خرید و تأمین",
    value: "یکپارچگی",
    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
  },
  {
    title: "فاکتور و پرداخت",
    value: "ERP",
    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
  },
  {
    title: "ERP",
    value: "۹۵",
    description: "ERP",
  },
];

interface StatCardProps {
  title: string;
  value: string | number;
  description: string;
  className?: string;
}

const StatCard = ({ title, value, description, className }: StatCardProps) => {
  return (
    <div className={cn("flex max-w-52 flex-col gap-4 text-start", className)}>
      <span className="font-medium">{title}</span>
      <div className="text-2xll font-bold">
        {value}
        <span className="text-muted-foreground">+</span>
      </div>
      <p className="text-pretty text-muted-foreground">{description}</p>
    </div>
  );
};

interface Feature183Props {
  className?: string;
}

const Feature183 = ({ className }: Feature183Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="w-full shrink-0">
          <div className="relative mx-auto h-96 w-full rounded-3xl bg-muted bg-cover bg-center bg-no-repeat sm:h-96">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="100%"
              height="100%"
              viewBox="0 0 4200 1080"
              fill="none"
              className="absolute inset-0 z-0 mask-[linear-gradient(to_bottom,transparent,white,transparent,transparent)] opacity-50"
              aria-hidden="true"
            >
              <g clipPath="url(#clip0_4_5)">
                <rect width="100%" height="1080" fill="none" />
                {Array.from({ length: 5 }).map((_, index) => (
                  <line
                    key={`horizontal-${index}`}
                    y1={(index + 1) * 200 - 0.5}
                    x2="100%"
                    y2={(index + 1) * 200 - 0.5}
                    className="stroke-muted-foreground"
                    strokeWidth="1"
                  />
                ))}
                {Array.from({ length: 4000 }).map((_, index) => (
                  <line
                    key={`vertical-${index}`}
                    x1={(index + 1) * 200 - 0.5}
                    y1="0"
                    x2={(index + 1) * 200 - 0.5}
                    y2="1080"
                    className="stroke-muted-foreground"
                    strokeWidth="1"
                  />
                ))}
              </g>
              <defs>
                <clipPath id="clip0_4_5">
                  <rect width="100%" height="1080" fill="white" />
                </clipPath>
              </defs>
            </svg>

            <div className="absolute -top-32 start-1/2 bottom-0 z-10 mt-12 w-[12.5rem] -translate-x-1/2 transform overflow-hidden sm:w-[18.75rem]">
              <img
                src="/block-media/shadcnblocks/block/hero108/iphone.png"
                alt="گزارش مالی یکپارچه"
                className="absolute top-0 z-20 block w-full"
              />
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
                alt="داشبورد ERP"
                className="absolute top-0 block w-full rounded-[50px]"
              />
            </div>

            <div className="absolute top-12 end-1/4 z-20 hidden w-60 transform rounded-2xl border bg-background p-4 text-start shadow-md md:-rotate-12 lg:block">
              <div className="flex flex-row">
                <h3 className="text-lg font-semibold">گردش تأیید</h3>
                <Badge variant="secondary" className="ms-auto rounded-sm">
                  ERP
                </Badge>
              </div>
              <div className="mt-4">
                <p className="text-sm text-pretty text-muted-foreground">
                  گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
                </p>
              </div>
            </div>

            <div className="absolute top-12 start-1/4 z-20 hidden w-60 transform rounded-lg border bg-background p-4 text-start shadow-md lg:block">
              <div className="flex flex-row border-b pb-4">
                <h3 className="text-lg font-semibold">ERP</h3>
                <div className="relative ms-auto">
                  <Badge variant="secondary" className="rounded-sm px-1">
                    <Plus className="size-4" />
                  </Badge>
                </div>
              </div>
              <div className="mt-4 flex flex-col gap-4">
                <Select>
                  <SelectTrigger className="w-full">
                    <SelectValue placeholder="عملیات" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="category1">ERP</SelectItem>
                    <SelectItem value="category2">ERP</SelectItem>
                    <SelectItem value="category3">ERP</SelectItem>
                  </SelectContent>
                </Select>
                <div className="flex flex-col gap-2">
                  <Select>
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="ERP" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sm">ERP</SelectItem>
                      <SelectItem value="md">ERP</SelectItem>
                      <SelectItem value="xl">مدیریت سازمان</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-14 flex flex-col items-center justify-center gap-x-24 gap-y-8 lg:flex-row">
          {DATA.map((item) => (
            <StatCard key={item.title} {...item} />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature183 };