import { useEffect, useState } from 'react'
import { api, ApiError } from '../api/client'
import {
  DEFAULT_AI_CREDENTIALS,
  getApiKeyStatus,
  isMaskedKey,
  normalizeProviderSettings,
  normalizeSupportedProvider,
  PROVIDER_KEY_LABELS,
  PROVIDER_OPTIONS,
  PROVIDER_ORDER,
  type ProviderApiKeys,
  type ProviderId,
} from '../lib/aiCredentials'
import type { ThreadsAccountAiSettingsData } from '../types/api'
import { Badge, Button, ErrorText, Field, Input, SectionTitle, Select, SuccessText } from './ui'

type AccountAiSettingsProps = {
  accountId: string
  compact?: boolean
}

function aiSettingsPath(accountId: string) {
  return `/api/v1/threads-accounts/${encodeURIComponent(accountId)}/ai-settings`
}

function parseConfigured(raw: Record<string, unknown> | undefined): Record<ProviderId, boolean> {
  const base = getApiKeyStatus({})
  if (!raw) return base
  for (const provider of PROVIDER_ORDER) {
    const value = raw[provider]
    base[provider] = value === true || value === 'true'
  }
  return base
}

export function AccountAiSettings({ accountId, compact }: AccountAiSettingsProps) {
  const [settings, setSettings] = useState<ThreadsAccountAiSettingsData | null>(null)
  const [keyInputs, setKeyInputs] = useState<ProviderApiKeys>({})
  const [configured, setConfigured] = useState<Record<ProviderId, boolean>>(() => getApiKeyStatus({}))
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState('')
  const [message, setMessage] = useState('')

  const load = async () => {
    if (!accountId) return
    setLoading(true)
    setError('')
    try {
      const data = await api.get<ThreadsAccountAiSettingsData>(aiSettingsPath(accountId), { auth: true })
      setSettings({
        ...data,
        ...normalizeProviderSettings({
          provider: data.provider,
          model: data.model,
          research_provider: data.research_provider,
          research_model: data.research_model,
        }),
      })
      setConfigured(parseConfigured(data.api_keys_configured))
      setKeyInputs(data.api_keys ?? {})
    } catch (e) {
      setError(e instanceof ApiError ? e.message : '載入 AI 設定失敗')
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    load().catch(() => undefined)
  }, [accountId])

  const save = async () => {
    if (!accountId || !settings) return
    setSaving(true)
    setError('')
    setMessage('')
    try {
      const apiKeys: ProviderApiKeys = {}
      for (const provider of PROVIDER_ORDER) {
        const trimmed = keyInputs[provider]?.trim()
        if (!trimmed || isMaskedKey(trimmed)) continue
        apiKeys[provider] = trimmed
      }
      const normalized = normalizeProviderSettings({
        provider: settings.provider,
        model: settings.model,
        research_provider: settings.research_provider,
        research_model: settings.research_model,
      })
      const data = await api.put<ThreadsAccountAiSettingsData>(
        aiSettingsPath(accountId),
        {
          provider: normalized.provider,
          model: normalized.model,
          research_provider: normalized.research_provider,
          research_model: normalized.research_model,
          api_keys: apiKeys,
        },
        { auth: true },
      )
      setSettings({
        ...data,
        ...normalizeProviderSettings({
          provider: data.provider,
          model: data.model,
          research_provider: data.research_provider,
          research_model: data.research_model,
        }),
      })
      setConfigured(parseConfigured(data.api_keys_configured))
      setKeyInputs(data.api_keys ?? {})
      setMessage('AI 設定已儲存')
    } catch (e) {
      setError(e instanceof ApiError ? e.message : '儲存失敗')
    } finally {
      setSaving(false)
    }
  }

  const provider = normalizeSupportedProvider(settings?.provider) || DEFAULT_AI_CREDENTIALS.provider
  const researchProvider = normalizeSupportedProvider(settings?.research_provider ?? provider)
  const providerOption = PROVIDER_OPTIONS.find((item) => item.value === provider)
  const researchOption = PROVIDER_OPTIONS.find((item) => item.value === researchProvider)
  const currentProviderConfigured = configured[provider]

  if (!accountId) {
    return <p className="text-sm text-ink-secondary">請先從頂部選擇 Threads 經營帳號。</p>
  }

  return (
    <div className="grid gap-4">
      {!compact ? (
        <div>
          <SectionTitle>AI API Key</SectionTitle>
          <p className="mt-1 text-sm leading-relaxed text-ink-secondary">
            同一登入帳號下的所有經營帳號共用。8D 分析、產文等任務會讀取這組 provider 與 key。
          </p>
        </div>
      ) : null}

      {loading ? (
        <p className="text-sm text-muted">載入 AI 設定…</p>
      ) : settings ? (
        <>
          <div className="grid gap-4 md:grid-cols-2">
            <Field label="主要 Provider">
              <Select
                value={provider}
                onChange={(e) => {
                  const next = e.target.value as ProviderId
                  const option = PROVIDER_OPTIONS.find((item) => item.value === next)
                  setSettings((prev) =>
                    prev
                      ? {
                          ...prev,
                          provider: next,
                          model: option?.models[0] ?? prev.model,
                        }
                      : prev,
                  )
                }}
              >
                {PROVIDER_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="主要 Model">
              <Select
                value={settings.model}
                onChange={(e) =>
                  setSettings((prev) => (prev ? { ...prev, model: e.target.value } : prev))
                }
              >
                {(providerOption?.models ?? []).map((model) => (
                  <option key={model} value={model}>
                    {model}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="研究用 Provider（選填）">
              <Select
                value={researchProvider}
                onChange={(e) => {
                  const next = e.target.value as ProviderId
                  const option = PROVIDER_OPTIONS.find((item) => item.value === next)
                  setSettings((prev) =>
                    prev
                      ? {
                          ...prev,
                          research_provider: next,
                          research_model: option?.models[0] ?? prev.research_model,
                        }
                      : prev,
                  )
                }}
              >
                {PROVIDER_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </Select>
            </Field>
            <Field label="研究用 Model">
              <Select
                value={settings.research_model ?? ''}
                onChange={(e) =>
                  setSettings((prev) =>
                    prev ? { ...prev, research_model: e.target.value } : prev,
                  )
                }
              >
                {(researchOption?.models ?? []).map((model) => (
                  <option key={model} value={model}>
                    {model}
                  </option>
                ))}
              </Select>
            </Field>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            <Badge tone={currentProviderConfigured ? 'success' : 'warning'}>
              {currentProviderConfigured ? '主要 Provider 已設定 key' : '主要 Provider 尚未設定 key'}
            </Badge>
          </div>

          <div className="grid gap-3">
            {PROVIDER_ORDER.map((providerId) => {
              const meta = PROVIDER_KEY_LABELS[providerId]
              const isConfigured = configured[providerId]
              return (
                <div key={providerId} className="ac-slot px-4 py-4">
                  <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
                    <span className="text-sm font-bold text-ink">{meta.label}</span>
                    <Badge tone={isConfigured ? 'success' : 'neutral'}>
                      {isConfigured ? '已設定' : '未設定'}
                    </Badge>
                  </div>
                  <p className="mb-3 text-xs leading-relaxed text-muted">{meta.hint}</p>
                  <Input
                    type="password"
                    value={keyInputs[providerId] ?? ''}
                    onChange={(e) =>
                      setKeyInputs((prev) => ({ ...prev, [providerId]: e.target.value }))
                    }
                    placeholder={isConfigured ? '留空則保留現有 key' : '貼上 API key'}
                    autoComplete="off"
                  />
                  {meta.docsUrl ? (
                    <a
                      href={meta.docsUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="ac-link mt-2 inline-block text-xs"
                    >
                      取得 {meta.label} API key →
                    </a>
                  ) : null}
                </div>
              )
            })}
          </div>

          <p className="text-xs leading-relaxed text-muted">
            Key 只存在後端資料庫，綁定此登入帳號。留空或維持遮罩值不會覆寫已儲存的 key。
          </p>

          <div className="flex flex-wrap gap-2">
            <Button onClick={save} disabled={saving || loading}>
              {saving ? '儲存中…' : '儲存 AI 設定'}
            </Button>
          </div>
        </>
      ) : (
        <p className="text-sm text-ink-secondary">無法載入設定。</p>
      )}

      <ErrorText message={error} />
      <SuccessText message={message} />
    </div>
  )
}