import React, { useEffect } from 'react';
import { useAstroContext } from '../context/AstroContext';
import { ShieldAlert, ArrowRight, ArrowLeft, CheckCircle2, ChevronDown } from 'lucide-react';
import { motion } from 'motion/react';
import { LIFE_AREAS } from '../services/vargaMapping';

export default function Screen3VargaSelection() {
  const { state, setScreen, setSelectedLifeArea, setSelectedVargas, setStep3Data } = useAstroContext();

  // On mount, if no life area is selected, default to the first one (Career)
  useEffect(() => {
    if (!state.selectedLifeArea && LIFE_AREAS.length > 0) {
      handleSelectLifeArea(LIFE_AREAS[0].id);
    }
  }, []);

  const handleSelectLifeArea = (areaId: string) => {
    const area = LIFE_AREAS.find(a => a.id === areaId);
    if (area) {
      setSelectedLifeArea(areaId);
      setSelectedVargas(area.vargas);
    }
  };

  const currentArea = LIFE_AREAS.find(a => a.id === state.selectedLifeArea);
  
  // Exclude D1 from textareas since D1 data comes from Step 1
  const vargasToInput = currentArea ? currentArea.vargas.filter(v => v !== 'D1') : [];
  
  const handleProceed = () => {
    setScreen(4);
  };

  return (
    <div className="max-w-4xl mx-auto space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-700">
      <div className="flex items-center justify-between border-b border-stone-200 pb-6">
        <div className="flex items-center gap-3">
          <button 
            onClick={() => setScreen(2)}
            className="w-10 h-10 bg-white border border-stone-200 text-stone-600 rounded-full flex items-center justify-center hover:bg-stone-50 transition-colors"
          >
            <ArrowLeft size={18} />
          </button>
          <div>
            <h2 className="text-3xl font-serif italic text-stone-900">Area of Concern</h2>
            <p className="text-xs font-mono uppercase tracking-widest text-stone-400">Step 3 • Varga Selection</p>
          </div>
        </div>
      </div>

      <div className="p-5 bg-amber-50/80 border border-amber-200/60 rounded-2xl flex gap-4 text-amber-900">
        <ShieldAlert size={28} className="text-amber-600 shrink-0" />
        <div className="space-y-2 text-sm">
          <p className="font-bold">Critial Rule: Birth Time Precision</p>
          <p>
            Divisional charts (Vargas) change rapidly—some within mere minutes or seconds. Before proceeding, 
            you <strong>must double-check your exact birth time</strong> using Jagannatha Hora (JHora). 
            If your birth time is an estimate, skip this micro-lens analysis and rely only on the Step 1 Foundation chart.
          </p>
        </div>
      </div>

      <div className="space-y-6">
        <div>
          <h3 className="text-xl font-serif italic text-stone-900 mb-2">What is your primary concern?</h3>
          <p className="text-sm text-stone-500 font-mono mb-6">Select one life area. The system will automatically select the necessary Vedic D-charts.</p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {LIFE_AREAS.map((area) => (
            <div 
              key={area.id}
              onClick={() => handleSelectLifeArea(area.id)}
              className={`p-5 rounded-2xl border-2 transition-all cursor-pointer ${
                state.selectedLifeArea === area.id 
                  ? 'border-stone-900 bg-stone-900 text-white shadow-lg' 
                  : 'border-stone-200 bg-white hover:border-stone-400 hover:shadow-md'
              }`}
            >
              <div className="flex items-start justify-between mb-2">
                <h4 className={`font-serif text-lg ${state.selectedLifeArea === area.id ? 'text-white' : 'text-stone-900'}`}>
                  {area.label}
                </h4>
                {state.selectedLifeArea === area.id && <CheckCircle2 size={20} className="text-amber-400" />}
              </div>
              <p className={`text-xs mb-4 ${state.selectedLifeArea === area.id ? 'text-stone-300' : 'text-stone-500'}`}>
                {area.description}
              </p>
              <div className={`text-[10px] font-mono tracking-wider uppercase px-2 py-1 inline-block rounded ${state.selectedLifeArea === area.id ? 'bg-stone-800 text-stone-400' : 'bg-stone-100 text-stone-500'}`}>
                Analyzes: {area.vargas.join(' + ')}
              </div>
            </div>
          ))}
        </div>
      </div>

      {state.selectedLifeArea && (
        <motion.div 
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          className="bg-stone-50 border border-stone-200 rounded-3xl p-8"
        >
          <h3 className="text-xl font-serif italic text-stone-900 mb-6 flex items-center gap-2">
            <ChevronDown size={20} className="text-stone-400" />
            Provide Micro-Lens Data
          </h3>
          
          <div className="grid md:grid-cols-2 gap-8">
            <div className="p-6 bg-white rounded-2xl border border-stone-200 shadow-sm opacity-60">
               <h4 className="flex items-center gap-2 text-lg font-serif text-stone-900 mb-2">
                 D1
                 <span className="text-[10px] font-mono uppercase tracking-widest text-stone-500 font-normal">Foundation</span>
               </h4>
               <p className="text-xs text-stone-500 mb-4 h-8">
                 Always mandatory. This data is automatically sourced from your Step 1 input.
               </p>
               <div className="w-full h-32 flex items-center justify-center border-2 border-dashed border-stone-200 rounded-lg bg-stone-50 text-stone-400 text-xs font-mono">
                  [ Loaded from Context ]
               </div>
            </div>

            {vargasToInput.map((varga) => (
              <motion.div 
                key={varga}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                className="p-6 bg-white rounded-2xl border border-stone-200 shadow-sm focus-within:ring-2 focus-within:ring-stone-400 focus-within:border-transparent transition-all"
              >
                <div className="flex items-center justify-between mb-2">
                  <h4 className="text-lg font-serif text-stone-900">{varga}</h4>
                </div>
                <p className="text-xs text-stone-500 mb-4 h-8">
                  Paste the technical data for {varga} from your software.
                </p>
                <textarea
                  value={state.step3_Data[varga] || ''}
                  onChange={(e) => setStep3Data(varga, e.target.value)}
                  placeholder={`Paste ${varga} planetary details here...`}
                  className="w-full h-32 p-3 text-xs font-mono bg-stone-50 border border-stone-200 rounded-lg focus:outline-none"
                />
              </motion.div>
            ))}
          </div>
        </motion.div>
      )}

      <div className="flex justify-end pt-8">
        <button 
          onClick={handleProceed}
          disabled={!state.selectedLifeArea}
          className="flex items-center gap-2 bg-stone-900 text-white px-8 py-3 rounded-full font-serif italic text-lg hover:bg-stone-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg hover:shadow-xl"
        >
          Generate Synthesis Setup
          <ArrowRight size={18} />
        </button>
      </div>
    </div>
  );
}