import { useState } from "react";
import type { Route } from "./+types/settings";
import { Form, useActionData } from "react-router";
import { Button } from "../components/ui/button/button";
import { Input } from "../components/ui/input/input";
import { Label } from "../components/ui/label/label";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs/tabs";
import { Switch } from "../components/ui/switch/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select/select";
import { Separator } from "../components/ui/separator/separator";
import { toast } from "sonner";
import { 
  Lock, 
  Shield, 
  Bell, 
  Mail, 
  Globe, 
  Database, 
  Zap, 
  Server, 
  Key,
  Settings as SettingsIcon,
  Save,
  RefreshCw
} from "lucide-react";
import styles from "./settings.module.css";

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");

  // Simulate API calls
  await new Promise(resolve => setTimeout(resolve, 1000));

  if (intent === "change-password") {
    const currentPassword = formData.get("currentPassword");
    const newPassword = formData.get("newPassword");
    const confirmPassword = formData.get("confirmPassword");

    if (!currentPassword || !newPassword || !confirmPassword) {
      return { error: "همه فیلدها الزامی هستند", success: false };
    }

    if (newPassword !== confirmPassword) {
      return { error: "رمز عبور جدید و تکرار آن یکسان نیستند", success: false };
    }

    if (newPassword.toString().length < 8) {
      return { error: "رمز عبور باید حداقل 8 کاراکتر باشد", success: false };
    }

    return { success: true, message: "رمز عبور با موفقیت تغییر کرد" };
  }

  if (intent === "update-settings") {
    return { success: true, message: "تنظیمات با موفقیت ذخیره شد" };
  }

  if (intent === "test-email") {
    return { success: true, message: "ایمیل تست با موفقیت ارسال شد" };
  }

  if (intent === "clear-cache") {
    return { success: true, message: "کش با موفقیت پاک شد" };
  }

  return { error: "عملیات نامشخص" };
}

export default function Settings({ actionData }: Route.ComponentProps) {
  const [emailNotifications, setEmailNotifications] = useState(true);
  const [smsNotifications, setSmsNotifications] = useState(false);
  const [autoBackup, setAutoBackup] = useState(true);
  const [twoFactorAuth, setTwoFactorAuth] = useState(false);
  const [maintenanceMode, setMaintenanceMode] = useState(false);

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.headerContent}>
          <SettingsIcon size={32} />
          <div>
            <h1>تنظیمات سیستم</h1>
            <p>مدیریت و پیکربندی کامل پنل</p>
          </div>
        </div>
      </div>

      <Tabs defaultValue="security" className={styles.tabs}>
        <TabsList className={styles.tabsList}>
          <TabsTrigger value="security">
            <Shield size={18} />
            امنیت
          </TabsTrigger>
          <TabsTrigger value="notifications">
            <Bell size={18} />
            اعلان‌ها
          </TabsTrigger>
          <TabsTrigger value="email">
            <Mail size={18} />
            ایمیل
          </TabsTrigger>
          <TabsTrigger value="database">
            <Database size={18} />
            دیتابیس
          </TabsTrigger>
          <TabsTrigger value="api">
            <Key size={18} />
            API
          </TabsTrigger>
          <TabsTrigger value="system">
            <Server size={18} />
            سیستم
          </TabsTrigger>
        </TabsList>

        {/* Security Tab */}
        <TabsContent value="security">
          <div className={styles.grid}>
            {/* Change Password */}
            <Card>
              <CardHeader>
                <CardTitle>
                  <Lock size={20} />
                  تغییر رمز عبور مدیریت
                </CardTitle>
                <CardDescription>
                  رمز عبور خود را به صورت دوره‌ای تغییر دهید
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post" className={styles.form}>
                  <input type="hidden" name="intent" value="change-password" />
                  
                  <div className={styles.formGroup}>
                    <Label htmlFor="currentPassword">رمز عبور فعلی</Label>
                    <Input 
                      type="password" 
                      id="currentPassword" 
                      name="currentPassword"
                      placeholder="رمز عبور فعلی خود را وارد کنید"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="newPassword">رمز عبور جدید</Label>
                    <Input 
                      type="password" 
                      id="newPassword" 
                      name="newPassword"
                      placeholder="حداقل 8 کاراکتر"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="confirmPassword">تکرار رمز عبور جدید</Label>
                    <Input 
                      type="password" 
                      id="confirmPassword" 
                      name="confirmPassword"
                      placeholder="رمز عبور جدید را دوباره وارد کنید"
                    />
                  </div>

                  {actionData?.error && (
                    <div className={styles.error}>{actionData.error}</div>
                  )}

                  {actionData?.success && actionData?.message && (
                    <div className={styles.success}>{actionData.message}</div>
                  )}

                  <Button type="submit">
                    <Save size={18} />
                    ذخیره رمز عبور جدید
                  </Button>
                </Form>
              </CardContent>
            </Card>

            {/* Two-Factor Authentication */}
            <Card>
              <CardHeader>
                <CardTitle>
                  <Shield size={20} />
                  احراز هویت دو مرحله‌ای (2FA)
                </CardTitle>
                <CardDescription>
                  امنیت حساب خود را با 2FA افزایش دهید
                </CardDescription>
              </CardHeader>
              <CardContent className={styles.switchCard}>
                <div className={styles.switchRow}>
                  <div>
                    <h4>فعال‌سازی 2FA</h4>
                    <p>استفاده از Google Authenticator</p>
                  </div>
                  <Switch 
                    checked={twoFactorAuth} 
                    onCheckedChange={setTwoFactorAuth}
                  />
                </div>
                
                {twoFactorAuth && (
                  <div className={styles.qrCode}>
                    <p>QR Code را با Google Authenticator اسکن کنید</p>
                    <div className={styles.qrPlaceholder}>
                      {/* QR Code would go here */}
                      <Shield size={64} />
                    </div>
                    <Input 
                      type="text" 
                      placeholder="کد 6 رقمی را وارد کنید"
                      className={styles.otpInput}
                    />
                    <Button variant="outline">تایید و فعال‌سازی</Button>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Session Management */}
            <Card>
              <CardHeader>
                <CardTitle>
                  <Zap size={20} />
                  مدیریت نشست‌ها
                </CardTitle>
                <CardDescription>
                  مدیریت نشست‌های فعال
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.sessionList}>
                  <div className={styles.sessionItem}>
                    <div>
                      <h4>نشست فعلی</h4>
                      <p>IP: 192.168.1.100 • Browser: Chrome • تهران</p>
                    </div>
                    <span className={styles.badge}>فعال</span>
                  </div>
                  <div className={styles.sessionItem}>
                    <div>
                      <h4>نشست قبلی</h4>
                      <p>IP: 192.168.1.105 • Browser: Firefox • مشهد</p>
                    </div>
                    <Button variant="destructive" size="sm">قطع نشست</Button>
                  </div>
                </div>
                <Separator className={styles.separator} />
                <Button variant="outline" className={styles.fullWidth}>
                  قطع تمام نشست‌های دیگر
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Notifications Tab */}
        <TabsContent value="notifications">
          <div className={styles.grid}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Bell size={20} />
                  تنظیمات اعلان‌ها
                </CardTitle>
                <CardDescription>
                  نحوه دریافت اعلان‌های سیستم را تنظیم کنید
                </CardDescription>
              </CardHeader>
              <CardContent className={styles.switchCard}>
                <div className={styles.switchRow}>
                  <div>
                    <h4>اعلان‌های ایمیل</h4>
                    <p>دریافت اعلان‌ها از طریق ایمیل</p>
                  </div>
                  <Switch 
                    checked={emailNotifications} 
                    onCheckedChange={setEmailNotifications}
                  />
                </div>

                <Separator />

                <div className={styles.switchRow}>
                  <div>
                    <h4>اعلان‌های پیامکی</h4>
                    <p>دریافت پیامک برای رویدادهای مهم</p>
                  </div>
                  <Switch 
                    checked={smsNotifications} 
                    onCheckedChange={setSmsNotifications}
                  />
                </div>

                <Separator />

                <div className={styles.notificationTypes}>
                  <h4>انواع اعلان‌ها</h4>
                  <div className={styles.checkboxList}>
                    <label>
                      <input type="checkbox" defaultChecked />
                      <span>خرید اشتراک جدید</span>
                    </label>
                    <label>
                      <input type="checkbox" defaultChecked />
                      <span>ثبت‌نام کاربر جدید</span>
                    </label>
                    <label>
                      <input type="checkbox" defaultChecked />
                      <span>پرداخت‌های موفق</span>
                    </label>
                    <label>
                      <input type="checkbox" />
                      <span>پرداخت‌های ناموفق</span>
                    </label>
                    <label>
                      <input type="checkbox" defaultChecked />
                      <span>خطاهای سیستم</span>
                    </label>
                    <label>
                      <input type="checkbox" />
                      <span>هشدارهای امنیتی</span>
                    </label>
                    <label>
                      <input type="checkbox" defaultChecked />
                      <span>سرورها آفلاین</span>
                    </label>
                    <label>
                      <input type="checkbox" />
                      <span>بک‌آپ خودکار</span>
                    </label>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Email Tab */}
        <TabsContent value="email">
          <div className={styles.grid}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Mail size={20} />
                  تنظیمات SMTP
                </CardTitle>
                <CardDescription>
                  پیکربندی سرور ایمیل برای ارسال خودکار
                </CardDescription>
              </CardHeader>
              <CardContent>
                <Form method="post" className={styles.form}>
                  <input type="hidden" name="intent" value="update-settings" />

                  <div className={styles.formGroup}>
                    <Label htmlFor="smtpHost">SMTP Host</Label>
                    <Input 
                      type="text" 
                      id="smtpHost" 
                      name="smtpHost"
                      placeholder="smtp.gmail.com"
                      defaultValue="smtp.gmail.com"
                    />
                  </div>

                  <div className={styles.formRow}>
                    <div className={styles.formGroup}>
                      <Label htmlFor="smtpPort">SMTP Port</Label>
                      <Input 
                        type="number" 
                        id="smtpPort" 
                        name="smtpPort"
                        placeholder="587"
                        defaultValue="587"
                      />
                    </div>

                    <div className={styles.formGroup}>
                      <Label htmlFor="smtpEncryption">Encryption</Label>
                      <Select defaultValue="tls">
                        <SelectTrigger id="smtpEncryption">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="none">None</SelectItem>
                          <SelectItem value="ssl">SSL</SelectItem>
                          <SelectItem value="tls">TLS</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="smtpUsername">SMTP Username</Label>
                    <Input 
                      type="email" 
                      id="smtpUsername" 
                      name="smtpUsername"
                      placeholder="your-email@gmail.com"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="smtpPassword">SMTP Password</Label>
                    <Input 
                      type="password" 
                      id="smtpPassword" 
                      name="smtpPassword"
                      placeholder="رمز عبور یا App Password"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="fromEmail">From Email</Label>
                    <Input 
                      type="email" 
                      id="fromEmail" 
                      name="fromEmail"
                      placeholder="noreply@yourdomain.com"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="fromName">From Name</Label>
                    <Input 
                      type="text" 
                      id="fromName" 
                      name="fromName"
                      placeholder="پنل VPN"
                    />
                  </div>

                  <div className={styles.buttonRow}>
                    <Button type="submit">
                      <Save size={18} />
                      ذخیره تنظیمات
                    </Button>
                    <Button type="submit" variant="outline" name="intent" value="test-email">
                      <Mail size={18} />
                      ارسال ایمیل تست
                    </Button>
                  </div>
                </Form>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Database Tab */}
        <TabsContent value="database">
          <div className={styles.grid}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Database size={20} />
                  مدیریت دیتابیس
                </CardTitle>
                <CardDescription>
                  بک‌آپ و بازیابی دیتابیس
                </CardDescription>
              </CardHeader>
              <CardContent className={styles.switchCard}>
                <div className={styles.switchRow}>
                  <div>
                    <h4>بک‌آپ خودکار روزانه</h4>
                    <p>ذخیره خودکار دیتابیس در ساعت 3 بامداد</p>
                  </div>
                  <Switch 
                    checked={autoBackup} 
                    onCheckedChange={setAutoBackup}
                  />
                </div>

                <Separator />

                <div className={styles.backupSection}>
                  <h4>بک‌آپ‌های موجود</h4>
                  <div className={styles.backupList}>
                    <div className={styles.backupItem}>
                      <div>
                        <h5>backup-2024-01-15.sql</h5>
                        <p>حجم: 45.2 MB • تاریخ: 1402/10/25 03:00</p>
                      </div>
                      <div className={styles.backupActions}>
                        <Button size="sm" variant="outline">دانلود</Button>
                        <Button size="sm" variant="outline">بازیابی</Button>
                        <Button size="sm" variant="destructive">حذف</Button>
                      </div>
                    </div>
                    <div className={styles.backupItem}>
                      <div>
                        <h5>backup-2024-01-14.sql</h5>
                        <p>حجم: 44.8 MB • تاریخ: 1402/10/24 03:00</p>
                      </div>
                      <div className={styles.backupActions}>
                        <Button size="sm" variant="outline">دانلود</Button>
                        <Button size="sm" variant="outline">بازیابی</Button>
                        <Button size="sm" variant="destructive">حذف</Button>
                      </div>
                    </div>
                  </div>
                </div>

                <Separator />

                <div className={styles.buttonRow}>
                  <Button>
                    <Database size={18} />
                    ایجاد بک‌آپ جدید
                  </Button>
                  <Button variant="outline">
                    <RefreshCw size={18} />
                    بهینه‌سازی دیتابیس
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* API Tab */}
        <TabsContent value="api">
          <div className={styles.grid}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Key size={20} />
                  مدیریت API Keys
                </CardTitle>
                <CardDescription>
                  کلیدهای API برای یکپارچه‌سازی با سرویس‌های خارجی
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className={styles.apiKeySection}>
                  <div className={styles.apiKeyItem}>
                    <div>
                      <h4>API Key اصلی</h4>
                      <code>vpn_sk_live_4dKj8Hx2Lp9Qm5Wn7Yt3Zr6Bc1Fg0Hv</code>
                    </div>
                    <div className={styles.apiActions}>
                      <Button size="sm" variant="outline">کپی</Button>
                      <Button size="sm" variant="outline">نمایش</Button>
                      <Button size="sm" variant="destructive">حذف</Button>
                    </div>
                  </div>

                  <div className={styles.apiKeyItem}>
                    <div>
                      <h4>API Key تست</h4>
                      <code>vpn_sk_test_9Xm2Ks7Lp4Qt8Wn3Yr6Zb5Ac1Dg0Hv</code>
                    </div>
                    <div className={styles.apiActions}>
                      <Button size="sm" variant="outline">کپی</Button>
                      <Button size="sm" variant="outline">نمایش</Button>
                      <Button size="sm" variant="destructive">حذف</Button>
                    </div>
                  </div>
                </div>

                <Separator className={styles.separator} />

                <Button>
                  <Key size={18} />
                  ایجاد API Key جدید
                </Button>

                <Separator className={styles.separator} />

                <div className={styles.apiDocs}>
                  <h4>تنظیمات V2Ray Panel API</h4>
                  <div className={styles.formGroup}>
                    <Label htmlFor="v2rayUrl">آدرس پنل V2Ray</Label>
                    <Input 
                      type="url" 
                      id="v2rayUrl" 
                      placeholder="https://your-v2ray-panel.com"
                      defaultValue="https://v2ray.example.com"
                    />
                  </div>

                  <div className={styles.formGroup}>
                    <Label htmlFor="v2rayApiKey">API Key پنل V2Ray</Label>
                    <Input 
                      type="password" 
                      id="v2rayApiKey" 
                      placeholder="کلید API پنل"
                    />
                  </div>

                  <Button variant="outline">
                    <RefreshCw size={18} />
                    تست اتصال
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* System Tab */}
        <TabsContent value="system">
          <div className={styles.grid}>
            <Card>
              <CardHeader>
                <CardTitle>
                  <Server size={20} />
                  تنظیمات سیستم
                </CardTitle>
                <CardDescription>
                  پیکربندی‌های عمومی سیستم
                </CardDescription>
              </CardHeader>
              <CardContent className={styles.switchCard}>
                <div className={styles.formGroup}>
                  <Label htmlFor="siteName">نام سایت</Label>
                  <Input 
                    type="text" 
                    id="siteName" 
                    defaultValue="پنل مدیریت VPN"
                  />
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="siteUrl">آدرس سایت</Label>
                  <Input 
                    type="url" 
                    id="siteUrl" 
                    defaultValue="https://vpn-panel.com"
                  />
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="timezone">منطقه زمانی</Label>
                  <Select defaultValue="asia-tehran">
                    <SelectTrigger id="timezone">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="asia-tehran">Asia/Tehran (UTC+3:30)</SelectItem>
                      <SelectItem value="utc">UTC (UTC+0)</SelectItem>
                      <SelectItem value="asia-dubai">Asia/Dubai (UTC+4)</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="language">زبان پیش‌فرض</Label>
                  <Select defaultValue="fa">
                    <SelectTrigger id="language">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fa">فارسی</SelectItem>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="ar">العربية</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <Separator />

                <div className={styles.switchRow}>
                  <div>
                    <h4>حالت تعمیرات</h4>
                    <p>غیرفعال کردن موقت دسترسی کاربران</p>
                  </div>
                  <Switch 
                    checked={maintenanceMode} 
                    onCheckedChange={setMaintenanceMode}
                  />
                </div>

                <Separator />

                <div className={styles.systemActions}>
                  <h4>عملیات سیستم</h4>
                  <div className={styles.buttonGrid}>
                    <Button variant="outline">
                      <RefreshCw size={18} />
                      پاک کردن کش
                    </Button>
                    <Button variant="outline">
                      <Database size={18} />
                      بهینه‌سازی دیتابیس
                    </Button>
                    <Button variant="outline">
                      <Globe size={18} />
                      تست اتصال به اینترنت
                    </Button>
                    <Button variant="destructive">
                      <Zap size={18} />
                      راه‌اندازی مجدد سیستم
                    </Button>
                  </div>
                </div>

                <Separator />

                <div className={styles.systemInfo}>
                  <h4>اطلاعات سیستم</h4>
                  <div className={styles.infoGrid}>
                    <div className={styles.infoItem}>
                      <span>نسخه PHP:</span>
                      <strong>8.2.10</strong>
                    </div>
                    <div className={styles.infoItem}>
                      <span>نسخه MySQL:</span>
                      <strong>8.0.34</strong>
                    </div>
                    <div className={styles.infoItem}>
                      <span>نسخه سیستم:</span>
                      <strong>v2.5.3</strong>
                    </div>
                    <div className={styles.infoItem}>
                      <span>حجم دیتابیس:</span>
                      <strong>145.2 MB</strong>
                    </div>
                    <div className={styles.infoItem}>
                      <span>آخرین بک‌آپ:</span>
                      <strong>1402/10/25</strong>
                    </div>
                    <div className={styles.infoItem}>
                      <span>وضعیت سرور:</span>
                      <strong className={styles.statusOnline}>آنلاین</strong>
                    </div>
                  </div>
                </div>

                <Button type="submit" className={styles.saveButton}>
                  <Save size={18} />
                  ذخیره تغییرات
                </Button>
              </CardContent>
            </Card>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}