import { ExternalLink, Settings2, Trash2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

interface IntegrationItem {
  image: string;
  title: string;
  status: "active" | "inactive" | "error";
  lastSync?: string;
  className?: string;
}

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

const SettingsIntegrations6 = ({
  className,
  heading = "یکپارچه‌سازی‌ها",
  subHeading = "سرویس‌های متصل خود را مشاهده و مدیریت کنید.",
  integrations = [
    {
      image:
        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
      title: "Slack",
      status: "active",
      lastSync: "۲ دقیقه پیش",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/google-icon.svg",
      title: "فضای ابری",
      status: "active",
      lastSync: "۵ دقیقه پیش",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      title: "Notion",
      status: "error",
      lastSync: "ناموفق، ۱ ساعت پیش",
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/github-icon.svg",
      title: "GitHub",
      status: "active",
      lastSync: "همین الان",
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      status: "inactive",
      lastSync: "هرگز",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
      title: "Jira",
      status: "active",
      lastSync: "۱۰ دقیقه پیش",
    },
  ],
}: SettingsIntegrations6Props) => {
  const getStatusBadge = (status: IntegrationItem["status"]) => {
    switch (status) {
      case "active":
        return (
          <Badge variant="secondary" className="bg-green-100 text-green-800">
            فعال
          </Badge>
        );
      case "inactive":
        return <Badge variant="secondary">غیرفعال</Badge>;
      case "error":
        return (
          <Badge variant="secondary" className="bg-red-100 text-red-800">
            خطا
          </Badge>
        );
    }
  };

  return (
    <section className={cn("py-32", className)}>
      <div className="container max-w-4xl">
        <div className="space-y-2 border-b pb-6">
          <h2 className="text-xl font-semibold tracking-tight">{heading}</h2>
          <p className="text-sm text-muted-foreground">{subHeading}</p>
        </div>

        <div className="mt-6">
          <TooltipProvider>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>سرویس</TableHead>
                  <TableHead>وضعیت</TableHead>
                  <TableHead>آخرین همگام‌سازی</TableHead>
                  <TableHead className="text-end">عملیات</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {integrations.map((integration) => (
                  <TableRow key={integration.title}>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <img
                          src={integration.image}
                          alt={`لوگوی ${integration.title}`}
                          className={cn("size-6", integration.className)}
                        />
                        <span className="font-medium">{integration.title}</span>
                      </div>
                    </TableCell>
                    <TableCell>{getStatusBadge(integration.status)}</TableCell>
                    <TableCell className="text-muted-foreground">
                      {integration.lastSync}
                    </TableCell>
                    <TableCell className="text-end">
                      <div className="flex items-center justify-end gap-1">
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <ExternalLink className="size-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>باز کردن</TooltipContent>
                        </Tooltip>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <Settings2 className="size-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>تنظیمات</TooltipContent>
                        </Tooltip>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant="ghost"
                              size="icon"
                              className="text-destructive hover:text-destructive"
                            >
                              <Trash2 className="size-4" />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent>حذف</TooltipContent>
                        </Tooltip>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TooltipProvider>
        </div>
      </div>
    </section>
  );
};

export { SettingsIntegrations6 };