import React, { useState } from 'react';
import { Search, ChevronRight, Activity, TrendingUp, CheckCircle, BookOpen, Trash2, Plus, Info, Award, ArrowUp } from 'lucide-react';

const SuccessCriteriaBuilder = () => {
  const [standardInput, setStandardInput] = useState("");
  const [identifiedVerbs, setIdentifiedVerbs] = useState([]);
  const [rankedVerbs, setRankedVerbs] = useState([]);
  const [successCriteria, setSuccessCriteria] = useState([]);
  const [step, setStep] = useState(1); // 1: Input, 2: Verb ID, 3: Ranking, 4: Editing, 5: Visual Ladder

  // Difficulty tiers for automatic suggestions
  const verbDifficultyMap = {
    'identify': 1, 'list': 1, 'recall': 1, 'locate': 1, 'find': 1,
    'describe': 2, 'summarize': 2, 'explain': 2, 'interpret': 2, 'illustrate': 2,
    'apply': 3, 'calculate': 3, 'demonstrate': 3, 'solve': 3, 'compare': 3, 'contrast': 3,
    'analyze': 4, 'categorize': 4, 'examine': 4, 'organize': 4,
    'evaluate': 5, 'justify': 5, 'critique': 5, 'prove': 5,
    'create': 6, 'design': 6, 'construct': 6, 'compose': 6, 'develop': 6
  };

  const handleProcessStandard = () => {
    const commonVerbs = Object.keys(verbDifficultyMap);
    const found = commonVerbs.filter(v => 
      new RegExp(`\\b${v}(s|es|ing|ed)?\\b`, 'i').test(standardInput)
    );
    setIdentifiedVerbs([...new Set(found)]);
    setStep(2);
  };

  const toggleVerb = (verb) => {
    setIdentifiedVerbs(prev => 
      prev.includes(verb) ? prev.filter(v => v !== verb) : [...prev, verb]
    );
  };

  const moveToRanking = () => {
    const initialRanked = identifiedVerbs.map(v => ({
      name: v,
      level: verbDifficultyMap[v.toLowerCase()] || 3
    })).sort((a, b) => a.level - b.level);
    setRankedVerbs(initialRanked);
    setStep(3);
  };

  const updateRank = (index, newLevel) => {
    const updated = [...rankedVerbs];
    updated[index].level = parseInt(newLevel);
    setRankedVerbs(updated.sort((a, b) => a.level - b.level));
  };

  const buildLadder = () => {
    const initialCriteria = rankedVerbs.map(v => ({
      verb: v.name,
      text: `I know I am successful when I can ${v.name} ...`,
      level: v.level
    }));
    setSuccessCriteria(initialCriteria);
    setStep(4);
  };

  const updateCriteria = (index, val) => {
    const updated = [...successCriteria];
    updated[index].text = val;
    setSuccessCriteria(updated);
  };

  const addCriteria = () => {
    setSuccessCriteria([...successCriteria, { verb: 'custom', text: 'I know I am successful when I can...', level: 7 }]);
  };

  const removeCriteria = (index) => {
    setSuccessCriteria(successCriteria.filter((_, i) => i !== index));
  };

  return (
    <div className="min-h-screen bg-slate-50 p-4 md:p-8 font-sans">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <header className="mb-8 text-center print:hidden">
          <h1 className="text-3xl font-bold text-slate-800 flex items-center justify-center gap-2">
            <TrendingUp className="text-blue-600" /> 4th Grade Success Ladder
          </h1>
          <p className="text-slate-500 mt-2">Visible Learning: Kansas Standards to Success Criteria</p>
        </header>

        {/* Stepper - Hidden on Final View/Print */}
        {step < 5 && (
          <div className="flex justify-between mb-8 relative print:hidden">
            <div className="absolute top-1/2 left-0 w-full h-1 bg-slate-200 -z-10 transform -translate-y-1/2"></div>
            {[1, 2, 3, 4].map((s) => (
              <div 
                key={s}
                className={`w-10 h-10 rounded-full flex items-center justify-center font-bold transition-colors ${
                  step >= s ? 'bg-blue-600 text-white' : 'bg-white text-slate-400 border-2 border-slate-200'
                }`}
              >
                {s}
              </div>
            ))}
          </div>
        )}

        {/* Step 1: Input Standard */}
        {step === 1 && (
          <div className="bg-white rounded-xl shadow-sm p-6 border border-slate-200 animate-in fade-in slide-in-from-bottom-4">
            <h2 className="text-xl font-semibold mb-4 flex items-center gap-2 text-slate-700">
              <BookOpen className="w-5 h-5" /> Paste Your Standard
            </h2>
            <textarea
              className="w-full h-40 p-4 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all"
              placeholder="e.g., Use relative pronouns (who, whose, whom, which, that) and relative adverbs (where, when, why)..."
              value={standardInput}
              onChange={(e) => setStandardInput(e.target.value)}
            />
            <button
              onClick={handleProcessStandard}
              disabled={!standardInput.trim()}
              className="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2 disabled:opacity-50 transition-colors"
            >
              Identify Verbs <ChevronRight className="w-5 h-5" />
            </button>
          </div>
        )}

        {/* Step 2: Identify Verbs */}
        {step === 2 && (
          <div className="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
            <h2 className="text-xl font-semibold mb-2 text-slate-700">Action Check!</h2>
            <p className="text-slate-500 mb-6 italic">Which "Doing Words" did you find in the standard?</p>
            
            <div className="flex flex-wrap gap-3 mb-8">
              {identifiedVerbs.map((verb) => (
                <button
                  key={verb}
                  onClick={() => toggleVerb(verb)}
                  className="px-4 py-2 bg-blue-50 border border-blue-200 text-blue-700 rounded-full font-medium flex items-center gap-2 hover:bg-red-50 hover:text-red-600 hover:border-red-200 transition-colors"
                >
                  {verb} <Trash2 className="w-4 h-4" />
                </button>
              ))}
              <div className="flex gap-2 w-full mt-4">
                <input 
                  type="text" 
                  placeholder="Add another verb..."
                  className="flex-1 p-2 border border-slate-300 rounded-lg text-sm"
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' && e.target.value) {
                      setIdentifiedVerbs([...identifiedVerbs, e.target.value]);
                      e.target.value = '';
                    }
                  }}
                />
              </div>
            </div>

            <div className="flex gap-4">
              <button onClick={() => setStep(1)} className="flex-1 py-3 text-slate-600 font-medium">Back</button>
              <button
                onClick={moveToRanking}
                className="flex-[2] bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2"
              >
                Rank the Difficulty <Activity className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}

        {/* Step 3: Difficulty Order */}
        {step === 3 && (
          <div className="bg-white rounded-xl shadow-sm p-6 border border-slate-200">
            <h2 className="text-xl font-semibold mb-2 text-slate-700">Order the Ladder</h2>
            <p className="text-slate-500 mb-6">Arrange verbs from simplest (bottom) to hardest (top).</p>
            
            <div className="space-y-4 mb-8">
              {rankedVerbs.map((verb, idx) => (
                <div key={idx} className="flex items-center gap-4 p-4 bg-slate-50 rounded-lg border border-slate-200">
                  <div className="flex-1 font-bold text-slate-700 capitalize">{verb.name}</div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-slate-400 font-bold uppercase">Complexity Level:</span>
                    <select 
                      value={verb.level}
                      onChange={(e) => updateRank(idx, e.target.value)}
                      className="bg-white border border-slate-300 rounded p-1 text-sm font-medium focus:ring-2 focus:ring-blue-500"
                    >
                      <option value="1">1 - Surface (Identify/List)</option>
                      <option value="2">2 - Foundation (Explain/Describe)</option>
                      <option value="3">3 - Application (Apply/Solve)</option>
                      <option value="4">4 - Analysis (Examine/Organize)</option>
                      <option value="5">5 - Deep (Evaluate/Justify)</option>
                      <option value="6">6 - Mastery (Create/Design)</option>
                    </select>
                  </div>
                </div>
              ))}
            </div>

            <div className="flex gap-4">
              <button onClick={() => setStep(2)} className="flex-1 py-3 text-slate-600 font-medium">Back</button>
              <button
                onClick={buildLadder}
                className="flex-[2] bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2"
              >
                Create Success Criteria <TrendingUp className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}

        {/* Step 4: Editing Success Criteria */}
        {step === 4 && (
          <div className="space-y-6 animate-in fade-in slide-in-from-right-4">
            <div className="bg-white rounded-xl shadow-lg p-6 border-l-8 border-indigo-600">
              <h2 className="text-2xl font-bold mb-1 text-slate-800">Draft Success Criteria</h2>
              <p className="text-slate-500 text-sm mb-6">Edit the details for each step before visualizing the ladder.</p>

              <div className="space-y-6">
                {successCriteria.map((item, idx) => (
                  <div key={idx} className="flex gap-4">
                    <div className="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold shrink-0 mt-2">
                      {idx + 1}
                    </div>
                    <div className="flex-1">
                      <div className="flex justify-between items-center mb-1">
                         <span className="text-[10px] font-black tracking-widest text-indigo-400 uppercase">Focus Verb: {item.verb}</span>
                         <button onClick={() => removeCriteria(idx)} className="text-slate-300 hover:text-red-500"><Trash2 size={16} /></button>
                      </div>
                      <textarea
                        value={item.text}
                        onChange={(e) => updateCriteria(idx, e.target.value)}
                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg text-slate-700 font-bold focus:ring-2 focus:ring-indigo-500"
                        rows={2}
                      />
                    </div>
                  </div>
                ))}
              </div>

              <button 
                onClick={addCriteria}
                className="mt-6 flex items-center gap-2 text-indigo-600 font-bold hover:text-indigo-800"
              >
                <Plus size={20} /> Add extra step
              </button>
            </div>

            <div className="flex gap-4">
              <button onClick={() => setStep(3)} className="flex-1 py-3 text-slate-600 font-medium">Back</button>
              <button
                onClick={() => setStep(5)}
                className="flex-[2] bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg flex items-center justify-center gap-2 shadow-lg"
              >
                See Learning Ladder <ArrowUp className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}

        {/* Step 5: Final Visual Ladder Presentation */}
        {step === 5 && (
          <div className="space-y-8 animate-in zoom-in-95 duration-300">
            <div className="bg-white rounded-2xl shadow-xl p-8 border-2 border-indigo-100 relative overflow-hidden">
              {/* Background Ladder Graphic */}
              <div className="absolute inset-y-0 left-12 w-2 bg-slate-100 hidden md:block"></div>
              <div className="absolute inset-y-0 left-32 w-2 bg-slate-100 hidden md:block"></div>
              
              <div className="relative z-10">
                <div className="flex items-center justify-between mb-8 border-b pb-4">
                  <div>
                    <h2 className="text-3xl font-black text-indigo-900 uppercase tracking-tight">Learning Ladder</h2>
                    <p className="text-slate-500 font-medium">Standard Success Criteria</p>
                  </div>
                  <Award size={48} className="text-indigo-600" />
                </div>

                <div className="flex flex-col-reverse gap-4">
                  {successCriteria.map((item, idx) => (
                    <div 
                      key={idx} 
                      className={`relative group flex items-center gap-6 p-6 rounded-xl border-2 transition-all hover:scale-[1.02] ${
                        idx === successCriteria.length - 1 
                        ? 'bg-indigo-600 border-indigo-700 text-white shadow-lg' 
                        : 'bg-white border-slate-100 text-slate-800 shadow-sm'
                      }`}
                    >
                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center font-black text-xl shrink-0 ${
                        idx === successCriteria.length - 1 ? 'bg-white text-indigo-600' : 'bg-indigo-50 text-indigo-600'
                      }`}>
                        {idx + 1}
                      </div>
                      
                      <div className="flex-1 font-bold text-lg leading-tight">
                        {item.text}
                      </div>

                      {idx === successCriteria.length - 1 && (
                        <div className="absolute -top-3 -right-3 bg-amber-400 text-amber-900 text-[10px] font-black px-2 py-1 rounded-full uppercase tracking-tighter shadow-sm">
                          Goal Reached!
                        </div>
                      )}
                    </div>
                  ))}
                </div>

                <div className="mt-12 flex justify-center">
                  <div className="bg-indigo-50 px-6 py-3 rounded-full flex items-center gap-3 text-indigo-700 font-bold text-sm border border-indigo-100">
                    <ArrowUp size={18} /> Start at the bottom and climb to the top!
                  </div>
                </div>
              </div>
            </div>

            <div className="flex gap-4 print:hidden">
              <button onClick={() => setStep(4)} className="flex-1 py-4 bg-white border border-slate-300 rounded-xl font-bold text-slate-600 hover:bg-slate-50">Edit Criteria</button>
              <button 
                onClick={() => window.print()}
                className="flex-[2] bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-4 px-8 rounded-xl flex items-center justify-center gap-3 shadow-xl transition-all hover:-translate-y-1 active:translate-y-0"
              >
                Print Success Ladder <CheckCircle className="w-6 h-6" />
              </button>
            </div>
          </div>
        )}
      </div>
      
      <footer className="mt-12 text-center text-slate-400 text-sm flex items-center justify-center gap-1 print:hidden">
        Visible Learning Tool for <span className="font-bold text-slate-500">4th Grade Kansas</span>
      </footer>
    </div>
  );
};

export default SuccessCriteriaBuilder;