import { useEffect, useState } from 'react'
import { useOutletContext, useParams } from 'react-router-dom'
import { api, ApiError } from '../api/client'
import { DevToolsPanel } from '../components/DevToolsPanel'
import { AcLink, Badge, Card, ErrorText, Notice, SectionTitle, SuccessText } from '../components/ui'
import type { ThreadsAccountConnectionData, ThreadsAccountData } from '../types/api'

type WorkspaceContext = {
  accountId: string
  account: ThreadsAccountData | null
  loading: boolean
  error: string
}

export function ThreadsAccountConnectionsPage() {
  const { id = '' } = useParams()
  const { account, loading: workspaceLoading } = useOutletContext<WorkspaceContext>()
  const [connection, setConnection] = useState<ThreadsAccountConnectionData | null>(null)
  const [message, setMessage] = useState('')
  const [error, setError] = useState('')

  const load = async () => {
    if (!id) return
    setError('')
    const conn = await api.get<ThreadsAccountConnectionData>(
      `/api/v1/threads-accounts/${encodeURIComponent(id)}/connection`,
      { auth: true },
    )
    setConnection(conn)
  }

  useEffect(() => {
    load().catch((e) => setError(e instanceof ApiError ? e.message : '載入連線設定失敗'))
  }, [id])

  const apiReady = !!connection?.api_connected

  return (
    <div className="grid gap-4">
      <Card className="grid gap-4">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="grid gap-2">
            <SectionTitle>Threads API 連線</SectionTitle>
            <p className="text-sm leading-relaxed text-ink-secondary">
              正式流程的唯一通道。搜尋、發文、留言都走官方 API；帳號建立後預設使用此模式。
            </p>
          </div>
          <Badge tone={apiReady ? 'success' : 'warning'}>
            {apiReady ? 'API 已連線' : 'API 尚未設定'}
          </Badge>
        </div>

        {apiReady ? (
          <Notice
            tone="success"
            title="Threads API 就緒"
            message={
              account?.username
                ? `目前帳號 @${account.username.replace(/^@/, '')} 可透過 API 操作。`
                : '此帳號已具備 API 憑證，可執行任務。'
            }
          />
        ) : (
          <Notice
            tone="warning"
            title="尚未完成 API 連線"
            message="請完成 Threads OAuth / API token 設定（之後會在此頁提供授權按鈕）。在此之前任務可能無法發文或搜尋。"
          />
        )}

        <p className="ac-hint">
          AI 產文用的 API key 在側欄「設定」管理；人設在 <AcLink to="/personas">人設庫</AcLink>{' '}
          建立，發文時於 <AcLink to={`/threads/${id}/publish`}>發文頁</AcLink> 選擇。
        </p>
      </Card>

      {id && connection ? (
        <DevToolsPanel
          accountId={id}
          connection={connection}
          workspaceLoading={workspaceLoading}
          onConnectionChange={(data) => {
            setConnection(data)
            load().catch(() => undefined)
          }}
          onMessage={setMessage}
          onError={setError}
        />
      ) : null}

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