import { Check, X, Save, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { useDataSources } from "@/hooks/useConfig"
import { DataSourceConfig, DataSourceProvider } from "@/types/config"
import { Badge } from "@/components/ui/badge"

export function DataSourceTab() {
  const { data: dataSources, isLoading } = useDataSources();

  if (isLoading) {
    return <div>Loading data sources...</div>;
  }

  // We want to show all supported providers, even if not yet in config
  const supportedProviders = [
    { type: DataSourceProvider.Tushare, name: "Tushare Pro", desc: "中国股市数据 (A股/港股)" },
    { type: DataSourceProvider.Finnhub, name: "Finnhub", desc: "全球美股与外汇数据" },
    { type: DataSourceProvider.Alphavantage, name: "Alpha Vantage", desc: "技术指标与外汇" },
    { type: DataSourceProvider.Yfinance, name: "Yahoo Finance", desc: "基础免费数据源 (非官方)" },
  ];

  return (
    <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
      {supportedProviders.map(p => {
        // Find existing config or create default
        // In reality, the key in the map might not match the enum exactly (e.g. "tushare_main" vs "Tushare")
        // But for this mock, let's assume we search by provider type
        const configEntry = dataSources ? Object.values(dataSources).find(d => d.provider === p.type) : undefined;
        
        const config = configEntry || {
            provider: p.type,
            enabled: false,
            api_key: "",
            api_url: ""
        } as DataSourceConfig;

        return (
            <DataSourceCard key={p.type} meta={p} config={config} />
        )
      })}
    </div>
  )
}

function DataSourceCard({ meta, config }: { meta: { type: DataSourceProvider, name: string, desc: string }, config: DataSourceConfig }) {
    const isEnabled = config.enabled;

    return (
        <Card className={isEnabled ? "border-primary/50 bg-accent/5" : "opacity-80"}>
            <CardHeader className="flex flex-row items-start justify-between pb-2">
                <div className="space-y-1">
                    <CardTitle className="text-xl flex items-center gap-2">
                        {meta.name}
                        {isEnabled ? 
                            <Badge variant="default" className="bg-green-600 hover:bg-green-600 h-5 text-[10px]">Active</Badge> : 
                            <Badge variant="outline" className="text-muted-foreground h-5 text-[10px]">Inactive</Badge>
                        }
                    </CardTitle>
                    <CardDescription>{meta.desc}</CardDescription>
                </div>
                <Switch checked={isEnabled} />
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="space-y-2">
                    <Label>API Token / Key</Label>
                    <Input 
                        type="password" 
                        value={config.api_key || ""} 
                        placeholder={isEnabled ? "configured" : "Enter API Key"}
                        disabled={!isEnabled} // Just for visual logic
                    />
                </div>
                {meta.type === DataSourceProvider.Tushare && (
                    <div className="space-y-2">
                         <Label>API Endpoint</Label>
                         <Input value={config.api_url || "http://api.tushare.pro"} disabled={!isEnabled} />
                    </div>
                )}
            </CardContent>
            <CardFooter className="flex justify-between pt-0">
                <Button variant="outline" size="sm" disabled={!isEnabled}>
                    <AlertCircle className="mr-2 h-4 w-4" /> 测试连接
                </Button>
                <Button size="sm" disabled>保存</Button>
            </CardFooter>
        </Card>
    )
}
