import { useState, useEffect, useCallback } from 'react'
import {
    Users,
    Play,
    Square,
    RefreshCw,
    Settings,
    CheckCircle,
    Clock,
    Upload,
    Loader2,
    AlertTriangle,
} from 'lucide-react'
import { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
import { useConfig } from '../hooks/useConfig'

interface Owner {
    email: string
    password: string
    token: string
}

interface TeamResult {
    team_index: number
    owner_email: string
    team_id: string
    registered: number
    added_to_s2a: number
    member_emails: string[]
    errors: string[]
    duration_ms: number
}

interface ProcessStatus {
    running: boolean
    started_at: string
    total_teams: number
    completed: number
    results: TeamResult[]
    elapsed_ms: number
}

export default function TeamProcess() {
    const { config } = useConfig()
    const [owners, setOwners] = useState<Owner[]>([])
    const [status, setStatus] = useState<ProcessStatus | null>(null)
    const [loading, setLoading] = useState(false)
    const [polling, setPolling] = useState(false)

    // 配置
    const [membersPerTeam, setMembersPerTeam] = useState(4)
    const [concurrentTeams, setConcurrentTeams] = useState(2)
    const [browserType, setBrowserType] = useState<'chromedp' | 'rod'>('chromedp')
    const [headless, setHeadless] = useState(true)
    const [proxy, setProxy] = useState('')

    const backendUrl = config.s2a.apiBase.replace(/\/api.*$/, '').replace(/:8080/, ':8088')

    // 获取状态
    const fetchStatus = useCallback(async () => {
        try {
            const res = await fetch(`${backendUrl}/api/team/status`)
            if (res.ok) {
                const data = await res.json()
                if (data.code === 0) {
                    setStatus(data.data)
                    if (!data.data.running) {
                        setPolling(false)
                    }
                }
            }
        } catch (e) {
            console.error('获取状态失败:', e)
        }
    }, [backendUrl])

    // 轮询状态
    useEffect(() => {
        if (polling) {
            const interval = setInterval(fetchStatus, 2000)
            return () => clearInterval(interval)
        }
    }, [polling, fetchStatus])

    // 初始化
    useEffect(() => {
        fetchStatus()
    }, [fetchStatus])

    // 上传账号文件
    const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0]
        if (!file) return

        try {
            const text = await file.text()
            const data = JSON.parse(text)
            const parsed = Array.isArray(data) ? data : [data]

            const validOwners = parsed.filter((a: Record<string, unknown>) =>
                (a.email || a.account) && a.password && (a.token || a.access_token)
            ).map((a: Record<string, unknown>) => ({
                email: (a.email || a.account) as string,
                password: a.password as string,
                token: (a.token || a.access_token) as string,
            }))

            setOwners(validOwners)
            setConcurrentTeams(Math.min(validOwners.length, 2))
        } catch (err) {
            alert('文件解析失败，请确保是有效的 JSON 格式')
        }
    }

    // 启动处理
    const handleStart = async () => {
        if (owners.length === 0) {
            alert('请先上传账号文件')
            return
        }

        setLoading(true)
        try {
            const res = await fetch(`${backendUrl}/api/team/process`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    owners: owners.slice(0, concurrentTeams),
                    members_per_team: membersPerTeam,
                    concurrent_teams: concurrentTeams,
                    browser_type: browserType,
                    headless,
                    proxy,
                }),
            })

            if (res.ok) {
                setPolling(true)
                fetchStatus()
            } else {
                const data = await res.json()
                alert(data.message || '启动失败')
            }
        } catch (e) {
            console.error('启动失败:', e)
            alert('启动失败')
        }
        setLoading(false)
    }

    // 停止处理
    const handleStop = async () => {
        try {
            await fetch(`${backendUrl}/api/team/stop`, { method: 'POST' })
            setPolling(false)
            fetchStatus()
        } catch (e) {
            console.error('停止失败:', e)
        }
    }

    const isRunning = status?.running

    // 计算统计
    const totalRegistered = status?.results.reduce((sum, r) => sum + r.registered, 0) || 0
    const totalS2A = status?.results.reduce((sum, r) => sum + r.added_to_s2a, 0) || 0
    const expectedTotal = (status?.total_teams || 0) * membersPerTeam

    return (
        <div className="space-y-6">
            {/* Header */}
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                        Team 批量处理
                    </h1>
                    <p className="text-sm text-slate-500 dark:text-slate-400">
                        多 Team 并发注册成员并入库 S2A
                    </p>
                </div>
                <div className="flex items-center gap-2">
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={fetchStatus}
                        icon={<RefreshCw className={`h-4 w-4 ${polling ? 'animate-spin' : ''}`} />}
                    >
                        刷新
                    </Button>
                </div>
            </div>

            {/* 状态概览 */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card className="stat-card card-hover">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-slate-500 dark:text-slate-400">运行状态</p>
                                <p className={`text-lg font-bold ${isRunning ? 'text-green-500' : 'text-slate-500'}`}>
                                    {isRunning ? '运行中' : '空闲'}
                                </p>
                            </div>
                            <div className={`h-12 w-12 rounded-xl flex items-center justify-center ${isRunning ? 'bg-green-100 dark:bg-green-900/30' : 'bg-slate-100 dark:bg-slate-800'
                                }`}>
                                {isRunning ? (
                                    <Loader2 className="h-6 w-6 text-green-500 animate-spin" />
                                ) : (
                                    <Clock className="h-6 w-6 text-slate-400" />
                                )}
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card className="stat-card card-hover">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-slate-500 dark:text-slate-400">进度</p>
                                <p className="text-lg font-bold text-blue-500">
                                    {status?.completed || 0} / {status?.total_teams || '-'}
                                </p>
                            </div>
                            <div className="h-12 w-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                                <Users className="h-6 w-6 text-blue-500" />
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card className="stat-card card-hover">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-slate-500 dark:text-slate-400">已注册</p>
                                <p className="text-lg font-bold text-green-500">
                                    {totalRegistered} / {expectedTotal || '-'}
                                </p>
                            </div>
                            <div className="h-12 w-12 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                                <CheckCircle className="h-6 w-6 text-green-500" />
                            </div>
                        </div>
                    </CardContent>
                </Card>

                <Card className="stat-card card-hover">
                    <CardContent className="pt-6">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-slate-500 dark:text-slate-400">已入库</p>
                                <p className="text-lg font-bold text-purple-500">{totalS2A}</p>
                            </div>
                            <div className="h-12 w-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                                <Settings className="h-6 w-6 text-purple-500" />
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* 配置面板 */}
                <Card className="glass-card">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Settings className="h-5 w-5 text-blue-500" />
                            处理配置
                        </CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        {/* 账号文件上传 */}
                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                                Owner 账号文件
                            </label>
                            <div className="flex items-center gap-2">
                                <label className="flex-1 flex items-center justify-center gap-2 px-4 py-3 border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg cursor-pointer hover:border-blue-500 transition-colors">
                                    <Upload className="h-5 w-5 text-slate-400" />
                                    <span className="text-sm text-slate-500">
                                        {owners.length > 0 ? `已加载 ${owners.length} 个账号` : '选择 JSON 文件'}
                                    </span>
                                    <input
                                        type="file"
                                        accept=".json"
                                        onChange={handleFileUpload}
                                        className="hidden"
                                        disabled={isRunning}
                                    />
                                </label>
                            </div>
                        </div>

                        <Input
                            label="每个 Team 成员数"
                            type="number"
                            min={1}
                            max={10}
                            value={membersPerTeam}
                            onChange={(e) => setMembersPerTeam(Number(e.target.value))}
                            disabled={isRunning}
                        />

                        <Input
                            label="并发 Team 数"
                            type="number"
                            min={1}
                            max={Math.max(1, owners.length)}
                            value={concurrentTeams}
                            onChange={(e) => setConcurrentTeams(Number(e.target.value))}
                            disabled={isRunning}
                            hint={`最多 ${owners.length} 个`}
                        />

                        <div>
                            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
                                浏览器自动化
                            </label>
                            <div className="flex gap-2">
                                <button
                                    onClick={() => setBrowserType('chromedp')}
                                    disabled={isRunning}
                                    className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${browserType === 'chromedp'
                                        ? 'bg-blue-500 text-white'
                                        : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200'
                                        }`}
                                >
                                    Chromedp (推荐)
                                </button>
                                <button
                                    onClick={() => setBrowserType('rod')}
                                    disabled={isRunning}
                                    className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${browserType === 'rod'
                                        ? 'bg-blue-500 text-white'
                                        : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200'
                                        }`}
                                >
                                    Rod
                                </button>
                            </div>
                        </div>

                        <div className="flex items-center gap-3">
                            <input
                                type="checkbox"
                                id="headless"
                                checked={headless}
                                onChange={(e) => setHeadless(e.target.checked)}
                                disabled={isRunning}
                                className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
                            />
                            <label htmlFor="headless" className="text-sm text-slate-700 dark:text-slate-300">
                                无头模式 (推荐)
                            </label>
                        </div>

                        <Input
                            label="代理地址"
                            placeholder="http://127.0.0.1:7890"
                            value={proxy}
                            onChange={(e) => setProxy(e.target.value)}
                            disabled={isRunning}
                        />

                        <div className="flex gap-2 pt-4">
                            {isRunning ? (
                                <Button
                                    variant="outline"
                                    onClick={handleStop}
                                    className="flex-1"
                                    icon={<Square className="h-4 w-4" />}
                                >
                                    停止
                                </Button>
                            ) : (
                                <Button
                                    onClick={handleStart}
                                    loading={loading}
                                    disabled={owners.length === 0}
                                    className="flex-1"
                                    icon={<Play className="h-4 w-4" />}
                                >
                                    开始处理
                                </Button>
                            )}
                        </div>
                    </CardContent>
                </Card>

                {/* 结果列表 */}
                <Card className="glass-card lg:col-span-2">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Users className="h-5 w-5 text-green-500" />
                            处理结果
                        </CardTitle>
                        {status && status.elapsed_ms > 0 && (
                            <span className="text-sm text-slate-500">
                                耗时: {(status.elapsed_ms / 1000).toFixed(1)}s
                            </span>
                        )}
                    </CardHeader>
                    <CardContent>
                        {status?.results && status.results.length > 0 ? (
                            <div className="space-y-4 max-h-[500px] overflow-y-auto">
                                {status.results.map((result) => (
                                    <div
                                        key={result.team_index}
                                        className="p-4 rounded-lg bg-slate-50 dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700"
                                    >
                                        <div className="flex items-center justify-between mb-3">
                                            <div className="flex items-center gap-2">
                                                <span className="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-600">
                                                    Team {result.team_index}
                                                </span>
                                                <span className="text-sm text-slate-500 truncate max-w-[200px]">
                                                    {result.owner_email}
                                                </span>
                                            </div>
                                            <div className="flex items-center gap-4 text-sm">
                                                <span className="flex items-center gap-1 text-green-600">
                                                    <CheckCircle className="h-4 w-4" />
                                                    注册: {result.registered}
                                                </span>
                                                <span className="flex items-center gap-1 text-purple-600">
                                                    <Settings className="h-4 w-4" />
                                                    入库: {result.added_to_s2a}
                                                </span>
                                            </div>
                                        </div>

                                        {result.member_emails.length > 0 && (
                                            <div className="mb-3">
                                                <p className="text-xs text-slate-500 mb-1">成员邮箱:</p>
                                                <div className="flex flex-wrap gap-1">
                                                    {result.member_emails.map((email, idx) => (
                                                        <span
                                                            key={idx}
                                                            className="px-2 py-0.5 rounded text-xs bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"
                                                        >
                                                            {email}
                                                        </span>
                                                    ))}
                                                </div>
                                            </div>
                                        )}

                                        {result.errors.length > 0 && (
                                            <div>
                                                <p className="text-xs text-red-500 mb-1 flex items-center gap-1">
                                                    <AlertTriangle className="h-3 w-3" />
                                                    错误:
                                                </p>
                                                <div className="space-y-1">
                                                    {result.errors.map((err, idx) => (
                                                        <p key={idx} className="text-xs text-red-400 pl-4">
                                                            • {err}
                                                        </p>
                                                    ))}
                                                </div>
                                            </div>
                                        )}

                                        <div className="mt-2 text-xs text-slate-400">
                                            耗时: {(result.duration_ms / 1000).toFixed(1)}s
                                        </div>
                                    </div>
                                ))}
                            </div>
                        ) : (
                            <div className="text-center py-12 text-slate-500">
                                <Users className="h-12 w-12 mx-auto mb-3 opacity-30" />
                                <p>暂无处理结果</p>
                                <p className="text-sm mt-1">上传账号文件并点击开始处理</p>
                            </div>
                        )}
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}