import { Bell, Mail, Smartphone } from "lucide-react";

import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface NotificationSettingItem {
  id: string;
  title: string;
  description: string;
  email: boolean;
  app: boolean;
}

interface NotificationSettingsTableProps {
  notificationSettings: NotificationSettingItem[];
}

const NotificationSettingsTable = ({
  notificationSettings,
}: NotificationSettingsTableProps) => {
  return (
    <Table>
      <TableHeader>
        <TableRow className="[&_div]:flex [&_div]:items-center [&_div]:justify-center [&_div]:gap-1 [&_div]:font-semibold [&_div]:text-muted-foreground/80 [&_div_svg]:size-4">
          <TableHead>
            <div className="!justify-start">
              <Bell /> نوع اعلان
            </div>
          </TableHead>
          <TableHead>
            <div>
              <Mail /> ایمیل
            </div>
          </TableHead>
          <TableHead>
            <div>
              <Smartphone /> درون‌برنامه
            </div>
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {notificationSettings.map((notification) => {
          return (
            <TableRow key={notification.id}>
              <TableCell>
                <p className="font-semibold">{notification.title}</p>
                <p className="text-xs font-medium text-muted-foreground/70">
                  {notification.description}
                </p>
              </TableCell>
              <TableCell className="text-center">
                <Checkbox defaultChecked={notification.email} />
              </TableCell>
              <TableCell className="text-center">
                <Checkbox defaultChecked={notification.app} />
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
};

interface SettingsNotifications1Props {
  heading?: string;
  subHeading?: string;
  className?: string;
  notificationSettings?: NotificationSettingItem[];
}

const SettingsNotifications1 = ({
  heading = "اعلان‌ها",
  subHeading = "مشخص کنید برای فعالیت‌های سامانه مدیریت ارتباط با مشتری از کدام کانال‌ها مطلع شوید.",
  notificationSettings = [
    {
      id: "mentions",
      title: "منشن مستقیم",
      description:
        "وقتی کسی شما را در لید، تسک یا گفتگو منشن می‌کند، فوراً مطلع شوید.",
      email: true,
      app: true,
    },
    {
      id: "replies",
      title: "پاسخ به گفتگو",
      description: "وقتی روی نظرات شما در رکوردها پاسخ گذاشته می‌شود، به‌روزرسانی بگیرید.",
      email: true,
      app: true,
    },
    {
      id: "access-requests",
      title: "درخواست دسترسی",
      description:
        "از درخواست دسترسی به داشبورد یا پایپ‌لاین و نتیجه تأیید باخبر شوید.",
      email: true,
      app: true,
    },
    {
      id: "task-assignments",
      title: "تخصیص تسک",
      description: "وقتی لید، معامله یا تسک پیگیری به شما اختصاص می‌یابد، مطلع شوید.",
      email: true,
      app: true,
    },
    {
      id: "shared-items",
      title: "اشتراک‌گذاری با شما",
      description:
        "وقتی همکار گزارشی، فایل یا لینک رکورد با شما به اشتراک می‌گذارد، مطلع شوید.",
      email: true,
      app: true,
    },
  ],
  className,
}: SettingsNotifications1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("w-full py-32", className)}>
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="flex w-full flex-col gap-10 tracking-tight">
        <div className="space-y-2">
          <h3 className="text-xl font-semibold">{heading}</h3>
          <p className="font-medium text-muted-foreground">{subHeading}</p>
        </div>

        <div className="flex w-full items-center justify-between gap-4 border-y py-10">
          <div>
            <p className="font-semibold">خلاصه روزانه صبح</p>
            <p className="text-sm font-medium text-muted-foreground">
              مرور لیدهای جدید، مهلت پیگیری و فعالیت‌های کلیدی تیم در ابتدای روز.
            </p>
          </div>
          <Switch />
        </div>

        <div className="space-y-4">
          <p className="text-lg font-semibold">فعالیت تیم فروش</p>

          <NotificationSettingsTable
            notificationSettings={notificationSettings}
          />
        </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsNotifications1 };