import { useState } from 'react';
import { ChevronDown, TriangleAlert, X } from 'lucide-react';
import type { AppDiagnostic } from '../../stores/useAppStore';
import { IconButton } from '../../components/ui';
export function DiagnosticNotice({
  value,
  onClose,
}: {
  value: AppDiagnostic;
  onClose: () => void;
}) {
  const [expanded, setExpanded] = useState(false);
  return (
    <section
      role="alert"
      className="absolute bottom-4 left-1/2 z-30 w-[min(42rem,calc(100%-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-danger-border bg-panel shadow-2xl"
    >
      <div className="flex items-start gap-3 p-3">
        <span className="mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-danger-soft text-danger">
          <TriangleAlert className="h-4 w-4" />
        </span>
        <div className="min-w-0 flex-1">
          <h2 className="text-sm font-semibold text-text-primary">{value.summary}</h2>
          {value.path && (
            <p className="mt-0.5 break-all text-xs text-text-tertiary" title={value.path}>
              路径：{value.path}
            </p>
          )}
          <button
            type="button"
            aria-expanded={expanded}
            className="mt-1 flex items-center gap-1 text-xs text-danger hover:underline"
            onClick={() => setExpanded((v) => !v)}
          >
            技术详情
            <ChevronDown className={`h-3 w-3 ${expanded ? 'rotate-180' : ''}`} />
          </button>
        </div>
        <IconButton aria-label="关闭错误" tooltip="关闭" onClick={onClose}>
          <X className="h-4 w-4" />
        </IconButton>
      </div>
      {expanded && (
        <pre className="max-h-36 overflow-auto whitespace-pre-wrap break-words border-t border-danger-border bg-danger-soft p-3 text-xs text-danger">
          {value.detail}
        </pre>
      )}
    </section>
  );
}