import type { LucideIcon } from "lucide-react";
import {
  ArrowUpRight,
  ChartBarIcon,
  ChartNetwork,
  CheckCircle2,
  Clock,
  Cpu,
  DollarSign,
  LocateFixed,
  Server,
  Settings,
  UserIcon,
  Zap,
} from "lucide-react";
import * as React from "react";

import { cn } from "@/lib/utils";

const ENVIRONMENT_LABELS = {
  production: "تیم فروش",
  staging: "بستن معامله",
  development: "رشد درآمد",
} as const;

interface CardData {
  id: string;
  icon: React.ElementType;
  title: string;
  description: string;
  href: string;
  metrics: {
    value: string;
    label: string;
    trend: number;
    secondaryMetric?: {
      value: string;
      label: string;
    };
  };
  status: {
    label: string;
    color: "text-green-500" | "text-yellow-500" | "text-blue-500";
    icon: LucideIcon;
    lastUpdated: string;
  };
  performance: {
    cpu: string;
    memory: string;
    latency: string;
  };
  deployment: {
    version: string;
    environment: keyof typeof ENVIRONMENT_LABELS;
    region: string;
  };
}

const CARDS: CardData[] = [
  {
    id: "revenue",
    icon: DollarSign,
    title: "همکاری فروش و بازاریابی",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    href: "#revenue",
    metrics: {
      value: "افزایش فروش",
      label: "تیم فروش",
      trend: 12.5,
      secondaryMetric: {
        value: "بستن معامله",
        label: "رشد درآمد",
      },
    },
    status: {
      label: "افزایش فروش",
      color: "text-green-500",
      icon: CheckCircle2,
      lastUpdated: "2024-03-21T15:30:00Z",
    },
    performance: {
      cpu: "تیم فروش",
      memory: "2.8GB",
      latency: "120ms",
    },
    deployment: {
      version: "v2.3.4",
      environment: "production",
      region: "us-west-2",
    },
  },
  {
    id: "analytics",
    icon: ChartBarIcon,
    title: "اولویت‌بندی سرنخ",
    description:
      "دلایل از دست دادن معامله را تحلیل کنید و استراتژی فروش را بهبود دهید.",
    href: "#analytics",
    metrics: {
      value: "بستن معامله",
      label: "رشد درآمد",
      trend: -8.3,
      secondaryMetric: {
        value: "افزایش فروش",
        label: "تیم فروش",
      },
    },
    status: {
      label: "بستن معامله",
      color: "text-blue-500",
      icon: Zap,
      lastUpdated: "2024-03-21T15:28:00Z",
    },
    performance: {
      cpu: "رشد درآمد",
      memory: "12.4GB",
      latency: "1.2ms",
    },
    deployment: {
      version: "v3.1.0",
      environment: "production",
      region: "eu-west-1",
    },
  },
  {
    id: "architecture",
    icon: Settings,
    title: "قالب پیشنهاد فروش",
    description:
      "اهداف فردی و تیمی را شفاف تعریف کنید و پیشرفت را لحظه‌ای ببینید.",
    href: "#architecture",
    metrics: {
      value: "افزایش فروش",
      label: "تیم فروش",
      trend: 2.1,
      secondaryMetric: {
        value: "۱۲",
        label: "بستن معامله",
      },
    },
    status: {
      label: "رشد درآمد",
      color: "text-green-500",
      icon: CheckCircle2,
      lastUpdated: "2024-03-21T15:25:00Z",
    },
    performance: {
      cpu: "افزایش فروش",
      memory: "32GB",
      latency: "85ms",
    },
    deployment: {
      version: "v2.8.1",
      environment: "production",
      region: "global",
    },
  },
  {
    id: "security",
    icon: UserIcon,
    title: "ردیابی کووت",
    description:
      "سرنخ‌های با بالاترین احتمال تبدیل را در بالای صف کار روزانه قرار دهید.",
    href: "#security",
    metrics: {
      value: "تیم فروش",
      label: "بستن معامله",
      trend: -15.7,
      secondaryMetric: {
        value: "رشد درآمد",
        label: "افزایش فروش",
      },
    },
    status: {
      label: "تیم فروش",
      color: "text-yellow-500",
      icon: Clock,
      lastUpdated: "2024-03-21T15:15:00Z",
    },
    performance: {
      cpu: "بستن معامله",
      memory: "4.2GB",
      latency: "50ms",
    },
    deployment: {
      version: "v1.9.3",
      environment: "staging",
      region: "us-east-1",
    },
  },
  {
    id: "network",
    icon: ChartNetwork,
    title: "تحلیل باخت معامله",
    description:
      "پیشنهادهای حرفه‌ای را در چند دقیقه بسازید و زمان آماده‌سازی را کم کنید.",
    href: "#network",
    metrics: {
      value: "رشد درآمد",
      label: "افزایش فروش",
      trend: 25.4,
      secondaryMetric: {
        value: "تیم فروش",
        label: "بستن معامله",
      },
    },
    status: {
      label: "رشد درآمد",
      color: "text-green-500",
      icon: CheckCircle2,
      lastUpdated: "2024-03-21T15:29:00Z",
    },
    performance: {
      cpu: "افزایش فروش",
      memory: "128GB",
      latency: "5ms",
    },
    deployment: {
      version: "v4.2.0",
      environment: "production",
      region: "multi-region",
    },
  },
  {
    id: "location",
    icon: LocateFixed,
    title: "هدف‌گذاری تیمی",
    description:
      "وضعیت هر پیشنهاد را از ارسال تا امضا بدون پیگیری دستی دنبال کنید.",
    href: "#location",
    metrics: {
      value: "تیم فروش",
      label: "بستن معامله",
      trend: 5.8,
      secondaryMetric: {
        value: "رشد درآمد",
        label: "افزایش فروش",
      },
    },
    status: {
      label: "تیم فروش",
      color: "text-blue-500",
      icon: Zap,
      lastUpdated: "2024-03-21T15:20:00Z",
    },
    performance: {
      cpu: "بستن معامله",
      memory: "16GB",
      latency: "150ms",
    },
    deployment: {
      version: "v2.4.5",
      environment: "production",
      region: "global",
    },
  },
];

interface Feature237Props {
  className?: string;
}

const Feature237 = ({ className }: Feature237Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <h1 className="mb-10 text-center text-3xl font-bold tracking-tighter text-balance text-foreground lg:text-2xll">
          پیش‌بینی درآمد را دقیق‌تر کنید
        </h1>
        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
          {CARDS.map((card) => (
            <a key={card.id} href={card.href} className="group block h-full">
              <div className="flex h-full flex-col rounded-xl border bg-card p-6 text-start transition-all duration-200 hover:border-primary hover:shadow-lg">
                <div className="flex h-full flex-col justify-between space-y-4">
                  <div>
                    <div className="flex items-start justify-between">
                      <div>
                        <h3 className="text-xl text-balance text-foreground transition-colors duration-200 group-hover:text-primary">
                          {card.title}
                        </h3>
                        <div className="flex items-center gap-2">
                          <card.status.icon
                            className={cn("size-4", card.status.color)}
                          />
                          <span
                            className={cn(
                              "font-mono text-sm",
                              card.status.color,
                            )}
                          >
                            {card.status.label}
                          </span>
                          <span className="font-mono text-xs text-muted-foreground">
                            [
                            {new Date(card.status.lastUpdated).toLocaleTimeString(
                              "fa-IR",
                            )}
                            ]
                          </span>
                        </div>
                      </div>
                      <ArrowUpRight className="size-5 text-muted-foreground transition-transform duration-200 group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-primary rtl:rotate-180" />
                    </div>

                    <p className="mt-4 text-pretty text-muted-foreground">
                      {card.description}
                    </p>
                  </div>

                  <div className="space-y-4">
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <div className="font-mono text-xl font-bold">
                          {card.metrics.value}
                        </div>
                        <div className="font-mono text-sm text-muted-foreground">
                          {card.metrics.label}
                        </div>
                        <div
                          className={cn(
                            "font-mono text-sm",
                            card.metrics.trend > 0
                              ? "text-green-500"
                              : "text-red-500",
                          )}
                        >
                          {card.metrics.trend > 0 ? "+" : ""}
                          {card.metrics.trend.toLocaleString("fa-IR")}٪
                        </div>
                      </div>
                      {card.metrics.secondaryMetric && (
                        <div>
                          <div className="font-mono text-xl font-bold">
                            {card.metrics.secondaryMetric.value}
                          </div>
                          <div className="font-mono text-sm text-muted-foreground">
                            {card.metrics.secondaryMetric.label}
                          </div>
                        </div>
                      )}
                    </div>

                    <div className="grid grid-cols-3 gap-2 border-t pt-4">
                      <div className="flex items-center gap-2">
                        <Cpu className="size-4 text-muted-foreground" />
                        <span className="font-mono text-xs">
                          {card.performance.cpu}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Server className="size-4 text-muted-foreground" />
                        <span className="font-mono text-xs">
                          {card.performance.memory}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <Zap className="size-4 text-muted-foreground" />
                        <span className="font-mono text-xs">
                          {card.performance.latency}
                        </span>
                      </div>
                    </div>

                    <div className="border-t pt-4">
                      <div className="flex items-center gap-2 font-mono text-xs text-muted-foreground">
                        <span>{card.deployment.version}</span>
                        <span>•</span>
                        <span>
                          {ENVIRONMENT_LABELS[card.deployment.environment]}
                        </span>
                        <span>•</span>
                        <span>{card.deployment.region}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature237 };