import React, { useState } from 'react';
import { ChevronRight, RotateCcw, CheckCircle2, AlertTriangle, Info } from 'lucide-react';

export interface TreeNode {
  id: string;
  question: string;
  hint?: string;
  yesLabel?: string;
  noLabel?: string;
  yes?: TreeNode;
  no?: TreeNode;
  result?: string;
  resultType?: 'correct' | 'warning' | 'info';
  ruleRef?: string;
}

export interface TreeScenario {
  label: string;       // Short tab label, e.g. "Sentence 1"
  sentence: string;    // The sentence to analyze
  tree: TreeNode;
}

interface DecisionTreeWidgetProps {
  scenarios: TreeScenario[];
  accentColor?: string;
}

type Answers = Record<string, 'yes' | 'no'>;

/** Walk the tree following answers, return ordered list of [node, answer|null] pairs traversed */
function getPath(root: TreeNode, answers: Answers): Array<{ node: TreeNode; answer: 'yes' | 'no' | null }> {
  const path: Array<{ node: TreeNode; answer: 'yes' | 'no' | null }> = [];
  let current: TreeNode | undefined = root;
  while (current) {
    const ans = answers[current.id] ?? null;
    path.push({ node: current, answer: ans });
    if (ans === null) break; // not answered yet — this is the active node
    if (current.result !== undefined) break; // leaf
    current = ans === 'yes' ? current.yes : current.no;
  }
  return path;
}

const RESULT_STYLES = {
  correct: {
    bg: 'bg-green-50',
    border: 'border-green-300',
    text: 'text-green-800',
    icon: <CheckCircle2 className="w-5 h-5 text-green-600 shrink-0 mt-0.5" />,
  },
  warning: {
    bg: 'bg-amber-50',
    border: 'border-amber-300',
    text: 'text-amber-800',
    icon: <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />,
  },
  info: {
    bg: 'bg-blue-50',
    border: 'border-blue-300',
    text: 'text-blue-800',
    icon: <Info className="w-5 h-5 text-blue-600 shrink-0 mt-0.5" />,
  },
};

export default function DecisionTreeWidget({ scenarios, accentColor = 'purple' }: DecisionTreeWidgetProps) {
  const [activeScenario, setActiveScenario] = useState(0);
  const [answers, setAnswers] = useState<Answers>({});

  const scenario = scenarios[activeScenario];
  const path = getPath(scenario.tree, answers);
  const lastStep = path[path.length - 1];
  const isLeaf = lastStep.node.result !== undefined;
  const isComplete = isLeaf && lastStep.answer === null; // reached leaf, no more choices needed
  // Actually leaf nodes don't have yes/no — they just show result when we arrive
  const atLeaf = lastStep.node.result !== undefined;

  const handleAnswer = (nodeId: string, ans: 'yes' | 'no') => {
    setAnswers(prev => {
      // Remove all answers for nodes that come AFTER this one in the current path
      const pathIds = path.map(p => p.node.id);
      const idx = pathIds.indexOf(nodeId);
      const newAnswers: Answers = {};
      for (let i = 0; i < idx; i++) {
        newAnswers[pathIds[i]] = prev[pathIds[i]]!;
      }
      newAnswers[nodeId] = ans;
      return newAnswers;
    });
  };

  const resetScenario = () => setAnswers({});

  const switchScenario = (i: number) => {
    setActiveScenario(i);
    setAnswers({});
  };

  return (
    <div className="rounded-2xl border border-gray-200 bg-white overflow-hidden shadow-sm">
      {/* Scenario tab strip */}
      {scenarios.length > 1 && (
        <div className="flex border-b border-gray-200 bg-gray-50 overflow-x-auto">
          {scenarios.map((sc, i) => (
            <button
              key={i}
              onClick={() => switchScenario(i)}
              className={`px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors ${
                i === activeScenario
                  ? `bg-white border-b-2 border-${accentColor}-600 text-${accentColor}-700`
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              {sc.label}
            </button>
          ))}
        </div>
      )}

      {/* Sentence under analysis */}
      <div className={`px-5 py-4 border-b border-gray-100 bg-${accentColor}-50`}>
        <p className={`text-xs font-semibold uppercase tracking-wider text-${accentColor}-500 mb-1`}>Analyze this sentence</p>
        <p className="text-gray-800 font-medium italic leading-relaxed">"{scenario.sentence}"</p>
      </div>

      {/* Breadcrumb path */}
      {path.length > 1 && (
        <div className="px-5 py-2.5 border-b border-gray-100 bg-gray-50 flex flex-wrap items-center gap-1 text-xs text-gray-500">
          {path.map((step, i) => {
            if (i === path.length - 1) return null; // last step shown below, not in crumb
            const isAnswered = step.answer !== null;
            return (
              <React.Fragment key={step.node.id}>
                <button
                  onClick={() => {
                    // Reset from this node forward
                    const pathIds = path.map(p => p.node.id);
                    const idx = pathIds.indexOf(step.node.id);
                    setAnswers(prev => {
                      const newAnswers: Answers = {};
                      for (let j = 0; j < idx; j++) newAnswers[pathIds[j]] = prev[pathIds[j]]!;
                      return newAnswers;
                    });
                  }}
                  className={`px-2 py-0.5 rounded transition-colors ${
                    isAnswered ? 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' : 'text-gray-400'
                  }`}
                >
                  {step.node.question.length > 40 ? step.node.question.slice(0, 40) + '…' : step.node.question}
                  {step.answer && (
                    <span className={`ml-1 font-semibold ${step.answer === 'yes' ? 'text-green-600' : 'text-red-500'}`}>
                      → {step.answer === 'yes' ? (step.node.yesLabel ?? 'Yes') : (step.node.noLabel ?? 'No')}
                    </span>
                  )}
                </button>
                <ChevronRight className="w-3 h-3 shrink-0" />
              </React.Fragment>
            );
          })}
        </div>
      )}

      {/* Active node */}
      <div className="px-5 py-5">
        {atLeaf ? (
          /* Leaf result */
          (() => {
            const node = lastStep.node;
            const rType = node.resultType ?? 'correct';
            const s = RESULT_STYLES[rType];
            return (
              <div className={`rounded-xl border p-4 ${s.bg} ${s.border}`}>
                <div className="flex gap-3">
                  {s.icon}
                  <div>
                    <p className={`font-semibold ${s.text} leading-snug`}>{node.result}</p>
                    {node.ruleRef && (
                      <p className={`mt-2 text-sm font-mono ${s.text} opacity-80 bg-white/60 rounded px-2 py-1 inline-block`}>
                        {node.ruleRef}
                      </p>
                    )}
                  </div>
                </div>
              </div>
            );
          })()
        ) : (
          /* Decision question */
          (() => {
            const node = lastStep.node;
            return (
              <div>
                <p className="font-semibold text-gray-800 text-base leading-snug mb-1">{node.question}</p>
                {node.hint && <p className="text-sm text-gray-500 mb-4">{node.hint}</p>}
                {!node.hint && <div className="mb-4" />}
                <div className="flex flex-wrap gap-3">
                  <button
                    onClick={() => handleAnswer(node.id, 'yes')}
                    className="flex-1 min-w-[140px] px-4 py-3 rounded-xl border-2 border-green-300 bg-green-50 text-green-800 font-semibold text-sm hover:bg-green-100 transition-colors"
                  >
                    ✓ {node.yesLabel ?? 'Yes'}
                  </button>
                  <button
                    onClick={() => handleAnswer(node.id, 'no')}
                    className="flex-1 min-w-[140px] px-4 py-3 rounded-xl border-2 border-red-200 bg-red-50 text-red-700 font-semibold text-sm hover:bg-red-100 transition-colors"
                  >
                    ✗ {node.noLabel ?? 'No'}
                  </button>
                </div>
              </div>
            );
          })()
        )}
      </div>

      {/* Footer */}
      <div className="px-5 pb-4 flex items-center gap-3">
        <button
          onClick={resetScenario}
          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors"
        >
          <RotateCcw className="w-3.5 h-3.5" />
          Try again
        </button>
        {atLeaf && scenarios.length > 1 && activeScenario < scenarios.length - 1 && (
          <button
            onClick={() => switchScenario(activeScenario + 1)}
            className={`ml-auto flex items-center gap-1.5 text-sm font-semibold text-${accentColor}-700 hover:text-${accentColor}-900 transition-colors`}
          >
            Next sentence <ChevronRight className="w-4 h-4" />
          </button>
        )}
      </div>
    </div>
  );
}
