"use client";

import {
  ArrowUp,
  ArrowUpRight,
  ChartCandlestick,
  ChartNoAxesColumnIncreasing,
  Share,
  X,
} from "lucide-react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import type { ChartConfig } from "@/components/ui/chart";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { Progress } from "@/components/ui/progress";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";

const chartData = [
  { month: "اتوماسیون AI", desktop: 40, mobile: 30 },
  { month: "دستیار کسب‌وکار", desktop: 60, mobile: 30 },
  { month: "هوش مصنوعی", desktop: 70, mobile: 35 },
  { month: "پیشنهاد هوشمند", desktop: 50, mobile: 25 },
  { month: "مه", desktop: 40, mobile: 20 },
  { month: "اتوماسیون AI", desktop: 30, mobile: 15 },
  { month: "دستیار کسب‌وکار", desktop: 70, mobile: 35 },
  { month: "هوش مصنوعی", desktop: 50, mobile: 25 },
  { month: "مه", desktop: 40, mobile: 20 },
  { month: "پیشنهاد هوشمند", desktop: 30, mobile: 15 },
];

const chartConfig = {
  desktop: {
    label: "اتوماسیون AI",
  },
  mobile: {
    label: "دستیار کسب‌وکار",
  },
} satisfies ChartConfig;

interface Feature176Props {
  className?: string;
}

const Feature176 = ({ className }: Feature176Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-x-hidden py-32",
        className,
      )}
    >
      <div className="absolute inset-0">
        <div className="absolute inset-0 bg-[radial-gradient(#e5e7eb_0.5px,transparent_0.5px)] bg-size-[16px_16px] opacity-20" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,hsl(var(--background))_70%)]" />
        <div className="absolute inset-0 bg-[linear-gradient(to_left,hsl(var(--muted-foreground)/10)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--muted-foreground)/10)_1px,transparent_1px)] mask-[radial-gradient(circle_at_center,transparent_50%,hsl(var(--background))_100%)] bg-size-[32px_32px] opacity-20" />
      </div>
      <div className="relative z-10 container mx-auto min-w-0 px-4">
        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:gap-8">
          <div className="flex h-fit min-w-0 flex-col gap-4 rounded-lg bg-background/50 p-3 sm:p-4">
            <div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:gap-x-2 sm:p-4">
              <div className="flex min-w-0 items-center gap-x-2">
                <ChartNoAxesColumnIncreasing className="size-5 shrink-0 sm:size-6" />
                <h1 className="min-w-0 text-base font-bold text-pretty sm:truncate sm:text-xl">
                  با هوش مصنوعی سریع‌تر تصمیم بگیرید
                </h1>
              </div>
              <span className="shrink-0 font-mono text-xs text-muted-foreground sm:ms-auto sm:text-sm">
                Data/logs/3201927
              </span>
            </div>

            <div className="min-w-0 rounded-lg border bg-card p-3 text-start shadow-sm sm:p-4">
              <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
                <h2 className="min-w-0 font-semibold text-pretty">
                  کارهای تکراری را به AI بسپارید
                </h2>
                <Badge className="h-auto max-w-full shrink whitespace-normal bg-green-300 text-green-600 hover:bg-green-300/80 sm:ms-auto">
                  پیشنهادهایی که واقعاً مفیدند
                </Badge>
              </div>
              <div className="my-4">
                <span className="text-xs text-pretty text-muted-foreground">
                  هوش مصنوعی
                </span>
              </div>
              <div className="flex flex-row items-center">
                <h2 className="font-semibold text-pretty">
                  داده را به بینش عملی تبدیل کنید
                </h2>
              </div>
              <div className="my-4 flex flex-row flex-wrap items-center gap-2 sm:gap-3">
                <Badge
                  variant="secondary"
                  className="h-auto max-w-full whitespace-normal"
                >
                  تیم را با دستیار هوشمند تقویت کنید
                </Badge>
                <Badge variant="secondary" className="h-auto whitespace-normal">
                  پیشنهاد هوشمند
                </Badge>
                <Badge variant="secondary" className="h-auto whitespace-normal">
                  اتوماسیون AI
                </Badge>
              </div>
              <div>
                <div className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center">
                  <h2 className="min-w-0 font-semibold text-pretty">
                    فرایندها را با AI بهینه کنید
                  </h2>
                  <Progress
                    value={60}
                    className="w-full max-w-none rounded-sm sm:ms-auto sm:max-w-32"
                  />
                </div>

                <div className="my-4 space-y-2">
                  <Skeleton className="h-1 w-full" />
                  <Skeleton className="h-1 w-full" />
                  <Skeleton className="h-1 w-full" />
                </div>
              </div>
              <div className="mt-8 mb-2 flex flex-col gap-3 bg-card sm:mt-12 sm:mb-4 sm:flex-row sm:items-center sm:justify-between">
                <div className="flex min-w-0 flex-wrap gap-2 sm:gap-4">
                  <Button
                    size="sm"
                    variant="outline"
                    className="border-success text-success hover:bg-success/10"
                  >
                    دستیار کسب‌وکار
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    className="border-destructive text-destructive hover:bg-destructive/10 hover:text-red-600"
                  >
                    هوش مصنوعی
                  </Button>
                </div>

                <div className="flex gap-2">
                  <Button size="icon" variant="outline" className="size-8">
                    <X className="size-4" />
                  </Button>
                  <Button size="icon" variant="outline" className="size-8">
                    <Share className="size-4" />
                  </Button>
                </div>
              </div>
            </div>
          </div>

          <div className="min-w-0">
            <div className="mt-0 flex flex-col gap-4 rounded-lg bg-background/50 p-3 sm:p-4 lg:mt-24">
              <div className="flex min-w-0 flex-col gap-2 rounded-lg border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:gap-x-2 sm:p-4">
                <div className="flex min-w-0 items-center gap-x-2">
                  <ChartNoAxesColumnIncreasing className="size-5 shrink-0 sm:size-6" />
                  <h1 className="min-w-0 text-base font-bold text-pretty sm:truncate sm:text-xl">
                    با هوش مصنوعی سریع‌تر تصمیم بگیرید
                  </h1>
                </div>
                <span className="shrink-0 font-mono text-xs text-muted-foreground sm:ms-auto sm:text-sm">
                  Data/logs/182620
                </span>
              </div>

              <Card className="min-w-0 gap-0 overflow-hidden py-4">
                <CardHeader className="flex flex-col gap-2 text-start sm:flex-row sm:items-center">
                  <CardTitle className="text-lg sm:text-xl">
                    پیشنهاد هوشمند
                  </CardTitle>
                  <CardDescription className="sm:ms-auto">
                    <Badge className="bg-green-300 text-green-600 hover:bg-green-300/80">
                      اتوماسیون AI
                    </Badge>
                  </CardDescription>
                </CardHeader>
                <CardContent className="min-w-0 overflow-hidden px-3 sm:px-4">
                  <ChartContainer
                    config={chartConfig}
                    className="aspect-auto! h-[180px] w-full min-w-0 sm:h-[196px]"
                  >
                    <BarChart
                      accessibilityLayer
                      data={chartData}
                      margin={{ left: 0, right: 0, top: 0, bottom: 0 }}
                    >
                      <CartesianGrid vertical={false} />
                      <XAxis
                        dataKey="month"
                        tickLine={false}
                        tickMargin={8}
                        axisLine={false}
                        interval="preserveStartEnd"
                        minTickGap={24}
                        tickFormatter={(value) => String(value).slice(0, 3)}
                      />
                      <ChartTooltip
                        cursor={false}
                        content={<ChartTooltipContent indicator="dashed" />}
                      />
                      <Bar dataKey="desktop" radius={4} />
                      <Bar dataKey="mobile" radius={4} />
                    </BarChart>
                  </ChartContainer>
                </CardContent>
              </Card>

              <div className="mt-2 flex min-w-0 flex-col rounded-lg border bg-background/50 p-3 text-start shadow-sm sm:mt-4 sm:p-4">
                <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start">
                  <ChartCandlestick className="size-6 shrink-0 text-foreground/60" />
                  <span className="min-w-0 text-sm text-pretty text-muted-foreground sm:ms-4">
                    مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا
                    می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
                  </span>
                </div>
                <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4 lg:grid-cols-3">
                  <div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:p-4">
                    <div className="flex items-start justify-between gap-2">
                      <h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
                        کارهای تکراری را به AI بسپارید
                      </h2>
                      <ArrowUpRight className="size-5 shrink-0 text-success sm:size-6 rtl:rotate-180" />
                    </div>
                    <p className="mt-2 text-sm text-pretty text-muted-foreground">
                      از خلاصه‌سازی مکالمه تا پیشنهاد پاسخ، AI زمان کار دستی را کم
                      می‌کند و کیفیت خروجی را بالا می‌برد.
                    </p>
                  </div>

                  <div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:p-4">
                    <div className="flex items-start justify-between gap-2">
                      <h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
                        پیشنهادهایی که واقعاً مفیدند
                      </h2>
                      <ArrowUpRight className="size-5 shrink-0 text-success sm:size-6 rtl:rotate-180" />
                    </div>
                    <p className="mt-2 text-sm text-pretty text-muted-foreground">
                      سیستم با داده سازمان شما یاد می‌گیرد و هر بار پیشنهادهای
                      دقیق‌تری برای بهبود نتیجه ارائه می‌دهد.
                    </p>
                  </div>

                  <div className="min-w-0 rounded-lg border bg-card p-3 shadow-sm sm:col-span-2 sm:p-4 lg:col-span-1">
                    <div className="flex items-start justify-between gap-2">
                      <h2 className="min-w-0 text-base font-bold text-pretty sm:text-lg lg:text-xl">
                        داده را به بینش عملی تبدیل کنید
                      </h2>
                      <ArrowUp className="size-5 shrink-0 text-success sm:size-6" />
                    </div>
                    <p className="mt-2 text-sm text-pretty text-muted-foreground">
                      مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا
                      می‌کنند. تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature176 };