/**
 * Renders final (non-streaming) markdown as HTML: reasoning + think collapsibles + main.
 * Used for agent final output and any other source that uses the marked → HTML pipeline.
 */

import React from 'react'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
import { ChevronDown } from 'lucide-react'
import type { RenderingNodeState } from '../useRenderingNodeState'

const MARKDOWN_CLASS =
  'rendering-markdown p-3 text-sm [&_h1]:text-lg [&_h2]:text-base [&_h3]:text-sm [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_p]:my-1.5 [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded text-muted-foreground'
const MARKDOWN_MAIN_CLASS =
  'rendering-markdown min-h-0 flex-1 w-full overflow-auto p-3 text-sm [&_h1]:text-xl [&_h2]:text-lg [&_h3]:text-base [&_ul]:list-disc [&_ol]:list-decimal [&_ul]:pl-5 [&_ol]:pl-5 [&_p]:my-2 [&_pre]:bg-muted [&_pre]:p-2 [&_pre]:rounded'

export type StaticMarkdownHtmlViewProps = {
  state: RenderingNodeState
}

export function StaticMarkdownHtmlView({ state }: StaticMarkdownHtmlViewProps) {
  return (
    <div className="min-h-0 flex-1 flex flex-col overflow-hidden">
      {state.reasoningHtml ? (
        <Collapsible defaultOpen={false} className="group shrink-0 border-b border-border">
          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted/50 nodrag nopan">
            Reasoning
            <ChevronDown className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div
              className={MARKDOWN_CLASS + ' max-h-48 overflow-auto'}
              dangerouslySetInnerHTML={{ __html: state.reasoningHtml }}
            />
          </CollapsibleContent>
        </Collapsible>
      ) : null}
      {state.renderedThinkSplit.think ? (
        <Collapsible defaultOpen={false} className="group shrink-0 border-b border-border">
          <CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:bg-muted/50 nodrag nopan">
            Thinking
            <ChevronDown className="size-3.5 shrink-0 transition-transform group-data-[state=open]:rotate-180" />
          </CollapsibleTrigger>
          <CollapsibleContent>
            <div
              className={MARKDOWN_CLASS + ' max-h-48 overflow-auto'}
              dangerouslySetInnerHTML={{ __html: state.renderedThinkSplit.think }}
            />
          </CollapsibleContent>
        </Collapsible>
      ) : null}
      <div
        className={MARKDOWN_MAIN_CLASS}
        dangerouslySetInnerHTML={{ __html: state.renderedThinkSplit.main }}
      />
    </div>
  )
}