'use client'

import { Button, Checkbox } from '@heroui/react'

import { adminPrimaryButtonClass } from '@core/button-styles'
import {
  DisplayPill,
  DisplaySectionCard,
  DisplaySectionIntro,
  DisplaySurfaceCard,
} from '@my-resume/ui/display'

import type {
  AiResumeOptimizationChangedModule,
  AiResumeOptimizationResult,
} from '../types/ai-workbench.types'

const analysisTextBlockClass =
  'whitespace-pre-wrap leading-7 text-zinc-900 dark:text-zinc-100'
const analysisSectionCardClass = 'grid gap-3.5'
const analysisSectionCardLinkedClass =
  'grid gap-3.5 border-blue-500/50 shadow-[0_0_0_3px_rgba(59,130,246,0.14)]'
const moduleDiffHeaderClass = 'grid gap-3'
const moduleCheckClass =
  'inline-flex items-center gap-2.5 text-zinc-500 dark:text-zinc-400'
const moduleDiffStackClass = 'grid gap-3.5'
const moduleDiffEntryClass = 'grid gap-3'

interface AnalysisSuggestionPanelProps {
  applyPending: boolean
  linkedModule: AiResumeOptimizationChangedModule | null
  onApplySuggestion: () => void
  onToggleSelectedModule: (module: AiResumeOptimizationChangedModule) => void
  selectedModules: AiResumeOptimizationChangedModule[]
  suggestion: AiResumeOptimizationResult
}

export function AnalysisSuggestionPanel({
  applyPending,
  linkedModule,
  onApplySuggestion,
  onToggleSelectedModule,
  selectedModules,
  suggestion,
}: AnalysisSuggestionPanelProps) {
  return (
    <>
      <DisplaySectionCard
        className="grid gap-4"
        compact
        description="服务端已基于当前草稿生成结构化 patch，并完成当前简历结构校验。"
        eyebrow="结构化 diff"
        title="当前草稿 vs AI 建议稿">
        <div className="dashboard-badge-row">
          {suggestion.changedModules.map((module) => (
            <DisplayPill key={module}>影响模块：{module}</DisplayPill>
          ))}
          <DisplayPill>
            Provider：{suggestion.providerSummary.provider} /{' '}
            {suggestion.providerSummary.model}
          </DisplayPill>
        </div>
        <div className={analysisTextBlockClass}>{suggestion.summary}</div>
        {suggestion.focusAreas.length > 0 ? (
          <ul className="muted-list">
            {suggestion.focusAreas.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        ) : null}
      </DisplaySectionCard>

      <div className="grid gap-4">
        {suggestion.moduleDiffs.map((moduleDiff) => {
          const checked = selectedModules.includes(moduleDiff.module)

          return (
            <DisplaySurfaceCard
              as="article"
              className={
                linkedModule === moduleDiff.module
                  ? analysisSectionCardLinkedClass
                  : analysisSectionCardClass
              }
              id={`module-diff-${moduleDiff.module}`}
              key={moduleDiff.module}>
              <div className={moduleDiffHeaderClass}>
                <DisplaySectionIntro
                  compact
                  description={moduleDiff.reason}
                  eyebrow={`模块：${moduleDiff.module}`}
                  title={moduleDiff.title}
                  titleAs="h3"
                />
                <Checkbox
                  className={moduleCheckClass}
                  isSelected={checked}
                  onChange={() => onToggleSelectedModule(moduleDiff.module)}>
                  {`应用此模块变更：${moduleDiff.module}`}
                </Checkbox>
              </div>

              <div className={moduleDiffStackClass}>
                {moduleDiff.entries.map((entry) => (
                  <div className={moduleDiffEntryClass} key={entry.key}>
                    <strong>{entry.label}</strong>
                    <div className="grid gap-3 md:grid-cols-2">
                      <div className="status-box">
                        <strong>当前草稿</strong>
                        <span>{entry.currentValue}</span>
                      </div>
                      <div className="status-box">
                        <strong>AI 建议稿</strong>
                        <span>{entry.suggestedValue}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </DisplaySurfaceCard>
          )
        })}
      </div>

      <DisplaySectionCard
        className="card stack"
        compact
        description="只有勾选的模块会被服务端写回当前草稿，避免整份覆盖；公开站仍需手动发布。"
        eyebrow="写回草稿"
        title="将已选变更写回当前草稿"
        titleAs="h3">
        <div className="dashboard-inline-note">
          当前已选择 {selectedModules.length} / {suggestion.changedModules.length}{' '}
          个模块。
        </div>
        <div className="dashboard-entry-actions">
          <Button
            className={adminPrimaryButtonClass}
            isDisabled={applyPending || selectedModules.length === 0}
            onPress={onApplySuggestion}
            size="md"
            type="button"
            variant="primary">
            {applyPending ? '正在写回当前草稿...' : '应用已选变更到当前草稿'}
          </Button>
        </div>
      </DisplaySectionCard>
    </>
  )
}
