'use client'

import { AlertCircle, CheckCircle2, Sparkles, Wand2 } from 'lucide-react'
import type { SEOCheck } from '@actuate-media/cms-core/seo/analysis'

export function SeoAnalysisList({
  checks,
  onAiFixField,
  aiFixField,
}: {
  checks: SEOCheck[]
  onAiFixField?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
  aiFixField?: string | null
}) {
  const problems = checks.filter((c) => c.status === 'problem' || c.status === 'improvement')
  const good = checks.filter((c) => c.status === 'good')

  if (checks.length === 0) {
    return (
      <p className="text-[12px] text-[var(--muted)]">
        Add content and a focus keyphrase to run SEO checks.
      </p>
    )
  }

  return (
    <div className="space-y-4">
      {problems.length > 0 && (
        <div>
          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
            Problems ({problems.length})
          </h4>
          <ul className="space-y-2">
            {problems.map((check) => (
              <AnalysisRow
                key={check.id}
                check={check}
                onAiFix={onAiFixField}
                aiBusy={aiFixField}
              />
            ))}
          </ul>
        </div>
      )}
      {good.length > 0 && (
        <div>
          <h4 className="mb-2 text-[11px] font-semibold tracking-wide text-[var(--sub)] uppercase">
            Good results ({good.length})
          </h4>
          <ul className="space-y-2">
            {good.map((check) => (
              <AnalysisRow key={check.id} check={check} />
            ))}
          </ul>
        </div>
      )}
    </div>
  )
}

function AnalysisRow({
  check,
  onAiFix,
  aiBusy,
}: {
  check: SEOCheck
  onAiFix?: (field: 'metaTitle' | 'metaDescription' | 'focusKeyword') => void
  aiBusy?: string | null
}) {
  const tone =
    check.status === 'good'
      ? 'text-[var(--suc)]'
      : check.status === 'improvement'
        ? 'text-[var(--warn)]'
        : 'text-[var(--err)]'
  const Icon = check.status === 'good' ? CheckCircle2 : AlertCircle
  const aiField = aiFieldForCheck(check.id)

  return (
    <li className="flex items-start gap-2 rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-2">
      <Icon className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${tone}`} aria-hidden />
      <div className="min-w-0 flex-1">
        <div className="text-[12.5px] font-medium text-[var(--txt)]">{check.title}</div>
        <p className="text-[11.5px] text-[var(--sub)]">{check.description}</p>
      </div>
      {onAiFix && aiField && check.status !== 'good' && (
        <button
          type="button"
          aria-label={`AI help for ${check.title}`}
          disabled={Boolean(aiBusy)}
          onClick={() => onAiFix(aiField)}
          className="inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-[11px] font-medium text-[var(--acc)] hover:bg-[var(--acc-l)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:opacity-60"
        >
          {aiBusy === aiField ? (
            <Sparkles className="h-3 w-3 animate-pulse" aria-hidden />
          ) : (
            <Wand2 className="h-3 w-3" aria-hidden />
          )}
          AI
        </button>
      )}
    </li>
  )
}

function aiFieldForCheck(checkId: string): 'metaTitle' | 'metaDescription' | 'focusKeyword' | null {
  if (checkId.includes('meta-title') || checkId.includes('keyphrase-in-title')) return 'metaTitle'
  if (checkId.includes('meta-description') || checkId.includes('keyphrase-in-meta-description')) {
    return 'metaDescription'
  }
  if (checkId.includes('keyphrase')) return 'focusKeyword'
  return null
}
