'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import {
  FieldGroup,
  FieldLabel,
  PrimaryButton,
  TextareaField,
} from '@/app/FormFields'
import { formatLabel } from './SubmitForm.helpers'
import type { PollStatus, SubmittedTicket, SubmitFormLabels } from './SubmitForm.types'

const TERMINAL_STATUSES: PollStatus[] = [
  'TRIAGED', 'AWAITING_EXPERT', 'EXPERT_REVIEWING', 'RESPONSE_DRAFTING',
  'RESPONSE_READY', 'RESPONDED', 'AWAITING_REPLY', 'CLOSED', 'ARCHIVED',
]

function SkeletonLine({ width = 'w-full' }: { width?: string }) {
  return <div className={`h-3 ${width} rounded bg-zinc-200 dark:bg-zinc-700 animate-pulse`} />
}

export default function PostSubmissionView({
  ticket,
  waitingBody,
  needsInfoBody,
  completeBody,
  labels,
}: {
  ticket: SubmittedTicket
  waitingBody: string
  needsInfoBody: string
  completeBody: string
  labels: SubmitFormLabels
}) {
  const [pollStatus, setPollStatus] = useState<PollStatus>('SUBMITTED')
  const [questions, setQuestions] = useState<string[]>([])
  const [answers, setAnswers] = useState<string[]>([])
  const [answerLoading, setAnswerLoading] = useState(false)
  const [answerError, setAnswerError] = useState<string | null>(null)
  const [answered, setAnswered] = useState(false)
  const [pollTimedOut, setPollTimedOut] = useState(false)

  useEffect(() => {
    if (answered) return
    if (TERMINAL_STATUSES.includes(pollStatus)) return
    if (pollStatus === 'NEEDS_INFO') return

    let attempts = 0
    const maxAttempts = 30

    const interval = setInterval(async () => {
      attempts++
      try {
        const res = await fetch(`/api/tickets/${ticket.id}/poll`)
        if (!res.ok) return
        const data = (await res.json()) as { status: PollStatus; questions: string[] }
        setPollStatus(data.status)
        if (data.questions?.length) {
          setQuestions(data.questions)
          setAnswers(data.questions.map(() => ''))
        }
      } catch {
        // ignore transient fetch errors
      }

      if (attempts >= maxAttempts) {
        clearInterval(interval)
        setPollTimedOut(true)
      }
    }, 2000)

    return () => clearInterval(interval)
  }, [ticket.id, pollStatus, answered])

  function setAnswer(index: number, value: string) {
    setAnswers((prev) => prev.map((a, i) => (i === index ? value : a)))
  }

  const allAnswered = answers.length > 0 && answers.every((a) => a.trim().length > 0)

  async function handleAnswerSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!allAnswered) return
    setAnswerLoading(true)
    setAnswerError(null)
    const submissionText = questions
      .map((q, i) => `${i + 1}. ${q}\n\n${answers[i].trim()}`)
      .join('\n\n---\n\n')
    try {
      const res = await fetch(`/api/tickets/${ticket.id}/messages`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ submissionText }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        setAnswerError((data as { error?: string }).error ?? labels.error)
        return
      }
      setAnswered(true)
    } catch {
      setAnswerError(labels.error)
    } finally {
      setAnswerLoading(false)
    }
  }

  const isWaiting = pollStatus === 'SUBMITTED' && !pollTimedOut && !answered
  const isNeedsInfo = pollStatus === 'NEEDS_INFO' && !answered
  const isComplete = TERMINAL_STATUSES.includes(pollStatus) || answered || pollTimedOut

  return (
    <section className="space-y-4">
      <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-6 shadow-sm dark:border-emerald-400/30 dark:bg-emerald-400/10">
        <p className="text-xs font-semibold uppercase tracking-wide text-emerald-700 dark:text-emerald-300">
          {labels.ticketSubmitted}
        </p>
        <h2 className="mt-2 text-xl font-semibold text-zinc-950 dark:text-white">
          {formatLabel(labels.ticketInQueue, { referenceNumber: ticket.referenceNumber })}
        </h2>
      </div>

      {isWaiting && (
        <div className="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
          <div className="flex items-center gap-3 mb-4">
            <span className="inline-block h-4 w-4 rounded-full border-2 border-sky-600 border-t-transparent animate-spin dark:border-sky-400" />
            <p className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{labels.evaluating}</p>
          </div>
          <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">{waitingBody}</p>
          <div className="space-y-2">
            <SkeletonLine width="w-3/4" />
            <SkeletonLine width="w-full" />
            <SkeletonLine width="w-5/6" />
          </div>
        </div>
      )}

      {isNeedsInfo && questions.length > 0 && (
        <div className="rounded-lg border border-amber-300 bg-amber-50 p-6 dark:border-amber-400/40 dark:bg-amber-300/10">
          <h3 className="text-sm font-semibold text-amber-950 dark:text-amber-100 mb-1">
            {labels.moreDetails}
          </h3>
          <p className="text-sm text-amber-800 dark:text-amber-200 mb-5">{needsInfoBody}</p>
          <form onSubmit={handleAnswerSubmit} className="space-y-5">
            {questions.map((q, i) => (
              <FieldGroup key={i}>
                <FieldLabel htmlFor={`clarification-answer-${i}`} className="text-amber-900 dark:text-amber-100/90">
                  <span className="font-semibold">{i + 1}.</span> {q}
                </FieldLabel>
                <TextareaField
                  id={`clarification-answer-${i}`}
                  value={answers[i] ?? ''}
                  onChange={(e) => setAnswer(i, e.target.value)}
                  rows={6}
                  required
                  className="border-amber-400 focus:border-amber-500 focus:ring-amber-500/15 dark:border-amber-400/60 dark:focus:border-amber-300 dark:focus:ring-amber-300/15"
                  placeholder={labels.answerPlaceholder}
                />
              </FieldGroup>
            ))}
            {answerError && <p className="text-xs text-red-700 dark:text-red-300">{answerError}</p>}
            <PrimaryButton
              type="submit"
              loading={answerLoading}
              disabled={!allAnswered}
            >
              {answerLoading ? labels.submitting : labels.submitAdditional}
            </PrimaryButton>
          </form>
        </div>
      )}

      {isComplete && (
        <div className="rounded-lg border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
          <p className="text-sm text-zinc-700 dark:text-zinc-300">{completeBody}</p>
          <div className="mt-4">
            <Link
              href={`/tickets/${ticket.id}`}
              className="inline-block rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-semibold text-zinc-800 transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800"
            >
              {labels.viewTicket}
            </Link>
          </div>
        </div>
      )}
    </section>
  )
}