'use client'

import { useState } from 'react'
import { CheckIcon, ChevronIcon, WarningIcon, XIcon } from '@/components/ui/icons'
import type { TextureDiagnosticReport } from '@/lib/client-types'

interface TextureDiagnosticsPanelProps {
  report?: TextureDiagnosticReport
}

const idleReport: TextureDiagnosticReport = {
  status: 'idle',
  summary: 'Deposez un dossier pour analyser les textures du model.gltf.',
  issues: [],
}

const statusStyles = {
  idle: {
    icon: <WarningIcon className="h-4 w-4" />,
    label: 'En attente',
    tone: 'border-white/15 bg-white/5 text-gray-400',
  },
  ok: {
    icon: <CheckIcon className="h-4 w-4" />,
    label: 'OK',
    tone: 'border-green-500/30 bg-green-500/10 text-green-300',
  },
  warning: {
    icon: <WarningIcon className="h-4 w-4" />,
    label: 'A verifier',
    tone: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-300',
  },
  error: {
    icon: <XIcon className="h-4 w-4" />,
    label: 'Probleme',
    tone: 'border-red-500/30 bg-red-500/10 text-red-300',
  },
}

const issueStyles = {
  error: 'border-red-500/25 bg-red-500/10 text-red-200',
  warning: 'border-yellow-500/25 bg-yellow-500/10 text-yellow-200',
}

export default function TextureDiagnosticsPanel({
  report,
}: TextureDiagnosticsPanelProps) {
  const currentReport = report || idleReport
  const style = statusStyles[currentReport.status]
  const [isOpen, setIsOpen] = useState(true)

  return (
    <aside className="overflow-hidden rounded-xl border border-white/15 bg-black-800 text-xs text-gray-400 lg:max-h-[450px]">
      <button
        type="button"
        onClick={() => setIsOpen((open) => !open)}
        aria-expanded={isOpen}
        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-white/5"
      >
        <span className="flex min-w-0 items-center gap-2">
          <ChevronIcon className={`h-4 w-4 shrink-0 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
          <span className="truncate text-sm font-semibold text-gray-100">Diagnostic textures</span>
        </span>
        <span className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-1 ${style.tone}`}>
          {style.icon}
          {style.label}
        </span>
      </button>

      {isOpen && (
        <div className="max-h-[380px] overflow-auto border-t border-white/10 px-4 py-3">
          <p className="leading-relaxed">{currentReport.summary}</p>

          {currentReport.issues.length > 0 ? (
            <ul className="mt-3 space-y-2">
              {currentReport.issues.map((issue, index) => (
                <li
                  key={`${issue.title}-${index}`}
                  className={`rounded-xl border px-3 py-2 ${issueStyles[issue.severity]}`}
                >
                  <p className="font-medium">{issue.title}</p>
                  <p className="mt-1 leading-relaxed text-gray-300">{issue.detail}</p>
                </li>
              ))}
            </ul>
          ) : currentReport.status === 'idle' ? (
            <p className="mt-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2 leading-relaxed">
              Les resultats apparaitront ici apres selection du dossier.
            </p>
          ) : (
            <p className="mt-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2 leading-relaxed">
              Aucun probleme texture detecte cote app.
            </p>
          )}
        </div>
      )}
    </aside>
  )
}