"use client"

import { useEffect, useState } from "react"
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Database } from "lucide-react"
import { getAvailableSources } from "@/lib/api"
import type { DataSourceInfo } from "@/lib/types"

interface DataSourceSelectorProps {
    market: string
    selectedSource: string
    onSourceChange: (source: string) => void
    disabled?: boolean
    showLabel?: boolean
}

export function DataSourceSelector({
    market,
    selectedSource,
    onSourceChange,
    disabled = false,
    showLabel = true
}: DataSourceSelectorProps) {
    const [sources, setSources] = useState<DataSourceInfo[]>([])
    const [loading, setLoading] = useState(false)

    useEffect(() => {
        async function loadSources() {
            if (!market) return

            setLoading(true)
            try {
                const data = await getAvailableSources(market)
                setSources(data.sources.filter(s => s.available))

                // 如果当前选中的源不可用，自动选择第一个可用的
                const availableSources = data.sources.filter(s => s.available)
                if (availableSources.length > 0 && !availableSources.find(s => s.source === selectedSource)) {
                    onSourceChange(availableSources[0].source)
                }
            } catch (error) {
                console.error("Failed to load data sources:", error)
            } finally {
                setLoading(false)
            }
        }

        loadSources()
    }, [market])

    if (sources.length === 0) {
        return null
    }

    return (
        <div className="space-y-2">
            {showLabel && (
                <div className="flex items-center gap-2">
                    <Database className="h-4 w-4 text-muted-foreground" />
                    <Label>数据源</Label>
                </div>
            )}
            <Select
                value={selectedSource}
                onValueChange={onSourceChange}
                disabled={disabled || loading}
            >
                <SelectTrigger>
                    <SelectValue placeholder="选择数据源" />
                </SelectTrigger>
                <SelectContent portal={false}>
                    {sources.map((source) => (
                        <SelectItem key={source.source} value={source.source}>
                            {source.source}
                        </SelectItem>
                    ))}
                </SelectContent>
            </Select>
            {
                sources.length === 1 && (
                    <p className="text-xs text-muted-foreground">
                        该市场仅支持 {sources[0].source} 数据源
                    </p>
                )
            }
        </div >
    )
}