/**
 * Reporter Builder
 *
 * @package BoostMedia_AI
 * @license GPL-2.0-or-later
 */

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Bot, Loader2, Save, Sparkles, User, X } from 'lucide-react'
import { Badge, Button, Card } from '../common'
import { endpoints } from '../../api/client'
import { useDataLanguage } from '../../lib/DataLanguageContext'
import type { Reporter } from '../../types'
import { t } from '../../lib/i18n'

interface BuilderMessage {
  role: 'assistant' | 'user'
  content: string
}

interface BuilderUsage {
  coins_used?: number
}

interface BuilderResult {
  text: string
  controlPayload: Record<string, unknown> | null
  usage?: BuilderUsage
}

interface ReporterBuilderProps {
  open: boolean
  initialReporter?: Reporter | null
  onClose: () => void
  onSaved: (reporter: Reporter) => void
  onUseManualDraft: (draft: Partial<Reporter>) => void
}

const AUTO_CREATE_MESSAGE = '__BC_AUTO_GREETING_NEW__'
const AUTO_REFINE_MESSAGE = '__BC_AUTO_GREETING_REFINE__'

function getDefaultWritingLanguage(dataLanguage: string, reporter?: Reporter | null): string {
  return reporter?.writing_language || reporter?.language || dataLanguage || 'he'
}

function formatCoins(value: number): string {
  return value.toFixed(1)
}

function filterVisibleMessages(messages: BuilderMessage[]) {
  return messages.filter(
    (message) => message.content !== AUTO_CREATE_MESSAGE && message.content !== AUTO_REFINE_MESSAGE,
  )
}

function mergeDraft(current: Record<string, unknown>, controlPayload: Record<string, unknown> | null) {
  const next = { ...current }

  if (controlPayload && typeof controlPayload === 'object') {
    const profilePatch = controlPayload.profile_patch
    if (profilePatch && typeof profilePatch === 'object' && !Array.isArray(profilePatch)) {
      Object.assign(next, profilePatch)
    }

    if ('suggested_name' in controlPayload && typeof controlPayload.suggested_name === 'string' && controlPayload.suggested_name) {
      next.suggested_name = controlPayload.suggested_name
    }

    if ('ready' in controlPayload) {
      next.ready = Boolean(controlPayload.ready)
    }

    if (Array.isArray(controlPayload.missing)) {
      next.missing = controlPayload.missing
    }
  }

  return next
}

async function pollResponse(responseId: string): Promise<BuilderResult> {
  for (let attempt = 0; attempt < 120; attempt += 1) {
    const res = await endpoints.getChatResponse(responseId)
    const data = res.data as any

    if (data.status === 'complete') {
      return {
        text: data.text || '',
        controlPayload: data.control_payload || null,
        usage: data.usage || undefined,
      }
    }

    if (data.status === 'error') {
      throw new Error(data.message || t('AI response failed'))
    }

    await new Promise((resolve) => setTimeout(resolve, 1000))
  }

  throw new Error(t('AI response timed out'))
}

export function ReporterBuilder({
  open,
  initialReporter = null,
  onClose,
  onSaved,
  onUseManualDraft,
}: ReporterBuilderProps) {
  const { dataLanguage } = useDataLanguage()
  const desiredWritingLanguage = getDefaultWritingLanguage(dataLanguage, initialReporter)
  const [sessionId, setSessionId] = useState<string | null>(null)
  const [messages, setMessages] = useState<BuilderMessage[]>([])
  const [input, setInput] = useState('')
  const [sending, setSending] = useState(false)
  const [draftState, setDraftState] = useState<Record<string, unknown>>({})
  const [sessionCoins, setSessionCoins] = useState(0)
  const [balance, setBalance] = useState<number | null>(null)
  const [statusMessage, setStatusMessage] = useState<string | null>(null)
  const initializedRef = useRef(false)
  const messagesRef = useRef<HTMLDivElement>(null)

  const visibleMessages = useMemo(() => filterVisibleMessages(messages), [messages])
  const ready = Boolean(draftState.ready)

  const loadBalance = useCallback(async () => {
    try {
      const credits = await endpoints.getCreditsStatus()
      const remaining = Number((credits.data as any)?.boost_credits?.remaining ?? 0)
      setBalance(remaining)
    } catch {
      setBalance(null)
    }
  }, [])

  const openSession = useCallback(async () => {
    const structuredState = initialReporter
      ? {
          name: initialReporter.name,
          specializations: initialReporter.specializations || [],
          writing_style: initialReporter.writing_style,
          depth_level: initialReporter.depth_level,
          tone: initialReporter.tone,
          perspective: initialReporter.perspective,
          gender: initialReporter.gender,
          writing_language: desiredWritingLanguage,
          language_quirks: initialReporter.language_quirks || [],
          audience: initialReporter.audience,
          custom_instructions: initialReporter.custom_instructions,
        }
      : {
          writing_language: desiredWritingLanguage,
        }

    const res = await endpoints.createChatSession({
      session_type: 'reporter_builder',
      reporter_id: initialReporter?.id,
      structured_state: structuredState,
      summary: initialReporter?.builder_summary || '',
      wizard_context: initialReporter
        ? { reporter: initialReporter, language: dataLanguage, reporter_language: desiredWritingLanguage }
        : { language: dataLanguage, reporter_language: desiredWritingLanguage },
    })

    const data = res.data as any
    setSessionId(data.session_id)
    setDraftState(data.structured_state || structuredState)
    setMessages((data.messages as BuilderMessage[]) || [])
  }, [dataLanguage, initialReporter])

  const sendViaPolling = useCallback(async (message: string) => {
    const res = await endpoints.sendChatRespond({
      mode: 'reporter_builder',
      session_id: sessionId,
      user_message: message,
      summary: '',
      structured_state: {},
      recent_messages: [],
      context: initialReporter
        ? { reporter: initialReporter, language: dataLanguage, reporter_language: desiredWritingLanguage }
        : { language: dataLanguage, reporter_language: desiredWritingLanguage },
    })

    const responseId = (res.data as any).response_id as string
    return pollResponse(responseId)
  }, [dataLanguage, initialReporter, sessionId])

  const applyAssistantResult = useCallback((result: BuilderResult) => {
    setMessages((current) => [...current, { role: 'assistant', content: result.text }])
    setDraftState((current) => mergeDraft(current, result.controlPayload))

    const coinsUsed = Number(result.usage?.coins_used ?? 0)
    if (coinsUsed > 0) {
      setSessionCoins((current) => current + coinsUsed)
      setBalance((current) => current === null ? current : current - coinsUsed)
    }
  }, [])

  const sendMessage = useCallback(async (message: string, showUser = true) => {
    if (!sessionId) {
      return
    }

    setSending(true)
    setStatusMessage(null)

    if (showUser) {
      setMessages((current) => [...current, { role: 'user', content: message }])
    }

    try {
      const result = await sendViaPolling(message)
      applyAssistantResult(result)
    } catch {
      setStatusMessage(t('AI response failed'))
    } finally {
      setSending(false)
    }
  }, [applyAssistantResult, sendViaPolling, sessionId])

  useEffect(() => {
    if (!open || initializedRef.current) {
      return
    }

    initializedRef.current = true
    void (async () => {
      await loadBalance()
      await openSession()
    })()
  }, [loadBalance, open, openSession])

  useEffect(() => {
    if (!open || !sessionId || messages.length > 0) {
      return
    }

    void sendMessage(
      initialReporter
        ? `${AUTO_REFINE_MESSAGE} I want to refine this reporter. Please greet me, acknowledge the existing profile, and ask the most useful next question.`
        : `${AUTO_CREATE_MESSAGE} I want to create a new reporter. Please greet me and ask the most useful first question.`,
      false,
    )
  }, [initialReporter, messages.length, open, sendMessage, sessionId])

  useEffect(() => {
    if (!open) {
      initializedRef.current = false
      setSessionId(null)
      setMessages([])
      setInput('')
      setSending(false)
      setDraftState({})
      setSessionCoins(0)
      setStatusMessage(null)
    }
  }, [open])

  useEffect(() => {
    if (!open || !messagesRef.current) {
      return
    }

    messagesRef.current.scrollTop = messagesRef.current.scrollHeight
  }, [open, sending, statusMessage, visibleMessages])

  if (!open) {
    return null
  }

  const handleManualOverride = () => {
    onUseManualDraft({
      name: String(draftState.name || draftState.suggested_name || initialReporter?.name || ''),
      specializations: Array.isArray(draftState.specializations) ? draftState.specializations as string[] : initialReporter?.specializations || [],
      writing_style: String(draftState.writing_style || initialReporter?.writing_style || 'conversational') as Reporter['writing_style'],
      depth_level: String(draftState.depth_level || initialReporter?.depth_level || 'detailed') as Reporter['depth_level'],
      tone: String(draftState.tone || initialReporter?.tone || 'friendly') as Reporter['tone'],
      perspective: String(draftState.perspective || initialReporter?.perspective || 'third_person') as Reporter['perspective'],
      gender: String(draftState.gender || initialReporter?.gender || 'neutral') as Reporter['gender'],
      writing_language: String(draftState.writing_language || desiredWritingLanguage),
      language_quirks: Array.isArray(draftState.language_quirks) ? draftState.language_quirks as string[] : initialReporter?.language_quirks || [],
      audience: String(draftState.audience || initialReporter?.audience || ''),
      custom_instructions: String(draftState.custom_instructions || initialReporter?.custom_instructions || ''),
    })
    onClose()
  }

  const handleSave = async () => {
    if (!sessionId) {
      return
    }

    setSending(true)
    try {
      const res = await endpoints.completeReporterBuilderSession(sessionId)
      onSaved(res.data as Reporter)
    } catch {
      setStatusMessage(t('Failed to save reporter'))
    } finally {
      setSending(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 bg-black/40 flex items-center justify-center p-6">
      <div className="w-full max-w-6xl h-[90vh] overflow-hidden rounded-bc-md bg-white shadow-bc grid grid-cols-1 xl:grid-cols-[minmax(0,1fr)_340px]">
        <div className="flex flex-col min-h-0">
          <div className="flex items-center justify-between border-b border-bc-gray-200 px-6 py-4">
            <div>
              <h2 className="text-xl font-semibold text-bc-gray-800">{t('Reporter Builder')}</h2>
              <p className="text-sm text-bc-gray-500">
                {initialReporter ? t('AI is refining the current reporter profile') : t('Ask AI to help shape this reporter profile')}
              </p>
            </div>
            <button
              type="button"
              onClick={() => {
                if (visibleMessages.length > 2 && !ready) {
                  if (!confirm(t('You have unsaved progress. Are you sure you want to close?'))) {
                    return
                  }
                }
                onClose()
              }}
              className="text-bc-gray-500 hover:text-bc-gray-700"
            >
              <X className="w-5 h-5" />
            </button>
          </div>

          <div ref={messagesRef} className="flex-1 min-h-0 overflow-y-auto p-6 space-y-4 bg-bc-gray-50">
            {visibleMessages.map((message, index) => (
              <div key={`${message.role}-${index}`} className={`flex ${message.role === 'assistant' ? 'justify-start' : 'justify-end'}`}>
                <div className={`max-w-[85%] rounded-bc px-4 py-3 shadow-sm ${
                  message.role === 'assistant' ? 'bg-white text-bc-gray-800' : 'bg-bc-primary text-white'
                }`}>
                  <div className="mb-1 flex items-center gap-2 text-xs opacity-80">
                    {message.role === 'assistant' ? <Bot className="w-3.5 h-3.5" /> : <User className="w-3.5 h-3.5" />}
                    <span>{message.role === 'assistant' ? t('Assistant') : t('You')}</span>
                  </div>
                  <div className="whitespace-pre-wrap text-sm">{message.content}</div>
                </div>
              </div>
            ))}

            {sending ? (
              <div className="flex items-center gap-2 text-sm text-bc-gray-500">
                <Loader2 className="w-4 h-4 animate-spin" />
                {t('Generating response...')}
              </div>
            ) : null}

            {statusMessage ? (
              <div className="rounded-bc border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
                {statusMessage}
              </div>
            ) : null}
          </div>

          <div className="shrink-0 border-t border-bc-gray-200 bg-white p-4">
            <textarea
              value={input}
              onChange={(e) => setInput(e.target.value)}
              rows={3}
              disabled={sending}
              placeholder={t('Type your message...')}
              className="w-full rounded-bc border border-bc-gray-300 px-3 py-2"
            />
            <div className="mt-3 flex items-center justify-between gap-3">
              <div className="flex gap-2">
                <Button variant="ghost" onClick={handleManualOverride}>
                  {t('Continue in Manual Editor')}
                </Button>
                <Button
                  onClick={() => {
                    const message = input.trim()
                    if (!message) return
                    setInput('')
                    void sendMessage(message)
                  }}
                  disabled={sending || !input.trim()}
                  icon={<Sparkles className="w-4 h-4" />}
                >
                  {t('Send')}
                </Button>
              </div>
            </div>
          </div>
        </div>

        <div className="border-s border-bc-gray-200 bg-white p-5 overflow-y-auto min-h-0">
          <div className="space-y-4">
            <Card>
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-bc-gray-800">{t('Current Draft')}</h3>
                {ready ? <Badge variant="success">{t('Ready')}</Badge> : <Badge variant="default">{t('In Progress')}</Badge>}
              </div>
              <div className="space-y-2 text-sm text-bc-gray-700">
                <div><strong>{t('Name')}:</strong> {String(draftState.name || draftState.suggested_name || initialReporter?.name || '—')}</div>
                <div><strong>{t('Writing Style')}:</strong> {t(String(draftState.writing_style || initialReporter?.writing_style || 'conversational'))}</div>
                <div><strong>{t('Tone')}:</strong> {t(String(draftState.tone || initialReporter?.tone || 'friendly'))}</div>
                <div><strong>{t('Depth Level')}:</strong> {t(String(draftState.depth_level || initialReporter?.depth_level || 'detailed'))}</div>
                <div><strong>{t('Perspective')}:</strong> {t(String(draftState.perspective || initialReporter?.perspective || 'third_person'))}</div>
                <div><strong>{t('Gender')}:</strong> {t(String(draftState.gender || initialReporter?.gender || 'neutral'))}</div>
                <div><strong>{t('Writing Language')}:</strong> {t(String((draftState.writing_language || desiredWritingLanguage) === 'en' ? 'English' : 'Hebrew'))}</div>
                <div><strong>{t('Audience')}:</strong> {String(draftState.audience || initialReporter?.audience || '—')}</div>
              </div>
            </Card>

            <Card>
              <div className="space-y-2 text-sm text-bc-gray-700">
                <div><strong>{t('Session Cost')}:</strong> {formatCoins(sessionCoins)}</div>
                <div><strong>{t('Current Balance')}:</strong> {balance === null ? '—' : formatCoins(balance)}</div>
              </div>
            </Card>

            <Button className="w-full" onClick={() => void handleSave()} icon={<Save className="w-4 h-4" />} disabled={!ready || sending}>
              {t('Save Reporter')}
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}