'use client'

import { useEffect, useMemo, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Pencil, Plus, RefreshCcw, Star, Trash2, Wand2, ZapOff } from 'lucide-react'

import { Button } from '@/components/ui/button'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Badge } from '@/components/ui/badge'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Textarea } from '@/components/ui/textarea'
import { AdminUnauthorizedError, adminFetchJson } from '@/lib/admin-api'

interface Provider {
  id: number
  name: string
  model_id: string
  base_url: string | null
  is_active: boolean
  is_default: boolean
  created_at?: string
}

export default function ProvidersPage() {
  const router = useRouter()

  const [providers, setProviders] = useState<Provider[]>([])
  const [query, setQuery] = useState('')
  const [onlyActive, setOnlyActive] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState('')

  const [dialogOpen, setDialogOpen] = useState(false)
  const [editing, setEditing] = useState<Provider | null>(null)
  const [isSaving, setIsSaving] = useState(false)

  const [testResult, setTestResult] = useState<{
    ok: boolean
    latency_ms?: number
    message?: string
  } | null>(null)
  const [testingId, setTestingId] = useState<number | null>(null)

  const [form, setForm] = useState({
    name: '',
    model_id: '',
    base_url: '',
    api_key: '',
    is_active: true,
    is_default: false,
  })

  const fetchProviders = async () => {
    setIsLoading(true)
    setError('')
    try {
      const data = await adminFetchJson<Provider[]>('/api/v1/admin/providers')
      setProviders(data)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '加载失败')
    } finally {
      setIsLoading(false)
    }
  }

  useEffect(() => {
    fetchProviders()
  }, [])

  const filteredProviders = useMemo(() => {
    const q = query.trim().toLowerCase()
    return providers.filter((p) => {
      if (onlyActive && !p.is_active) return false
      if (!q) return true
      return (
        p.name.toLowerCase().includes(q) ||
        p.model_id.toLowerCase().includes(q) ||
        (p.base_url || '').toLowerCase().includes(q)
      )
    })
  }, [providers, query, onlyActive])

  const openCreate = () => {
    setEditing(null)
    setTestResult(null)
    setForm({
      name: '',
      model_id: '',
      base_url: '',
      api_key: '',
      is_active: true,
      is_default: false,
    })
    setDialogOpen(true)
  }

  const openEdit = (provider: Provider) => {
    setEditing(provider)
    setTestResult(null)
    setForm({
      name: provider.name,
      model_id: provider.model_id,
      base_url: provider.base_url || '',
      api_key: '',
      is_active: provider.is_active,
      is_default: provider.is_default,
    })
    setDialogOpen(true)
  }

  const handleSubmit = async () => {
    setIsSaving(true)
    setError('')

    try {
      if (editing) {
        const payload: Record<string, any> = {
          name: form.name,
          model_id: form.model_id,
          base_url: form.base_url.trim() ? form.base_url.trim() : null,
          is_active: form.is_active,
          is_default: form.is_default,
        }
        if (form.api_key.trim()) payload.api_key = form.api_key.trim()

        await adminFetchJson(`/api/v1/admin/providers/${editing.id}`, {
          method: 'PUT',
          body: JSON.stringify(payload),
        })
      } else {
        await adminFetchJson(`/api/v1/admin/providers`, {
          method: 'POST',
          body: JSON.stringify({
            name: form.name,
            model_id: form.model_id,
            base_url: form.base_url.trim() ? form.base_url.trim() : null,
            api_key: form.api_key.trim(),
            is_active: form.is_active,
            is_default: form.is_default,
          }),
        })
      }

      setDialogOpen(false)
      setEditing(null)
      setForm({
        name: '',
        model_id: '',
        base_url: '',
        api_key: '',
        is_active: true,
        is_default: false,
      })
      await fetchProviders()
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '保存失败')
    } finally {
      setIsSaving(false)
    }
  }

  const handleDelete = async (provider: Provider) => {
    if (!confirm('确定删除？')) return
    setError('')

    try {
      await adminFetchJson(`/api/v1/admin/providers/${provider.id}`, { method: 'DELETE' })
      await fetchProviders()
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '删除失败')
    }
  }

  const setDefault = async (provider: Provider) => {
    setError('')
    try {
      await adminFetchJson(`/api/v1/admin/providers/${provider.id}`, {
        method: 'PUT',
        body: JSON.stringify({ is_default: true }),
      })
      await fetchProviders()
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '操作失败')
    }
  }

  const toggleActive = async (provider: Provider) => {
    setError('')
    try {
      await adminFetchJson(`/api/v1/admin/providers/${provider.id}`, {
        method: 'PUT',
        body: JSON.stringify({ is_active: !provider.is_active }),
      })
      await fetchProviders()
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setError(err?.message || '操作失败')
    }
  }

  const testProvider = async (provider: Provider) => {
    setTestResult(null)
    setTestingId(provider.id)
    setError('')

    try {
      const data = await adminFetchJson<{
        ok: boolean
        latency_ms?: number
        message?: string
      }>(`/api/v1/admin/providers/${provider.id}/test`, { method: 'POST' })
      setTestResult(data)
    } catch (err: any) {
      if (err instanceof AdminUnauthorizedError) {
        router.replace('/login')
        return
      }
      setTestResult({ ok: false, message: err?.message || '测试失败' })
    } finally {
      setTestingId(null)
    }
  }

  return (
    <div className="space-y-6">
      <Card className="border-muted bg-background/50 backdrop-blur-sm">
        <CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:space-y-0">
          <div>
            <CardTitle>AI 配置管理</CardTitle>
            <CardDescription>管理 AI Provider（模型、Base URL、API Key、默认/启用状态）</CardDescription>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" onClick={fetchProviders} disabled={isLoading}>
              <RefreshCcw className="mr-2 h-4 w-4" />
              刷新
            </Button>
            <Button onClick={openCreate}>
              <Plus className="mr-2 h-4 w-4" />
              添加配置
            </Button>
          </div>
        </CardHeader>
        <CardContent className="space-y-4">
          {error && (
            <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {error}
            </div>
          )}

          {testResult && (
            <div
              className={
                testResult.ok
                  ? 'rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300'
                  : 'rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive'
              }
            >
              {testResult.ok ? (
                <div>
                  测试成功{typeof testResult.latency_ms === 'number' ? `（延迟 ${testResult.latency_ms}ms）` : ''}
                </div>
              ) : (
                <div>{testResult.message || '测试失败'}</div>
              )}
            </div>
          )}

          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div className="flex-1">
              <Input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="搜索：名称 / 模型 / Base URL"
              />
            </div>
            <label className="flex items-center gap-2 text-sm text-muted-foreground">
              <input
                type="checkbox"
                checked={onlyActive}
                onChange={(e) => setOnlyActive(e.target.checked)}
                className="h-4 w-4 rounded border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
              />
              仅显示启用
            </label>
          </div>

          <div className="rounded-lg border">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>名称</TableHead>
                  <TableHead>模型</TableHead>
                  <TableHead>Base URL</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead className="text-right">操作</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center text-muted-foreground">
                      加载中...
                    </TableCell>
                  </TableRow>
                ) : filteredProviders.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={5} className="text-center text-muted-foreground">
                      暂无数据
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredProviders.map((p) => (
                    <TableRow key={p.id}>
                      <TableCell>
                        <div className="flex items-center gap-2">
                          <div className="font-medium">{p.name}</div>
                          {p.is_default && <Badge variant="success">默认</Badge>}
                        </div>
                        {p.created_at && (
                          <div className="text-xs text-muted-foreground mt-1">
                            创建于 {new Date(p.created_at).toLocaleString()}
                          </div>
                        )}
                      </TableCell>
                      <TableCell className="font-mono text-xs">{p.model_id}</TableCell>
                      <TableCell className="max-w-[340px]">
                        <div className="truncate text-sm text-muted-foreground">
                          {p.base_url || '-'}
                        </div>
                      </TableCell>
                      <TableCell>
                        {p.is_active ? (
                          <Badge variant="secondary">启用</Badge>
                        ) : (
                          <Badge variant="outline" className="text-muted-foreground">
                            禁用
                          </Badge>
                        )}
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2 flex-wrap">
                          {!p.is_default && (
                            <Button
                              size="sm"
                              variant="secondary"
                              onClick={() => setDefault(p)}
                            >
                              <Star className="mr-2 h-4 w-4" />
                              设为默认
                            </Button>
                          )}
                          <Button size="sm" variant="outline" onClick={() => toggleActive(p)}>
                            {p.is_active ? (
                              <>
                                <ZapOff className="mr-2 h-4 w-4" />
                                禁用
                              </>
                            ) : (
                              <>
                                <Wand2 className="mr-2 h-4 w-4" />
                                启用
                              </>
                            )}
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => openEdit(p)}>
                            <Pencil className="mr-2 h-4 w-4" />
                            编辑
                          </Button>
                          <Button size="sm" variant="outline" onClick={() => testProvider(p)} disabled={testingId === p.id}>
                            {testingId === p.id ? '测试中...' : '测试'}
                          </Button>
                          <Button size="sm" variant="destructive" onClick={() => handleDelete(p)}>
                            <Trash2 className="mr-2 h-4 w-4" />
                            删除
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </CardContent>
      </Card>

      {dialogOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
          <Card className="w-full max-w-2xl border-muted shadow-lg">
            <CardHeader>
              <CardTitle>{editing ? '编辑' : '添加'} AI 配置</CardTitle>
              <CardDescription>
                {editing
                  ? '更新配置项（API Key 留空则不修改）'
                  : '添加新的 Provider 配置'}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {testResult && (
                <div
                  className={
                    testResult.ok
                      ? 'rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700 dark:text-emerald-300'
                      : 'rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive'
                  }
                >
                  {testResult.ok ? (
                    <div>
                      连接正常{typeof testResult.latency_ms === 'number' ? `（${testResult.latency_ms}ms）` : ''}
                    </div>
                  ) : (
                    <div>{testResult.message || '测试失败'}</div>
                  )}
                </div>
              )}

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-1.5">
                  <Label>名称</Label>
                  <Input
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    placeholder="OpenAI / Azure / 自建代理..."
                  />
                </div>
                <div className="space-y-1.5">
                  <Label>模型 ID</Label>
                  <Input
                    value={form.model_id}
                    onChange={(e) => setForm({ ...form, model_id: e.target.value })}
                    placeholder="gpt-4o-mini"
                  />
                </div>
              </div>

              <div className="space-y-1.5">
                <Label>Base URL</Label>
                <Input
                  value={form.base_url}
                  onChange={(e) => setForm({ ...form, base_url: e.target.value })}
                  placeholder="https://api.openai.com/v1"
                />
                <div className="text-xs text-muted-foreground">
                  留空表示使用默认 OpenAI Base URL
                </div>
              </div>

              <div className="space-y-1.5">
                <Label>API Key</Label>
                <Textarea
                  value={form.api_key}
                  onChange={(e) => setForm({ ...form, api_key: e.target.value })}
                  placeholder={editing ? '留空则不修改' : 'sk-***'}
                  className="min-h-[80px] font-mono text-xs"
                />
              </div>

              <div className="flex flex-wrap gap-6">
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={form.is_active}
                    onChange={(e) => setForm({ ...form, is_active: e.target.checked })}
                    className="h-4 w-4 rounded border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                  />
                  启用
                </label>
                <label className="flex items-center gap-2 text-sm">
                  <input
                    type="checkbox"
                    checked={form.is_default}
                    onChange={(e) => setForm({ ...form, is_default: e.target.checked })}
                    className="h-4 w-4 rounded border-input text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                  />
                  设为默认
                </label>
              </div>
            </CardContent>
            <CardFooter className="justify-end gap-2">
              <Button
                variant="outline"
                onClick={() => {
                  setDialogOpen(false)
                  setEditing(null)
                  setTestResult(null)
                }}
                disabled={isSaving}
              >
                取消
              </Button>
              {editing && (
                <Button
                  variant="secondary"
                  onClick={() => testProvider({ ...editing, ...form, base_url: form.base_url || null })}
                  disabled={isSaving}
                >
                  测试连接
                </Button>
              )}
              <Button onClick={handleSubmit} disabled={isSaving}>
                {isSaving ? '保存中...' : '保存'}
              </Button>
            </CardFooter>
          </Card>
        </div>
      )}
    </div>
  )
}