import DraftResponseButton from './DraftResponseButton'
import DraftPoller from './DraftPoller'
import ExpertResponseForm from './ExpertResponseForm'

type MessageGroup = {
  id: string
  role: string
  authorLabel: string
  items: Array<{
    id: string
    displayText: string
    clarificationAnswers?: Array<{ question: string; answer: string }> | null
  }>
}

export function TicketHeader({
  referenceNumber,
  title,
  fallbackTitle,
  statusLabel,
  degradedAiLabel,
  showDegradedAi,
}: {
  referenceNumber: string
  title: string | null
  fallbackTitle: string
  statusLabel: string
  degradedAiLabel: string
  showDegradedAi: boolean
}) {
  return (
    <div>
      <p className="text-xs text-zinc-500 dark:text-zinc-400 font-mono mb-1">{referenceNumber}</p>
      <h1 className="text-xl font-semibold text-zinc-950 dark:text-white">
        {title ?? fallbackTitle}
      </h1>
      <span className="inline-block mt-2 px-2 py-0.5 rounded text-xs font-medium bg-sky-50 text-sky-800 border border-sky-200 dark:bg-sky-400/10 dark:text-sky-200 dark:border-sky-400/30">
        {statusLabel}
      </span>
      {showDegradedAi && (
        <p className="mt-2 text-sm text-amber-700 dark:text-amber-300">
          {degradedAiLabel}
        </p>
      )}
    </div>
  )
}

export function AiSummaryPanel({
  title,
  content,
}: {
  title: string
  content: string
}) {
  return (
    <section className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
      <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{title}</h2>
      <p className="mt-2 whitespace-pre-wrap text-sm leading-6 text-zinc-700 dark:text-zinc-300">
        {content}
      </p>
    </section>
  )
}

export function SubmissionDetailsPanel({
  items,
}: {
  items: Array<{ label: string; value: string | null; wide?: boolean; capitalize?: boolean }>
}) {
  const visibleItems = items.filter((item) => item.value)
  if (visibleItems.length === 0) return null

  return (
    <section className="rounded-lg border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
      <dl className="grid grid-cols-[minmax(7.5rem,auto)_1fr] gap-x-4 gap-y-1.5 text-xs leading-5 sm:grid-cols-[minmax(8.5rem,auto)_1fr_minmax(8.5rem,auto)_1fr]">
        {visibleItems.map((item) => (
          <div key={item.label} className={item.wide ? 'contents sm:[&>dt]:col-start-1 sm:[&>dt]:col-end-2 sm:[&>dd]:col-start-2 sm:[&>dd]:col-end-5' : 'contents'}>
            <dt className="font-medium text-zinc-500 dark:text-zinc-400">{item.label}</dt>
            <dd className={`${item.capitalize ? 'capitalize ' : ''}text-zinc-950 dark:text-zinc-100`}>{item.value}</dd>
          </div>
        ))}
      </dl>
    </section>
  )
}

export function MessageThread({ groups }: { groups: MessageGroup[] }) {
  return (
    <div className="space-y-3">
      {groups.map((group) => (
        <div
          key={group.id}
          className={`rounded-lg border p-4 text-sm ${
            group.role === 'line_manager'
              ? 'bg-white border-zinc-200 text-zinc-950 dark:bg-zinc-900 dark:border-zinc-800 dark:text-zinc-100'
              : group.role === 'expert'
                ? 'bg-sky-50 border-sky-200 text-sky-950 dark:bg-sky-400/10 dark:border-sky-400/30 dark:text-sky-100'
                : 'bg-zinc-100 border-zinc-200 text-zinc-600 italic dark:bg-zinc-900/60 dark:border-zinc-800 dark:text-zinc-400'
          }`}
        >
          <p className="mb-3 text-xs font-medium text-zinc-500 dark:text-zinc-400">{group.authorLabel}</p>
          <div className="space-y-4">
            {group.items.map((msg) => (
              <div key={msg.id} className="space-y-3">
                {msg.clarificationAnswers ? (
                  msg.clarificationAnswers.map((item, index) => (
                    <div key={`${msg.id}-${index}`} className="space-y-1">
                      <p className="text-xs leading-5 text-zinc-500 dark:text-zinc-400">
                        {index + 1}. {item.question}
                      </p>
                      <p className="whitespace-pre-wrap text-sm leading-6">{item.answer}</p>
                    </div>
                  ))
                ) : (
                  <p className="whitespace-pre-wrap text-sm leading-6">{msg.displayText}</p>
                )}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}

export function ClarificationWaitingPanel({
  title,
  body,
  questions,
}: {
  title: string
  body: string
  questions: string[]
}) {
  return (
    <section className="rounded-lg border border-amber-300 bg-amber-50 p-5 dark:border-amber-400/40 dark:bg-amber-300/10">
      <h2 className="text-sm font-semibold text-amber-950 dark:text-amber-100">
        {title}
      </h2>
      <p className="mt-2 text-sm leading-6 text-amber-900 dark:text-amber-100/90">
        {body}
      </p>
      <ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-amber-900 dark:text-amber-100/90">
        {questions.map((question) => (
          <li key={question}>{question}</li>
        ))}
      </ul>
    </section>
  )
}

export function ExpertManualResponseSection({
  title,
  body,
  ticketId,
  severityOptions,
  concernOptions,
  submitterLanguage,
}: {
  title: string
  body: string
  ticketId: string
  severityOptions: string[]
  concernOptions: string[]
  submitterLanguage: 'en' | 'es'
}) {
  return (
    <section className="space-y-4">
      <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
        <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{title}</h2>
        <p className="mt-1 text-sm leading-6 text-zinc-600 dark:text-zinc-400">
          {body}
        </p>
      </div>
      <ExpertResponseForm
        ticketId={ticketId}
        initialDraft=""
        severityOptions={severityOptions}
        concernOptions={concernOptions}
        submitterLanguage={submitterLanguage}
      />
    </section>
  )
}

export function DraftRequestPanel({
  title,
  body,
  ticketId,
  buttonLabel,
}: {
  title: string
  body: string
  ticketId: string
  buttonLabel: string
}) {
  return (
    <section className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{title}</h2>
          <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
            {body}
          </p>
        </div>
        <DraftResponseButton ticketId={ticketId} label={buttonLabel} />
      </div>
    </section>
  )
}

export function DraftGeneratingState({ label }: { label: string }) {
  return (
    <>
      <DraftPoller />
      <p className="rounded-lg border border-sky-200 bg-sky-50 p-4 text-sm text-sky-900 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-100">
        {label}
      </p>
    </>
  )
}

export function DraftResponseSection({
  ticketId,
  draft,
  sources,
  knowledgeGaps,
  labels,
  severityOptions,
  concernOptions,
  submitterLanguage,
}: {
  ticketId: string
  draft: string
  sources: Array<{ index: number; title: string; slug: string; score?: number }> | undefined
  knowledgeGaps: string[] | undefined
  labels: {
    kbSources: string
    regenerateDraft: string
    noKbSources: string
    knowledgeGaps: string
  }
  severityOptions: string[]
  concernOptions: string[]
  submitterLanguage: 'en' | 'es'
}) {
  return (
    <section className="space-y-4">
      <div className="rounded-lg border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
        <div className="flex items-center justify-between mb-2">
          <h2 className="text-sm font-semibold text-zinc-950 dark:text-white">{labels.kbSources}</h2>
          <DraftResponseButton ticketId={ticketId} label={labels.regenerateDraft} />
        </div>
        {sources?.length ? (
          <ul className="mt-2 space-y-2 text-sm text-zinc-700 dark:text-zinc-300">
            {sources.map((source) => (
              <li key={source.index} className="break-all">
                [{source.index}] {source.title}
                <span className="text-zinc-500 dark:text-zinc-400"> · {source.slug}</span>
              </li>
            ))}
          </ul>
        ) : (
          <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">{labels.noKbSources}</p>
        )}
        {knowledgeGaps?.length ? (
          <div className="mt-4 rounded border border-amber-300 bg-amber-50 p-3 dark:border-amber-400/40 dark:bg-amber-300/10">
            <h3 className="text-xs font-semibold uppercase tracking-wide text-amber-900 dark:text-amber-100">
              {labels.knowledgeGaps}
            </h3>
            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-amber-900 dark:text-amber-100/90">
              {knowledgeGaps.map((gap) => (
                <li key={gap}>{gap}</li>
              ))}
            </ul>
          </div>
        ) : null}
      </div>
      <ExpertResponseForm
        ticketId={ticketId}
        initialDraft={draft}
        severityOptions={severityOptions}
        concernOptions={concernOptions}
        submitterLanguage={submitterLanguage}
      />
    </section>
  )
}