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 w-full min-w-0 max-w-md flex-col gap-3 text-start sm:max-w-52 sm:gap-4",
        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>
  );
};

function FeatureCard({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "w-full min-w-0 rounded-2xl border bg-background p-4 text-start shadow-md",
        className,
      )}
    >
      <div className="flex min-w-0 flex-row items-start gap-2">
        <h3 className="min-w-0 text-base font-semibold text-pretty sm:text-lg">
          گردش تأیید
        </h3>
        <Badge variant="secondary" className="ms-auto shrink-0 rounded-sm">
          ERP
        </Badge>
      </div>
      <div className="mt-4">
        <p className="text-sm text-pretty text-muted-foreground">
          گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
        </p>
      </div>
    </div>
  );
}

const selectItemClassName =
  "ps-8 pe-1.5 text-right [&_span.absolute]:right-auto [&_span.absolute]:left-2";

function ProductCard({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "w-full min-w-0 rounded-lg border bg-background p-4 text-start shadow-md",
        className,
      )}
    >
      <div className="flex flex-row border-b pb-4">
        <h3 className="text-base font-semibold sm:text-lg">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 dir="rtl">
          <SelectTrigger className="w-full justify-between text-right">
            <SelectValue placeholder="عملیات" />
          </SelectTrigger>
          <SelectContent dir="rtl" align="end" className="text-right">
            <SelectItem value="category1" className={selectItemClassName}>
              ERP
            </SelectItem>
            <SelectItem value="category2" className={selectItemClassName}>
              ERP
            </SelectItem>
            <SelectItem value="category3" className={selectItemClassName}>
              ERP
            </SelectItem>
          </SelectContent>
        </Select>
        <Select dir="rtl">
          <SelectTrigger className="w-full justify-between text-right">
            <SelectValue placeholder="ERP" />
          </SelectTrigger>
          <SelectContent dir="rtl" align="end" className="text-right">
            <SelectItem value="sm" className={selectItemClassName}>
              ERP
            </SelectItem>
            <SelectItem value="md" className={selectItemClassName}>
              ERP
            </SelectItem>
            <SelectItem value="xl" className={selectItemClassName}>
              مدیریت سازمان
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

interface Feature183Props {
  className?: string;
}

const Feature183 = ({ className }: Feature183Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "w-full min-w-0 max-w-full overflow-x-clip pb-16 sm:pb-24 lg:pb-32",
        className,
      )}
    >
      <div className="container min-w-0 px-4 sm:px-6">
        <div className="w-full min-w-0 pt-16 sm:pt-24 lg:pt-32">
          <div className="relative mx-auto h-[22rem] w-full min-w-0 overflow-hidden rounded-3xl bg-muted bg-cover bg-center bg-no-repeat sm:h-[26rem] lg:h-96">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="100%"
              height="100%"
              viewBox="0 0 4200 1080"
              fill="none"
              preserveAspectRatio="xMidYMid slice"
              className="absolute inset-0 z-0 mask-[linear-gradient(to_bottom,transparent,white,transparent,transparent)] opacity-50"
              aria-hidden="true"
            >
              <g clipPath="url(#clip0_feature183)">
                <rect width="4200" height="1080" fill="none" />
                {Array.from({ length: 5 }).map((_, index) => (
                  <line
                    key={`horizontal-${index}`}
                    y1={(index + 1) * 200 - 0.5}
                    x2="4200"
                    y2={(index + 1) * 200 - 0.5}
                    className="stroke-muted-foreground"
                    strokeWidth="1"
                  />
                ))}
                {Array.from({ length: 21 }).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_feature183">
                  <rect width="4200" height="1080" fill="white" />
                </clipPath>
              </defs>
            </svg>

            <div className="absolute top-6 left-1/2 z-10 w-[9.5rem] max-w-[calc(100%-2rem)] -translate-x-1/2 overflow-hidden sm:top-8 sm:w-[14rem] lg:-top-28 lg:w-[18.75rem]">
              <img
                src="/block-media/shadcnblocks/block/hero108/iphone.png"
                alt="گزارش مالی یکپارچه"
                className="relative z-20 block h-auto w-full"
              />
              <img
                src="/block-media/shadcnblocks/block/placeholder-dark-7-tall.svg"
                alt="داشبورد ERP"
                className="absolute top-0 left-0 block w-full rounded-[2rem] sm:rounded-[40px] lg:rounded-[50px]"
              />
            </div>

            <div className="absolute top-10 end-[max(0.75rem,8%)] z-20 hidden w-56 max-w-[min(14rem,38%)] -rotate-6 transform lg:block lg:w-60 lg:max-w-[min(15rem,42%)] lg:-rotate-12">
              <FeatureCard />
            </div>

            <div className="absolute top-10 start-[max(0.75rem,8%)] z-20 hidden w-56 max-w-[min(14rem,38%)] transform lg:block lg:w-60 lg:max-w-[min(15rem,42%)]">
              <ProductCard />
            </div>
          </div>

          <div className="mt-6 grid grid-cols-1 gap-4 sm:mt-8 sm:grid-cols-2 lg:hidden">
            <FeatureCard />
            <ProductCard />
          </div>
        </div>

        <div className="mt-10 grid min-w-0 grid-cols-1 justify-items-stretch gap-8 sm:mt-14 sm:grid-cols-3 sm:justify-items-center lg:gap-x-16">
          {DATA.map((item) => (
            <StatCard key={item.title} {...item} className="sm:mx-auto" />
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature183 };