import { useState } from 'react';
import { ChevronRight, ChevronDown, CheckCircle, XCircle, AlertCircle } from 'lucide-react';

export interface DecisionNode {
  id: string;
  question: string;
  yes?: DecisionNode;
  no?: DecisionNode;
  result?: 'positive' | 'negative' | 'neutral';
  resultText?: string;
}

interface DecisionTreeViewerProps {
  tree: DecisionNode;
  title?: string;
  onComplete?: (result: 'positive' | 'negative' | 'neutral') => void;
}

export function DecisionTreeViewer({ tree, title, onComplete }: DecisionTreeViewerProps) {
  const [currentNode, setCurrentNode] = useState<DecisionNode>(tree);
  const [history, setHistory] = useState<DecisionNode[]>([]);
  const [completed, setCompleted] = useState(false);
  const [result, setResult] = useState<'positive' | 'negative' | 'neutral' | null>(null);

  const handleYes = () => {
    if (currentNode.yes) {
      setHistory([...history, currentNode]);
      if (currentNode.yes.result) {
        setResult(currentNode.yes.result);
        setCompleted(true);
        onComplete?.(currentNode.yes.result);
      } else {
        setCurrentNode(currentNode.yes);
      }
    }
  };

  const handleNo = () => {
    if (currentNode.no) {
      setHistory([...history, currentNode]);
      if (currentNode.no.result) {
        setResult(currentNode.no.result);
        setCompleted(true);
        onComplete?.(currentNode.no.result);
      } else {
        setCurrentNode(currentNode.no);
      }
    }
  };

  const handleBack = () => {
    if (history.length > 0) {
      const previous = history[history.length - 1];
      setHistory(history.slice(0, -1));
      setCurrentNode(previous);
      setCompleted(false);
      setResult(null);
    }
  };

  const reset = () => {
    setCurrentNode(tree);
    setHistory([]);
    setCompleted(false);
    setResult(null);
  };

  const getResultIcon = () => {
    switch (result) {
      case 'positive':
        return <CheckCircle className="w-16 h-16 text-green-500" />;
      case 'negative':
        return <XCircle className="w-16 h-16 text-red-500" />;
      default:
        return <AlertCircle className="w-16 h-16 text-yellow-500" />;
    }
  };

  const getResultColor = () => {
    switch (result) {
      case 'positive':
        return 'bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800';
      case 'negative':
        return 'bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800';
      default:
        return 'bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800';
    }
  };

  return (
    <div className="space-y-4">
      {title && (
        <h2 className="text-lg font-semibold text-foreground">{title}</h2>
      )}

      <div className={`rounded-xl border p-6 ${completed ? getResultColor() : 'bg-card border-border'}`}>
        {completed && result ? (
          <div className="text-center space-y-4">
            {getResultIcon()}
            <div>
              <h3 className="text-xl font-bold text-foreground">
                {result === 'positive' && 'Resultado: Positivo'}
                {result === 'negative' && 'Resultado: Negativo'}
                {result === 'neutral' && 'Resultado: Neutro'}
              </h3>
              {currentNode.resultText && (
                <p className="mt-2 text-muted-foreground">{currentNode.resultText}</p>
              )}
            </div>
            <button
              onClick={reset}
              className="px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
            >
              Reiniciar
            </button>
          </div>
        ) : (
          <div className="space-y-6">
            <div className="flex items-start gap-3">
              <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
                <span className="text-sm font-semibold text-primary">
                  {history.length + 1}
                </span>
              </div>
              <p className="text-lg font-medium text-foreground pt-1">
                {currentNode.question}
              </p>
            </div>

            <div className="flex gap-3">
              <button
                onClick={handleYes}
                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium"
              >
                <CheckCircle className="w-5 h-5" />
                Sí
              </button>
              <button
                onClick={handleNo}
                className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors font-medium"
              >
                <XCircle className="w-5 h-5" />
                No
              </button>
            </div>
          </div>
        )}
      </div>

      {history.length > 0 && !completed && (
        <div className="flex items-center justify-between">
          <button
            onClick={handleBack}
            className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            <ChevronRight className="w-4 h-4 rotate-180" />
            Volver atrás
          </button>
          <span className="text-sm text-muted-foreground">
            Paso {history.length + 1}
          </span>
        </div>
      )}
    </div>
  );
}
