"use client";

import { useState } from "react";

import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

interface IntegrationItem {
  image: string;
  title: string;
  description: string;
  isConnected?: boolean;
  className?: string;
}

interface IntegrationRowProps {
  integration: IntegrationItem;
  onToggle?: (title: string) => void;
}

const IntegrationRow = ({ integration, onToggle }: IntegrationRowProps) => {
  return (
    <div className="flex items-center justify-between gap-4 py-4">
      <div className="flex items-center gap-4">
        <div className="flex size-12 items-center justify-center rounded-lg border bg-muted/50">
          <img
            src={integration.image}
            alt={`لوگوی ${integration.title}`}
            className={cn("size-7", integration.className)}
          />
        </div>
        <div className="space-y-0.5">
          <p className="font-medium">{integration.title}</p>
          <p className="text-sm text-muted-foreground">
            {integration.description}
          </p>
        </div>
      </div>
      <Switch
        checked={integration.isConnected}
        onCheckedChange={() => onToggle?.(integration.title)}
      />
    </div>
  );
};

interface SettingsIntegrations5Props {
  className?: string;
  heading?: string;
  subHeading?: string;
  integrations?: IntegrationItem[];
}

const SettingsIntegrations5 = ({
  className,
  heading = "اپلیکیشن‌های متصل",
  subHeading = "مدیریت اپلیکیشن‌هایی که به حساب شما دسترسی دارند.",
  integrations: initialIntegrations = [
    {
      image:
        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
      title: "Slack",
      description: "اعلان‌ها را در فضای کاری پیام‌رسان تیمی دریافت کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/google-icon.svg",
      title: "فضای ابری",
      description: "اسناد و فایل‌ها را به‌صورت خودکار همگام‌سازی کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      title: "Notion",
      description: "داده‌ها را به فضای کاری یادداشت‌برداری صادر کنید",
      isConnected: false,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/github-icon.svg",
      title: "GitHub",
      description: "مخازن را برای پیگیری مسائل متصل کنید",
      isConnected: true,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "طرح‌ها را مستقیماً از طراحی رابط وارد کنید",
      isConnected: false,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
      title: "Jira",
      description: "وظایف و مسائل را با پروژه‌های Jira همگام کنید",
      isConnected: true,
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
      title: "Linear",
      description: "مسائل را در Linear ایجاد و پیگیری کنید",
      isConnected: false,
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
      title: "Stripe",
      description: "پرداخت‌ها را پردازش کنید و تراکنش‌ها را مشاهده کنید",
      isConnected: true,
    },
  ],
}: SettingsIntegrations5Props) => {
  const [integrations, setIntegrations] = useState(initialIntegrations);

  const handleToggle = (title: string) => {
    setIntegrations((prev) =>
      prev.map((i) =>
        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
      ),
    );
  };

  return (
    <section className={cn("py-32", className)}>
      <div className="container max-w-2xl">
        <div className="rounded-lg border">
          <div className="border-b p-6">
            <h2 className="text-lg font-semibold">{heading}</h2>
            <p className="text-sm text-muted-foreground">{subHeading}</p>
          </div>
          <div className="divide-y px-6">
            {integrations.map((integration) => (
              <IntegrationRow
                key={integration.title}
                integration={integration}
                onToggle={handleToggle}
              />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsIntegrations5 };