/**
 * API Settings Dialog Component
 */
"use client";

import { useState, useEffect } from "react";
import { Settings, Cloud, CloudOff } from "lucide-react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  getApiSettingsAsync,
  saveApiSettingsAsync,
  clearApiSettings,
  migrateToEncrypted,
  type ApiSettings,
  DEFAULT_API_SETTINGS,
} from "@/lib/storage";
import { useAuth } from "@/contexts/auth-context";
import { getCloudSettings, saveCloudSettings, isCloudSyncEnabled } from "@/lib/user-api";

const formSchema = z.object({
  // All API keys are optional - users only need the ones for their selected models
  openai_api_key: z.string().optional().or(z.literal("")),
  
  // Stock market data APIs
  alpha_vantage_api_key: z.string().optional().or(z.literal("")),  // 美股基本面資料
  finmind_api_key: z.string().optional().or(z.literal("")),  // 台灣股市資料
  
  // LLM Providers
  anthropic_api_key: z.string().optional().or(z.literal("")),
  google_api_key: z.string().optional().or(z.literal("")),
  grok_api_key: z.string().optional().or(z.literal("")),
  deepseek_api_key: z.string().optional().or(z.literal("")),
  qwen_api_key: z.string().optional().or(z.literal("")),
  
  // Custom endpoint
  custom_base_url: z.string().optional().or(z.literal("")),
  custom_api_key: z.string().optional().or(z.literal("")),
});

type FormValues = z.infer<typeof formSchema>;

export function ApiSettingsDialog() {
  const [open, setOpen] = useState(false);
  const [saveSuccess, setSaveSuccess] = useState(false);
  const [loading, setLoading] = useState(false);
  const [syncStatus, setSyncStatus] = useState<"local" | "cloud" | "syncing">("local");
  const { isAuthenticated } = useAuth();

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: DEFAULT_API_SETTINGS,
  });

  // Load and decrypt settings when dialog opens
  useEffect(() => {
    if (open) {
      setLoading(true);
      setSaveSuccess(false);
      
      const loadSettings = async () => {
        try {
          // First try to migrate legacy settings
          await migrateToEncrypted();
          
          // If authenticated, try to load from cloud first
          if (isAuthenticated && isCloudSyncEnabled()) {
            setSyncStatus("syncing");
            const cloudSettings = await getCloudSettings();
            if (cloudSettings) {
              form.reset(cloudSettings);
              setSyncStatus("cloud");
              return;
            }
          }
          
          // Fall back to local storage
          const localSettings = await getApiSettingsAsync();
          form.reset(localSettings);
          setSyncStatus(isAuthenticated ? "cloud" : "local");
        } catch (error) {
          console.error("Failed to load settings:", error);
          setSyncStatus("local");
        } finally {
          setLoading(false);
        }
      };
      
      loadSettings();
    }
  }, [open, form, isAuthenticated]);

  const onSubmit = async (values: FormValues) => {
    setLoading(true);
    try {
      // Encrypt and save settings locally
      await saveApiSettingsAsync(values as ApiSettings);
      
      // If authenticated, also save to cloud
      if (isAuthenticated && isCloudSyncEnabled()) {
        setSyncStatus("syncing");
        const cloudSaved = await saveCloudSettings(values as ApiSettings);
        setSyncStatus(cloudSaved ? "cloud" : "local");
      }
      
      setSaveSuccess(true);
      setTimeout(() => {
        setSaveSuccess(false);
        setOpen(false);
      }, 1500);
    } catch (error) {
      console.error("Failed to save settings:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleClear = () => {
    clearApiSettings();
    form.reset(DEFAULT_API_SETTINGS);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {/* @ts-ignore - React 19 type compatibility issue with Radix UI */}
      <DialogTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="text-white hover:bg-white/20"
          title="API 設定"
        >
          <Settings className="h-5 w-5" />
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>API 配置</DialogTitle>
          <DialogDescription>
            設定您的 API 金鑰。這些資訊會以加密形式儲存在瀏覽器中。
            <span className="block mt-1 text-xs text-green-600 dark:text-green-400">
              🔒 已啟用 AES-256-GCM 加密保護
            </span>
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            {/* 注意事項 */}
            <div className="space-y-2">
              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 text-blue-800 dark:text-blue-300 text-sm">
                💡 僅需填寫您選擇的模型供應商的 API。例如，若使用 Claude 模型，只需填寫 Claude API。
              </div>
            </div>

            {/* Stock Market Data APIs Section */}
            <div className="space-y-4 border-t pt-4">
              <h3 className="text-lg font-semibold text-muted-foreground">
                股市資料 API（依分析市場選擇填寫）
              </h3>

              {/* FinMind API Key - Taiwan Stocks */}
              <FormField
                control={form.control}
                name="finmind_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>FinMind API Token（台股）</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="輸入 FinMind Token"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      用於獲取台灣股市資料（在 finmindtrade.com 註冊取得）
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Alpha Vantage API Key - US Stocks */}
              <FormField
                control={form.control}
                name="alpha_vantage_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Alpha Vantage API Key（美股）</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="輸入 Alpha Vantage API Key"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      用於獲取美股基本面數據（分析美股時建議填寫）
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* LLM Providers Section */}
            <div className="space-y-4 border-t pt-4">
              <h3 className="text-lg font-semibold text-muted-foreground">
                LLM 模型供應商（依選擇的模型填寫）
              </h3>

              {/* OpenAI API Key */}
              <FormField
                control={form.control}
                name="openai_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>OpenAI API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>
                      用於 OpenAI 模型（GPT-4, GPT-5, o4 等）及 OpenAI 嵌入式模型
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="anthropic_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Anthropic API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>用於 Claude 模型</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Google API Key */}
              <FormField
                control={form.control}
                name="google_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Google API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="..." {...field} />
                    </FormControl>
                    <FormDescription>用於 Gemini 模型</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Grok API Key */}
              <FormField
                control={form.control}
                name="grok_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Grok (xAI) API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="xai-..." {...field} />
                    </FormControl>
                    <FormDescription>用於 Grok 模型</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* DeepSeek API Key */}
              <FormField
                control={form.control}
                name="deepseek_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>DeepSeek API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>用於 DeepSeek 模型</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Qwen API Key */}
              <FormField
                control={form.control}
                name="qwen_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Qwen (Alibaba) API Key</FormLabel>
                    <FormControl>
                      <Input type="password" placeholder="sk-..." {...field} />
                    </FormControl>
                    <FormDescription>用於 Qwen 模型</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {/* Custom Endpoint Section */}
            <div className="space-y-4 border-t pt-4">
              <h3 className="text-lg font-semibold text-muted-foreground">
                自訂端點（進階選項）
              </h3>

              {/* Custom Base URL */}
              <FormField
                control={form.control}
                name="custom_base_url"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>自訂 Base URL</FormLabel>
                    <FormControl>
                      <Input
                        type="text"
                        placeholder="https://your-custom-endpoint.com/v1"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      若設定此項，將覆蓋所有模型的預設端點
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* Custom API Key */}
              <FormField
                control={form.control}
                name="custom_api_key"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>自訂端點 API Key</FormLabel>
                    <FormControl>
                      <Input
                        type="password"
                        placeholder="輸入自訂端點的 API Key"
                        {...field}
                      />
                    </FormControl>
                    <FormDescription>
                      配合自訂 Base URL 使用的 API Key
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            {saveSuccess && (
              <div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-3 text-green-800 dark:text-green-300 text-sm">
                ✓ 設定已成功儲存
              </div>
            )}

            <div className="flex gap-2 pt-4">
              <Button type="submit" className="flex-1" disabled={loading}>
                {loading ? "處理中..." : "儲存設定"}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={handleClear}
                className="flex-1"
              >
                清除設定
              </Button>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}