import { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useToast } from "@/hooks/use-toast";
import { Loader2 } from "lucide-react";
import { apiRequest } from "@/lib/queryClient";
import { Textarea } from "@/components/ui/textarea";
import { useLanguage } from "@/hooks/use-language";
import { useSettings } from "@/hooks/use-settings";
import { Switch } from "@/components/ui/switch";

const settingsSchema = z.object({
  // Site Configuration
  siteTitle: z.string().min(1, "Site title is required"),
  siteTitleAr: z.string().min(1, "Arabic site title is required"),
  logoText: z.string().min(1, "Logo text is required"),
  logoTextAr: z.string().min(1, "Arabic logo text is required"),

  // Homepage Configuration
  homeBannerTitle: z.string().min(1, "Homepage banner title is required"),
  homeBannerTitleAr: z.string().min(1, "Arabic homepage banner title is required"),
  homeBannerDescription: z.string().min(1, "Homepage banner description is required"),
  homeBannerDescriptionAr: z.string().min(1, "Arabic homepage banner description is required"),

  // Auth Page Configuration
  authWelcomeTitle: z.string().min(1, "Auth welcome title is required"),
  authWelcomeTitleAr: z.string().min(1, "Arabic auth welcome title is required"),
  authDescription: z.string().min(1, "Auth description is required"),
  authDescriptionAr: z.string().min(1, "Arabic auth description is required"),
  statsCard1Title: z.string().min(1, "First stats card title is required"),
  statsCard1TitleAr: z.string().min(1, "Arabic first stats card title is required"),
  statsCard1Description: z.string().min(1, "First stats card description is required"),
  statsCard1DescriptionAr: z.string().min(1, "Arabic first stats card description is required"),
  statsCard2Title: z.string().min(1, "Second stats card title is required"),
  statsCard2TitleAr: z.string().min(1, "Arabic second stats card title is required"),
  statsCard2Description: z.string().min(1, "Second stats card description is required"),
  statsCard2DescriptionAr: z.string().min(1, "Arabic second stats card description is required"),
  enableRegistration: z.boolean(),

  // API Configuration
  openaiApiKey: z.string().min(1, "OpenAI API Key is required"),
  firebaseApiKey: z.string().min(1, "Firebase API Key is required"),
  firebaseProjectId: z.string().min(1, "Firebase Project ID is required"),
  firebaseAppId: z.string().min(1, "Firebase App ID is required"),
  firebaseMessagingSenderId: z.string().min(1, "Firebase Messaging Sender ID is required"),
  firebaseVapidKey: z.string().min(1, "Firebase VAPID Key is required"),
  pusherAppId: z.string().min(1, "Pusher App ID is required"),
  pusherKey: z.string().min(1, "Pusher Key is required"),
  pusherSecret: z.string().min(1, "Pusher Secret is required"),
  pusherCluster: z.string().min(1, "Pusher Cluster is required"),
  deepgramApiKey: z.string().min(1, "Deepgram API Key is required"),
  sendgridApiKey: z.string().min(1, "SendGrid API Key is required"),
  sendgridFromEmail: z.string().email("Invalid email address"),

  // Privacy Policy
  privacyPolicyTitle: z.string().min(1, "Privacy Policy title is required"),
  privacyPolicyTitleAr: z.string().min(1, "Arabic Privacy Policy title is required"),
  privacyPolicyContent: z.string().min(1, "Privacy Policy content is required"),
  privacyPolicyContentAr: z.string().min(1, "Arabic Privacy Policy content is required"),
});

type SettingsValues = z.infer<typeof settingsSchema>;

export default function SettingsPage() {
  const { toast } = useToast();
  const [isLoading, setIsLoading] = useState(false);
  const { t } = useLanguage();
  const { settings, updateSettings } = useSettings();

  const form = useForm<SettingsValues>({
    resolver: zodResolver(settingsSchema),
    defaultValues: {
      siteTitle: "",
      siteTitleAr: "",
      logoText: "",
      logoTextAr: "",
      homeBannerTitle: "",
      homeBannerTitleAr: "",
      homeBannerDescription: "",
      homeBannerDescriptionAr: "",
      authWelcomeTitle: "",
      authWelcomeTitleAr: "",
      authDescription: "",
      authDescriptionAr: "",
      statsCard1Title: "",
      statsCard1TitleAr: "",
      statsCard1Description: "",
      statsCard1DescriptionAr: "",
      statsCard2Title: "",
      statsCard2TitleAr: "",
      statsCard2Description: "",
      statsCard2DescriptionAr: "",
      enableRegistration: false,
      openaiApiKey: "",
      firebaseApiKey: "",
      firebaseProjectId: "",
      firebaseAppId: "",
      firebaseMessagingSenderId: "",
      firebaseVapidKey: "",
      pusherAppId: "",
      pusherKey: "",
      pusherSecret: "",
      pusherCluster: "",
      deepgramApiKey: "",
      sendgridApiKey: "",
      sendgridFromEmail: "",
      privacyPolicyTitle: "",
      privacyPolicyTitleAr: "",
      privacyPolicyContent: "",
      privacyPolicyContentAr: "",
    },
  });

  useEffect(() => {
    if (settings) {
      form.reset({
        ...settings,
        siteTitle: settings.siteTitle || "",
        siteTitleAr: settings.siteTitleAr || "",
        logoText: settings.logoText || "",
        logoTextAr: settings.logoTextAr || "",
        homeBannerTitle: settings.homeBannerTitle || "",
        homeBannerTitleAr: settings.homeBannerTitleAr || "",
        homeBannerDescription: settings.homeBannerDescription || "",
        homeBannerDescriptionAr: settings.homeBannerDescriptionAr || "",
        authWelcomeTitle: settings.authWelcomeTitle || "",
        authWelcomeTitleAr: settings.authWelcomeTitleAr || "",
        authDescription: settings.authDescription || "",
        authDescriptionAr: settings.authDescriptionAr || "",
        statsCard1Title: settings.statsCard1Title || "",
        statsCard1TitleAr: settings.statsCard1TitleAr || "",
        statsCard1Description: settings.statsCard1Description || "",
        statsCard1DescriptionAr: settings.statsCard1DescriptionAr || "",
        statsCard2Title: settings.statsCard2Title || "",
        statsCard2TitleAr: settings.statsCard2TitleAr || "",
        statsCard2Description: settings.statsCard2Description || "",
        statsCard2DescriptionAr: settings.statsCard2DescriptionAr || "",
        enableRegistration: settings.enableRegistration ?? false,
        openaiApiKey: settings.openaiApiKey || "",
        firebaseApiKey: settings.firebaseApiKey || "",
        firebaseProjectId: settings.firebaseProjectId || "",
        firebaseAppId: settings.firebaseAppId || "",
        firebaseMessagingSenderId: settings.firebaseMessagingSenderId || "",
        firebaseVapidKey: settings.firebaseVapidKey || "",
        pusherAppId: settings.pusherAppId || "",
        pusherKey: settings.pusherKey || "",
        pusherSecret: settings.pusherSecret || "",
        pusherCluster: settings.pusherCluster || "",
        deepgramApiKey: settings.deepgramApiKey || "",
        sendgridApiKey: settings.sendgridApiKey || "",
        sendgridFromEmail: settings.sendgridFromEmail || "",
        privacyPolicyTitle: settings.privacyPolicyTitle || "",
        privacyPolicyTitleAr: settings.privacyPolicyTitleAr || "",
        privacyPolicyContent: settings.privacyPolicyContent || "",
        privacyPolicyContentAr: settings.privacyPolicyContentAr || "",
      });
    }
  }, [form, settings]);

  const onSubmit = async (data: SettingsValues) => {
    setIsLoading(true);
    try {
      await updateSettings(data);
    } catch (error) {
      toast({
        title: t("Error", "خطأ"),
        description: t(
          "Failed to update settings. Please try again.",
          "فشل في تحديث الإعدادات. يرجى المحاولة مرة أخرى."
        ),
        variant: "destructive",
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-8">{t("Settings", "الإعدادات")}</h1>

      <Tabs defaultValue="site">
        <TabsList className="mb-8">
          <TabsTrigger value="site">{t("Site", "الموقع")}</TabsTrigger>
          <TabsTrigger value="homepage">{t("Homepage", "الصفحة الرئيسية")}</TabsTrigger>
          <TabsTrigger value="auth">{t("Auth Page", "صفحة المصادقة")}</TabsTrigger>
          <TabsTrigger value="privacy">{t("Privacy Policy", "سياسة الخصوصية")}</TabsTrigger>
          <TabsTrigger value="api">{t("API Keys", "مفاتيح API")}</TabsTrigger>
        </TabsList>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <TabsContent value="site">
              <Card>
                <CardHeader>
                  <CardTitle>{t("Site Configuration", "إعدادات الموقع")}</CardTitle>
                  <CardDescription>
                    {t(
                      "Configure your site title and logo text",
                      "قم بتكوين عنوان موقعك ونص الشعار"
                    )}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="siteTitle"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Site Title", "عنوان الموقع")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="siteTitleAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Site Title (Arabic)", "عنوان الموقع (عربي)")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="logoText"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Logo Text", "نص الشعار")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="logoTextAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Logo Text (Arabic)", "نص الشعار (عربي)")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="homepage">
              <Card>
                <CardHeader>
                  <CardTitle>{t("Homepage Configuration", "إعدادات الصفحة الرئيسية")}</CardTitle>
                  <CardDescription>
                    {t(
                      "Configure your homepage banner content",
                      "قم بتكوين محتوى شعار الصفحة الرئيسية"
                    )}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="homeBannerTitle"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Banner Title", "عنوان الشعار")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="homeBannerTitleAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Banner Title (Arabic)", "عنوان الشعار (عربي)")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="homeBannerDescription"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Banner Description", "وصف الشعار")}</FormLabel>
                          <FormControl>
                            <Textarea {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="homeBannerDescriptionAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Banner Description (Arabic)", "وصف الشعار (عربي)")}</FormLabel>
                          <FormControl>
                            <Textarea {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="auth">
              <Card>
                <CardHeader>
                  <CardTitle>{t("Auth Page Configuration", "إعدادات صفحة المصادقة")}</CardTitle>
                  <CardDescription>
                    {t(
                      "Configure your authentication page content",
                      "قم بتكوين محتوى صفحة المصادقة"
                    )}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="authWelcomeTitle"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Welcome Title", "عنوان الترحيب")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="authWelcomeTitleAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Welcome Title (Arabic)", "عنوان الترحيب (عربي)")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="authDescription"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Description", "الوصف")}</FormLabel>
                          <FormControl>
                            <Textarea {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="authDescriptionAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Description (Arabic)", "الوصف (عربي)")}</FormLabel>
                          <FormControl>
                            <Textarea {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  {/* Stats Card 1 Configuration */}
                  <div className="border-t pt-4">
                    <h3 className="text-lg font-medium mb-4">{t("First Stats Card", "البطاقة الإحصائية الأولى")}</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <FormField
                        control={form.control}
                        name="statsCard1Title"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Title", "العنوان")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard1TitleAr"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Title (Arabic)", "العنوان (عربي)")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard1Description"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Description", "الوصف")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard1DescriptionAr"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Description (Arabic)", "الوصف (عربي)")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

                  {/* Stats Card 2 Configuration */}
                  <div className="border-t pt-4">
                    <h3 className="text-lg font-medium mb-4">{t("Second Stats Card", "البطاقة الإحصائية الثانية")}</h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <FormField
                        control={form.control}
                        name="statsCard2Title"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Title", "العنوان")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard2TitleAr"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Title (Arabic)", "العنوان (عربي)")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard2Description"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Description", "الوصف")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                      <FormField
                        control={form.control}
                        name="statsCard2DescriptionAr"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>{t("Description (Arabic)", "الوصف (عربي)")}</FormLabel>
                            <FormControl>
                              <Input {...field} />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>
                  </div>

                  <FormField
                    control={form.control}
                    name="enableRegistration"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                        <div className="space-y-0.5">
                          <FormLabel className="text-base">
                            {t("Enable Registration", "تمكين التسجيل")}
                          </FormLabel>
                          <FormDescription>
                            {t(
                              "Allow new users to register accounts",
                              "السماح للمستخدمين الجدد بإنشاء حسابات"
                            )}
                          </FormDescription>
                        </div>
                        <FormControl>
                          <Switch
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                      </FormItem>
                    )}
                  />
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="api">
              <Card>
                <CardHeader>
                  <CardTitle>{t("API Configuration", "إعدادات API")}</CardTitle>
                  <CardDescription>
                    {t(
                      "Configure your API keys for various services",
                      "قم بتكوين مفاتيح API للخدمات المختلفة"
                    )}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* OpenAI Section */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold">{t("OpenAI", "OpenAI")}</h3>
                      <FormField
                        control={form.control}
                        name="openaiApiKey"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>API Key</FormLabel>
                            <FormControl>
                              <Input type="password" {...field} />
                            </FormControl>
                            <FormDescription>
                              {t(
                                "Your OpenAI API key for the chatbot and Arabic translation functionality",
                                "مفتاح API الخاص بك لوظائف الدردشة والترجمة العربية"
                              )}
                            </FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </div>

                    {/* Firebase Section */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold">{t("Firebase", "Firebase")}</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                          control={form.control}
                          name="firebaseApiKey"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>API Key</FormLabel>
                              <FormControl>
                                <Input type="password" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="firebaseProjectId"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>Project ID</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="firebaseAppId"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>App ID</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="firebaseMessagingSenderId"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>Messaging Sender ID</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="firebaseVapidKey"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>VAPID Key</FormLabel>
                              <FormControl>
                                <Input type="password" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>
                    </div>

                    {/* Pusher Section */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold">{t("Pusher", "Pusher")}</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                          control={form.control}
                          name="pusherAppId"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>App ID</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="pusherKey"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>Key</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="pusherSecret"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>Secret</FormLabel>
                              <FormControl>
                                <Input type="password" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="pusherCluster"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>Cluster</FormLabel>
                              <FormControl>
                                <Input {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>
                    </div>

                    {/* SendGrid Section */}
                    <div className="space-y-4">
                      <h3 className="text-lg font-semibold">{t("SendGrid", "SendGrid")}</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <FormField
                          control={form.control}
                          name="sendgridApiKey"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>{t("API Key", "مفتاح API")}</FormLabel>
                              <FormControl>
                                <Input type="password" {...field} />
                              </FormControl>
                              <FormDescription>
                                {t(
                                  "Your SendGrid API key for sending emails",
                                  "مفتاح API الخاص بك لإرسال رسائل البريد الإلكتروني"
                                )}
                              </FormDescription>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name="sendgridFromEmail"
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel>{t("From Email", "البريد الإلكتروني للمرسل")}</FormLabel>
                              <FormControl>
                                <Input type="email" {...field} />
                              </FormControl>
                              <FormDescription>
                                {t(
                                  "The email address that will be used as the sender",
                                  "عنوان البريد الإلكتروني الذي سيتم استخدامه كمرسل"
                                )}
                              </FormDescription>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="privacy">
              <Card>
                <CardHeader>
                  <CardTitle>{t("Privacy Policy Configuration", "إعدادات سياسة الخصوصية")}</CardTitle>
                  <CardDescription>
                    {t(
                      "Configure your privacy policy content",
                      "قم بتكوين محتوى سياسة الخصوصية"
                    )}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="privacyPolicyTitle"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Title", "العنوان")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="privacyPolicyTitleAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Title (Arabic)", "العنوان (عربي)")}</FormLabel>
                          <FormControl>
                            <Input {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="privacyPolicyContent"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Content", "المحتوى")}</FormLabel>
                          <FormControl>
                            <Textarea className="min-h-[200px]" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="privacyPolicyContentAr"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>{t("Content (Arabic)", "المحتوى (عربي)")}</FormLabel>
                          <FormControl>
                            <Textarea className="min-h-[200px]" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <Button type="submit" disabled={isLoading} className="ml-auto">
              {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              {t("Save Settings", "حفظ الإعدادات")}
            </Button>
          </form>
        </Form>
      </Tabs>
    </div>
  );
}