import { useState } from 'react';
import type { Route } from './+types/admin-settings';
import { Card, CardHeader, CardTitle, CardContent } from '~/components/ui/card/card';
import { Button } from '~/components/ui/button/button';
import { Input } from '~/components/ui/input/input';
import { Label } from '~/components/ui/label/label';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs/tabs';
import { Switch } from '~/components/ui/switch/switch';
import { Textarea } from '~/components/ui/textarea/textarea';
import { 
  Settings, 
  CreditCard, 
  Mail, 
  Image, 
  Key,
  Palette,
  Bell,
  Shield,
  Server,
  Save
} from 'lucide-react';
import styles from './admin-settings.module.css';

export const meta: Route.MetaFunction = () => {
  return [{ title: 'Admin Settings' }];
};

export default function AdminSettings() {
  const [settings, setSettings] = useState({
    // Payment Gateway
    zarinpalMerchantId: '',
    zarinpalCallbackUrl: '',
    idpayApiKey: '',
    idpayCallbackUrl: '',
    nextpayApiKey: '',
    
    // Email Settings
    smtpHost: 'smtp.gmail.com',
    smtpPort: '587',
    smtpUsername: '',
    smtpPassword: '',
    smtpFromEmail: '',
    smtpFromName: 'VPN Panel',
    
    // SMS Settings
    smsProvider: 'kavenegar',
    smsApiKey: '',
    smsTemplateId: '',
    
    // Branding
    siteName: 'VPN Panel',
    siteDescription: 'سرویس VPN پرسرعت و امن',
    logoUrl: '',
    faviconUrl: '',
    primaryColor: '#3b82f6',
    accentColor: '#8b5cf6',
    
    // Notifications
    emailNotifications: true,
    smsNotifications: false,
    pushNotifications: true,
    
    // API Keys
    v2rayPanelUrl: '',
    v2rayPanelApiKey: '',
    analyticsTrackingId: '',
    
    // Security
    enableCaptcha: true,
    captchaSecretKey: '',
    maxLoginAttempts: 5,
    sessionTimeout: 30,
    
    // General
    maintenanceMode: false,
    maintenanceMessage: 'سایت در حال بروزرسانی است',
    defaultLanguage: 'fa',
    timezone: 'Asia/Tehran'
  });

  const updateSetting = (key: string, value: any) => {
    setSettings(prev => ({ ...prev, [key]: value }));
  };

  const saveSettings = () => {
    console.log('Saving settings:', settings);
    // در واقعیت باید به API ارسال شود
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div>
          <h1 className={styles.title}>
            <Settings size={28} />
            تنظیمات پیشرفته
          </h1>
          <p className={styles.subtitle}>پیکربندی کامل سیستم</p>
        </div>
        <Button onClick={saveSettings}>
          <Save size={16} />
          ذخیره تمام تنظیمات
        </Button>
      </div>

      <Tabs defaultValue="payment" className={styles.tabs}>
        <TabsList className={styles.tabsList}>
          <TabsTrigger value="payment">
            <CreditCard size={16} />
            درگاه پرداخت
          </TabsTrigger>
          <TabsTrigger value="email">
            <Mail size={16} />
            ایمیل و SMS
          </TabsTrigger>
          <TabsTrigger value="branding">
            <Image size={16} />
            برندینگ
          </TabsTrigger>
          <TabsTrigger value="api">
            <Key size={16} />
            API Keys
          </TabsTrigger>
          <TabsTrigger value="security">
            <Shield size={16} />
            امنیت
          </TabsTrigger>
          <TabsTrigger value="general">
            <Server size={16} />
            عمومی
          </TabsTrigger>
        </TabsList>

        {/* Payment Gateway Settings */}
        <TabsContent value="payment">
          <div className={styles.cardsGrid}>
            <Card>
              <CardHeader>
                <CardTitle>زرین‌پال</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.settingsForm}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="zarinpal-merchant">Merchant ID</Label>
                    <Input
                      id="zarinpal-merchant"
                      value={settings.zarinpalMerchantId}
                      onChange={(e) => updateSetting('zarinpalMerchantId', e.target.value)}
                      placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="zarinpal-callback">Callback URL</Label>
                    <Input
                      id="zarinpal-callback"
                      value={settings.zarinpalCallbackUrl}
                      onChange={(e) => updateSetting('zarinpalCallbackUrl', e.target.value)}
                      placeholder="https://yourdomain.com/payment/callback"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>آیدی‌پی</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.settingsForm}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="idpay-key">API Key</Label>
                    <Input
                      id="idpay-key"
                      value={settings.idpayApiKey}
                      onChange={(e) => updateSetting('idpayApiKey', e.target.value)}
                      type="password"
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="idpay-callback">Callback URL</Label>
                    <Input
                      id="idpay-callback"
                      value={settings.idpayCallbackUrl}
                      onChange={(e) => updateSetting('idpayCallbackUrl', e.target.value)}
                      placeholder="https://yourdomain.com/payment/idpay"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>نکست‌پی</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.settingsForm}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="nextpay-key">API Key</Label>
                    <Input
                      id="nextpay-key"
                      value={settings.nextpayApiKey}
                      onChange={(e) => updateSetting('nextpayApiKey', e.target.value)}
                      type="password"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Email & SMS Settings */}
        <TabsContent value="email">
          <div className={styles.cardsGrid}>
            <Card>
              <CardHeader>
                <CardTitle>تنظیمات SMTP</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.settingsForm}>
                  <div className={styles.formRow}>
                    <div className={styles.formGroup}>
                      <Label htmlFor="smtp-host">SMTP Host</Label>
                      <Input
                        id="smtp-host"
                        value={settings.smtpHost}
                        onChange={(e) => updateSetting('smtpHost', e.target.value)}
                      />
                    </div>
                    <div className={styles.formGroup}>
                      <Label htmlFor="smtp-port">Port</Label>
                      <Input
                        id="smtp-port"
                        value={settings.smtpPort}
                        onChange={(e) => updateSetting('smtpPort', e.target.value)}
                      />
                    </div>
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="smtp-username">Username</Label>
                    <Input
                      id="smtp-username"
                      value={settings.smtpUsername}
                      onChange={(e) => updateSetting('smtpUsername', e.target.value)}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="smtp-password">Password</Label>
                    <Input
                      id="smtp-password"
                      type="password"
                      value={settings.smtpPassword}
                      onChange={(e) => updateSetting('smtpPassword', e.target.value)}
                    />
                  </div>
                  <div className={styles.formRow}>
                    <div className={styles.formGroup}>
                      <Label htmlFor="smtp-from-email">From Email</Label>
                      <Input
                        id="smtp-from-email"
                        type="email"
                        value={settings.smtpFromEmail}
                        onChange={(e) => updateSetting('smtpFromEmail', e.target.value)}
                      />
                    </div>
                    <div className={styles.formGroup}>
                      <Label htmlFor="smtp-from-name">From Name</Label>
                      <Input
                        id="smtp-from-name"
                        value={settings.smtpFromName}
                        onChange={(e) => updateSetting('smtpFromName', e.target.value)}
                      />
                    </div>
                  </div>
                  <Button variant="outline">تست ارسال ایمیل</Button>
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>تنظیمات SMS</CardTitle>
              </CardHeader>
              <CardContent>
                <div className={styles.settingsForm}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="sms-provider">سرویس‌دهنده</Label>
                    <Input
                      id="sms-provider"
                      value={settings.smsProvider}
                      onChange={(e) => updateSetting('smsProvider', e.target.value)}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="sms-key">API Key</Label>
                    <Input
                      id="sms-key"
                      type="password"
                      value={settings.smsApiKey}
                      onChange={(e) => updateSetting('smsApiKey', e.target.value)}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="sms-template">Template ID</Label>
                    <Input
                      id="sms-template"
                      value={settings.smsTemplateId}
                      onChange={(e) => updateSetting('smsTemplateId', e.target.value)}
                    />
                  </div>
                  <Button variant="outline">تست ارسال پیامک</Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Branding Settings */}
        <TabsContent value="branding">
          <Card>
            <CardHeader>
              <CardTitle>برندینگ و ظاهر سایت</CardTitle>
            </CardHeader>
            <CardContent>
              <div className={styles.settingsForm}>
                <div className={styles.formRow}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="site-name">نام سایت</Label>
                    <Input
                      id="site-name"
                      value={settings.siteName}
                      onChange={(e) => updateSetting('siteName', e.target.value)}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="site-desc">توضیحات سایت</Label>
                    <Input
                      id="site-desc"
                      value={settings.siteDescription}
                      onChange={(e) => updateSetting('siteDescription', e.target.value)}
                    />
                  </div>
                </div>

                <div className={styles.formRow}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="logo-url">URL لوگو</Label>
                    <Input
                      id="logo-url"
                      value={settings.logoUrl}
                      onChange={(e) => updateSetting('logoUrl', e.target.value)}
                      placeholder="https://example.com/logo.png"
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="favicon-url">URL Favicon</Label>
                    <Input
                      id="favicon-url"
                      value={settings.faviconUrl}
                      onChange={(e) => updateSetting('faviconUrl', e.target.value)}
                      placeholder="https://example.com/favicon.ico"
                    />
                  </div>
                </div>

                <div className={styles.formRow}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="primary-color">
                      <Palette size={14} />
                      رنگ اصلی
                    </Label>
                    <div className={styles.colorInput}>
                      <Input
                        id="primary-color"
                        type="color"
                        value={settings.primaryColor}
                        onChange={(e) => updateSetting('primaryColor', e.target.value)}
                        className={styles.colorPicker}
                      />
                      <Input
                        value={settings.primaryColor}
                        onChange={(e) => updateSetting('primaryColor', e.target.value)}
                      />
                    </div>
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="accent-color">
                      <Palette size={14} />
                      رنگ تاکید
                    </Label>
                    <div className={styles.colorInput}>
                      <Input
                        id="accent-color"
                        type="color"
                        value={settings.accentColor}
                        onChange={(e) => updateSetting('accentColor', e.target.value)}
                        className={styles.colorPicker}
                      />
                      <Input
                        value={settings.accentColor}
                        onChange={(e) => updateSetting('accentColor', e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* API Keys */}
        <TabsContent value="api">
          <Card>
            <CardHeader>
              <CardTitle>کلیدهای API</CardTitle>
            </CardHeader>
            <CardContent>
              <div className={styles.settingsForm}>
                <div className={styles.formGroup}>
                  <Label htmlFor="v2ray-url">V2Ray Panel URL</Label>
                  <Input
                    id="v2ray-url"
                    value={settings.v2rayPanelUrl}
                    onChange={(e) => updateSetting('v2rayPanelUrl', e.target.value)}
                    placeholder="https://panel.example.com"
                  />
                </div>
                <div className={styles.formGroup}>
                  <Label htmlFor="v2ray-key">V2Ray API Key</Label>
                  <Input
                    id="v2ray-key"
                    type="password"
                    value={settings.v2rayPanelApiKey}
                    onChange={(e) => updateSetting('v2rayPanelApiKey', e.target.value)}
                  />
                </div>
                <div className={styles.formGroup}>
                  <Label htmlFor="analytics-id">Google Analytics Tracking ID</Label>
                  <Input
                    id="analytics-id"
                    value={settings.analyticsTrackingId}
                    onChange={(e) => updateSetting('analyticsTrackingId', e.target.value)}
                    placeholder="G-XXXXXXXXXX"
                  />
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Security Settings */}
        <TabsContent value="security">
          <Card>
            <CardHeader>
              <CardTitle>تنظیمات امنیتی</CardTitle>
            </CardHeader>
            <CardContent>
              <div className={styles.settingsForm}>
                <div className={styles.settingItem}>
                  <div>
                    <h4>فعال‌سازی کپچا</h4>
                    <p>استفاده از Google reCAPTCHA برای محافظت در برابر ربات‌ها</p>
                  </div>
                  <Switch
                    checked={settings.enableCaptcha}
                    onCheckedChange={(checked) => updateSetting('enableCaptcha', checked)}
                  />
                </div>

                {settings.enableCaptcha && (
                  <div className={styles.formGroup}>
                    <Label htmlFor="captcha-key">reCAPTCHA Secret Key</Label>
                    <Input
                      id="captcha-key"
                      type="password"
                      value={settings.captchaSecretKey}
                      onChange={(e) => updateSetting('captchaSecretKey', e.target.value)}
                    />
                  </div>
                )}

                <div className={styles.formRow}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="max-login">حداکثر تلاش ورود ناموفق</Label>
                    <Input
                      id="max-login"
                      type="number"
                      value={settings.maxLoginAttempts}
                      onChange={(e) => updateSetting('maxLoginAttempts', Number(e.target.value))}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="session-timeout">مدت اعتبار نشست (دقیقه)</Label>
                    <Input
                      id="session-timeout"
                      type="number"
                      value={settings.sessionTimeout}
                      onChange={(e) => updateSetting('sessionTimeout', Number(e.target.value))}
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* General Settings */}
        <TabsContent value="general">
          <Card>
            <CardHeader>
              <CardTitle>تنظیمات عمومی</CardTitle>
            </CardHeader>
            <CardContent>
              <div className={styles.settingsForm}>
                <div className={styles.settingItem}>
                  <div>
                    <h4>حالت تعمیرات</h4>
                    <p>فعال‌سازی حالت نگهداری سایت</p>
                  </div>
                  <Switch
                    checked={settings.maintenanceMode}
                    onCheckedChange={(checked) => updateSetting('maintenanceMode', checked)}
                  />
                </div>

                {settings.maintenanceMode && (
                  <div className={styles.formGroup}>
                    <Label htmlFor="maintenance-msg">پیام حالت تعمیرات</Label>
                    <Textarea
                      id="maintenance-msg"
                      value={settings.maintenanceMessage}
                      onChange={(e) => updateSetting('maintenanceMessage', e.target.value)}
                      rows={3}
                    />
                  </div>
                )}

                <div className={styles.formRow}>
                  <div className={styles.formGroup}>
                    <Label htmlFor="language">زبان پیش‌فرض</Label>
                    <Input
                      id="language"
                      value={settings.defaultLanguage}
                      onChange={(e) => updateSetting('defaultLanguage', e.target.value)}
                    />
                  </div>
                  <div className={styles.formGroup}>
                    <Label htmlFor="timezone">منطقه زمانی</Label>
                    <Input
                      id="timezone"
                      value={settings.timezone}
                      onChange={(e) => updateSetting('timezone', e.target.value)}
                    />
                  </div>
                </div>

                <div className={styles.notificationSettings}>
                  <h4>روش‌های اطلاع‌رسانی</h4>
                  <div className={styles.settingItem}>
                    <div>
                      <p>اعلان ایمیل</p>
                    </div>
                    <Switch
                      checked={settings.emailNotifications}
                      onCheckedChange={(checked) => updateSetting('emailNotifications', checked)}
                    />
                  </div>
                  <div className={styles.settingItem}>
                    <div>
                      <p>اعلان پیامکی</p>
                    </div>
                    <Switch
                      checked={settings.smsNotifications}
                      onCheckedChange={(checked) => updateSetting('smsNotifications', checked)}
                    />
                  </div>
                  <div className={styles.settingItem}>
                    <div>
                      <p>Push Notification</p>
                    </div>
                    <Switch
                      checked={settings.pushNotifications}
                      onCheckedChange={(checked) => updateSetting('pushNotifications', checked)}
                    />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}