import React, { useState } from 'react';
import { useAstroContext } from '../context/AstroContext';
import { ShieldCheck, ArrowRight, ArrowLeft, Copy, Check, Clock } from 'lucide-react';
import { motion } from 'motion/react';
import { VEDIC_KNOWLEDGE_BASE } from '../services/astroWorkflow';

export default function Screen5TimingInput() {
  const { state, setStep4Data, setScreen } = useAstroContext();
  
  const [formData, setFormData] = useState({
    vimshottariDasha: state.step4_Data?.vimshottariDasha || '',
    rasiDasha: state.step4_Data?.rasiDasha || '',
    transits: state.step4_Data?.transits || '',
    ashtakavarga: state.step4_Data?.ashtakavarga || ''
  });

  const [copied, setCopied] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleCopyPrompt = () => {
    // Save to context
    setStep4Data(formData);

    // Build the context from Step 1
    const lagnaData = state.step1_2_Data ? `
Natal Context:
- Ascendant (Lagna) details are inherently required to judge Transits. 
- Please refer to standard Lagna rules for this chart.
(Full raw context available in Step 1 analysis, but apply to the provided Transits).
` : '';

    const atmakaraka = state.step1_2_Data?.atmakaraka ? `Atmakaraka: ${state.step1_2_Data.atmakaraka}` : '';

    const prompt = `You are GEM 2: The "Event Timing & Trigger Analyst".

FOLLOWING THE GUIDANCE OF STEP 4 (TIMING & TRIGGERS):
${VEDIC_KNOWLEDGE_BASE.step4}

${lagnaData}
${atmakaraka}

PLEASE ANALYZE THE FOLLOWING TIMING DATA:

--- VIMSHOTTARI DASHA (Mahadasha/Antardasha) ---
${formData.vimshottariDasha || 'Not provided'}

--- RASI DASHA ---
${formData.rasiDasha || 'Not provided'}

--- CURRENT TRANSITS (Gochara) ---
${formData.transits || 'Not provided'}

--- ASHTAKAVARGA SCORES ---
${formData.ashtakavarga || 'Not provided'}

Please verify if the current transits physically trigger the potential set by the active Dasha.`;

    navigator.clipboard.writeText(prompt);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  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(4)}
            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">Event Timing</h2>
            <p className="text-xs font-mono uppercase tracking-widest text-stone-400">Step 4 • Dashas & Transits</p>
          </div>
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-8">
        <div className="space-y-6">
          <div className="p-6 bg-white rounded-2xl border border-stone-200 shadow-sm">
            <h3 className="flex items-center gap-2 text-lg font-serif italic text-stone-900 mb-4">
              <Clock size={18} className="text-stone-400" />
              1. Dasha Periods
            </h3>
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-mono uppercase text-stone-500 tracking-widest mb-2">
                  Vimshottari Dasha
                </label>
                <textarea
                  name="vimshottariDasha"
                  value={formData.vimshottariDasha}
                  onChange={handleChange}
                  placeholder="Paste current MD/AD/PD here..."
                  className="w-full h-32 p-3 text-xs font-mono bg-stone-50 border border-stone-200 rounded-lg focus:ring-2 focus:ring-stone-400"
                />
              </div>
              <div>
                <label className="block text-xs font-mono uppercase text-stone-500 tracking-widest mb-2">
                  Rasi Dasha (e.g. Chara Dasha)
                </label>
                <textarea
                  name="rasiDasha"
                  value={formData.rasiDasha}
                  onChange={handleChange}
                  placeholder="Paste Rasi Dasha details here..."
                  className="w-full h-32 p-3 text-xs font-mono bg-stone-50 border border-stone-200 rounded-lg focus:ring-2 focus:ring-stone-400"
                />
              </div>
            </div>
          </div>
        </div>

        <div className="space-y-6">
          <div className="p-6 bg-white rounded-2xl border border-stone-200 shadow-sm flex flex-col h-full">
            <h3 className="flex items-center gap-2 text-lg font-serif italic text-stone-900 mb-4">
              <Clock size={18} className="text-stone-400" />
              2. Transits & Metrics
            </h3>
            <div className="space-y-4 grow mb-6">
              <div>
                <label className="block text-xs font-mono uppercase text-stone-500 tracking-widest mb-2">
                  Current Transits (Gochara)
                </label>
                <textarea
                  name="transits"
                  value={formData.transits}
                  onChange={handleChange}
                  placeholder="Paste current planetary transits..."
                  className="w-full h-32 p-3 text-xs font-mono bg-stone-50 border border-stone-200 rounded-lg focus:ring-2 focus:ring-stone-400"
                />
              </div>
              <div>
                <label className="block text-xs font-mono uppercase text-stone-500 tracking-widest mb-2">
                  Ashtakavarga System
                </label>
                <textarea
                  name="ashtakavarga"
                  value={formData.ashtakavarga}
                  onChange={handleChange}
                  placeholder="Paste Ashtakavarga points (e.g. 28 points in Aries)..."
                  className="w-full h-32 p-3 text-xs font-mono bg-stone-50 border border-stone-200 rounded-lg focus:ring-2 focus:ring-stone-400"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="flex justify-center pt-8">
        <button 
          onClick={handleCopyPrompt}
          className={`flex items-center gap-3 px-10 py-4 rounded-full font-serif italic text-lg transition-all shadow-xl hover:shadow-2xl ${
            copied ? 'bg-green-600 text-white' : 'bg-stone-900 text-white hover:bg-stone-800'
          }`}
        >
          {copied ? <Check size={20} /> : <Copy size={20} />}
          {copied ? 'Copied for GEM 2!' : 'Copy Prompt for GEM 2 (Timing Analyst)'}
        </button>
      </div>
    </div>
  );
}