import React, { useState, useEffect } from 'react';
import { 
  Info, 
  ClipboardIcon, 
  Check, 
  Star, 
  Plus, 
  Trash2, 
  Layout, 
  Clock, 
  ChevronRight, 
  HelpCircle, 
  Terminal,
  RefreshCcw,
  User,
  Loader2,
  Sparkles
} from 'lucide-react';
import { VisionScanner } from '../services/visionScanner';
import { AstroData, Profile } from '../types';
import { parseJHoraGrid, getPlacements, normalizeVargaType } from '../services/asciiParser';
import { generateCombinedTransitTable } from '../services/transitLogic';
import { INITIAL_DATA, VARGA_MEANINGS, VARGA_DUMMY_DATA } from '../constants';
import VedicDateTimePicker from './VedicDateTimePicker';
import { useAstroContext } from '../context/AstroContext';
import { supabase } from '../lib/supabase';
import { fetchProfileData, updateProfileData } from '../services/importService';

interface Props {
  onComplete: (data: AstroData) => void;
  initialData?: AstroData;
}

interface HelpTooltipProps {
  content: string;
  position?: 'top' | 'left' | 'right' | 'top-right';
}

function HelpTooltip({ content, position = 'top' }: HelpTooltipProps) {
  const posClasses = {
    top: 'bottom-full left-1/2 -translate-x-1/2 mb-3',
    'top-right': 'bottom-full right-0 mb-3',
    left: 'right-full top-1/2 -translate-y-1/2 mr-3',
    right: 'left-full top-1/2 -translate-y-1/2 ml-3'
  };

  return (
    <div className="group relative inline-block text-left">
      <HelpCircle size={14} className="text-stone-300 cursor-help hover:text-stone-900 transition-colors" />
      <div className={`absolute ${posClasses[position]} w-64 p-4 bg-stone-900 text-stone-50 text-[11px] rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 transition-all pointer-events-none z-[100] font-sans leading-relaxed border border-stone-800`}>
        {content}
        <div className="absolute top-full left-1/2 -translate-x-1/2 border-8 border-transparent border-t-stone-900" />
      </div>
    </div>
  );
}

function CopyButton({ content, label = "Copy Section" }: { content: string; label?: string }) {
  const [copied, setCopied] = useState(false);
  const handleCopy = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    navigator.clipboard.writeText(content.trim());
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };
  return (
    <button 
      onClick={handleCopy}
      title={label}
      className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] font-mono uppercase tracking-wider transition-all ${
        copied 
          ? 'bg-stone-900 text-white shadow-lg' 
          : 'bg-stone-50 text-stone-400 hover:bg-stone-100 hover:text-stone-900'
      }`}
    >
      {copied ? <Check size={12} /> : <ClipboardIcon size={12} />}
      {copied ? 'Copied' : 'Copy'}
    </button>
  );
}

export default function Step0Input({ onComplete, initialData }: Props) {
  const { state, setProfiles, setActiveProfileId } = useAstroContext();
  const [data, setData] = useState<AstroData>(initialData || INITIAL_DATA);
  const [rasiPreview, setRasiPreview] = useState<string>('');
  const [copied, setCopied] = useState(false);
  const [showTransitNatalSelect, setShowTransitNatalSelect] = useState(false);
  const [isLoadingProfile, setIsLoadingProfile] = useState(false);
  const [savImage, setSavImage] = useState<string | null>(null);
  const [isOcrLoading, setIsOcrLoading] = useState(false);
  const [originalData, setOriginalData] = useState<AstroData | null>(null);
  const [isSyncing, setIsSyncing] = useState(false);
  const [syncSuccess, setSyncSuccess] = useState(false);
  const [showBatchImporter, setShowBatchImporter] = useState(false);
  const [batchImportText, setBatchImportText] = useState('');

  const VARGA_LIST = ['D2', 'D3', 'D4', 'D5', 'D6', 'D7', 'D8', 'D9', 'D10', 'D11', 'D12', 'D16', 'D20', 'D24', 'D27', 'D30', 'D40', 'D45', 'D60', 'D81', 'D108', 'D144'];

  // Fetch profiles on mount
  useEffect(() => {
    const getProfiles = async () => {
      const { data: pList } = await supabase.from('profiles').select('*').order('name');
      if (pList) setProfiles(pList);
    };
    getProfiles();
  }, []);

  const handleProfileChange = async (id: string) => {
    if (!id) {
      setActiveProfileId(null);
      return;
    }
    
    setIsLoadingProfile(true);
    try {
      const profileData = await fetchProfileData(id);
      if (profileData) {
        setData(profileData);
        setOriginalData(JSON.parse(JSON.stringify(profileData))); // Deep clone for comparison
        setActiveProfileId(id);
      }
    } catch (err) {
      console.error('Failed to load profile:', err);
      alert('Error loading profile from database.');
    } finally {
      setIsLoadingProfile(false);
    }
  };

  // Update preview when rasiChartText changes
  useEffect(() => {
    if (data.rasiChartText.trim()) {
      const summary = parseJHoraGrid(data.rasiChartText);
      setRasiPreview(summary);
    } else {
      setRasiPreview('');
    }
  }, [data.rasiChartText]);

  // Migration/Initialization: Ensure D1 has scores if legacy ashtakavarga exists
  useEffect(() => {
    if (data.ashtakavarga && Object.keys(data.ashtakavarga).length > 0) {
      const d1 = data.vargaAshtakavarga?.['D1'];
      if (!d1 || Object.keys(d1).length === 0) {
        setData(prev => ({
          ...prev,
          vargaAshtakavarga: {
            ...prev.vargaAshtakavarga,
            'D1': prev.ashtakavarga || {}
          }
        }));
      }
    }
  }, [data.ashtakavarga]);

  const updateDivisionalChart = (key: string, value: string) => {
    setData(prev => ({
      ...prev,
      divisionalCharts: {
        ...prev.divisionalCharts,
        [key]: value
      }
    }));
  };

  const removeDivisionalChart = (name: string) => {
    const newCharts = { ...data.divisionalCharts };
    delete newCharts[name];
    setData(prev => ({
      ...prev,
      divisionalCharts: newCharts
    }));
  };

  const zodOrder = ["ARIES", "TAURUS", "GEMINI", "CANCER", "LEO", "VIRGO", "LIBRA", "SCORPIO", "SAGITTARIUS", "CAPRICORN", "AQUARIUS", "PISCES"];
  
  const lagnaSign = React.useMemo(() => {
    let signName = "ARIES";
    
    // 1. Get D1 Lagna as a secondary fallback
    let d1Lagna = "ARIES";
    if (data.rasiChartText) {
      const d1Result = getPlacements(data.rasiChartText);
      if (typeof d1Result !== 'string') {
        for (const [s, planets] of Object.entries(d1Result.placements)) {
          if (planets.some(p => p === "As" || p.startsWith("As(") || p.startsWith("As "))) {
            d1Lagna = s;
            break;
          }
        }
      }
    }

    // 2. Identify the target varga chart
    const currentRef = normalizeVargaType(data.savChartType || 'D1');
    
    // Aggressive lookup: normalize ALL keys to find a match
    let vargaText = currentRef === 'D1' ? data.rasiChartText : undefined;
    if (!vargaText && data.divisionalCharts) {
      const entry = Object.entries(data.divisionalCharts).find(([k]) => normalizeVargaType(k) === currentRef);
      if (entry) {
        vargaText = entry[1];
      } else {
        // Fallback to exact key if normalization failed
        vargaText = data.divisionalCharts[data.savChartType];
      }
    }
    
    if (vargaText) {
      const result = getPlacements(vargaText);
      if (typeof result !== 'string') {
        const { placements } = result;
        let found = false;
        for (const [s, planets] of Object.entries(placements)) {
          // Robust check for Lagna token
          if (planets.some(p => p === "As" || p.toLowerCase().includes("lagna") || p.startsWith("As(") || p.startsWith("As "))) {
            signName = s;
            found = true;
            break;
          }
        }
        if (!found) signName = d1Lagna;
      } else {
        signName = d1Lagna;
      }
    } else {
      signName = d1Lagna;
    }

    console.log(`[SAV DEBUG] Chart: ${data.savChartType} (${currentRef}) -> Lagna: ${signName}`);
    return signName;
  }, [data.savChartType, data.rasiChartText, data.divisionalCharts]);

  // 3. Fallback SAV data if database columns are missing or empty
  const effectiveAshtakavarga = React.useMemo(() => {
    if (Object.keys(data.ashtakavarga || {}).length > 0) return data.ashtakavarga;
    
    // If empty, attempt to parse initialData or current context
    const currentRef = normalizeVargaType(data.savChartType || 'D1');
    const chartText = currentRef === 'D1' ? data.rasiChartText : data.divisionalCharts[currentRef];
    
    if (chartText) {
      // Future: add parseSAVFromText(chartText) here if needed.
      // For now, we rely on the user to 'Sync' or 'Refresh' until DB is fixed.
    }
    return data.ashtakavarga || {};
  }, [data.ashtakavarga, data.savChartType, data.divisionalCharts, data.rasiChartText]);

  const lagnaIdx = zodOrder.indexOf(lagnaSign);

  const addDivisionalChart = (name: string) => {
    const uppercaseName = name.toUpperCase();
    if (uppercaseName in data.divisionalCharts) {
      removeDivisionalChart(uppercaseName);
    } else {
      updateDivisionalChart(uppercaseName, VARGA_DUMMY_DATA[uppercaseName] || '');
    }
  };

  const parseBatchImport = (text: string) => {
    if (!text.trim()) return;

    try {
      const newData = { ...data };
      const newDivisionalCharts = { ...data.divisionalCharts };

      // Parse JHora ASCII charts directly based on the table borders
      const lines = text.split('\n');
      let currentChart: string[] = [];
      let inChart = false;

      lines.forEach(line => {
        const trimmed = line.trim();
        // Detect the top or bottom border of a JHora chart grid (e.g., +---------+)
        if (trimmed.match(/^\+[-]{30,}\+$/)) {
          if (!inChart) {
            inChart = true;
            currentChart = [line];
          } else {
            currentChart.push(line);
            const chartText = currentChart.join('\n');
            
            // Identify which chart this is by the text embedded in its center cells
            if (chartText.includes('Rasi') && !chartText.includes('D-')) {
              newData.rasiChartText = chartText;
            } else {
              const match = chartText.match(/D-(\d+)/);
              if (match) {
                const vKey = `D${match[1]}`;
                if (VARGA_LIST.includes(vKey)) {
                  newDivisionalCharts[vKey] = chartText;
                }
              }
            }
            
            // Reset for the next chart
            currentChart = [];
            inChart = false;
          }
        } else if (inChart) {
          currentChart.push(line);
        }
      });

      newData.divisionalCharts = newDivisionalCharts;
      setData(newData);
      setShowBatchImporter(false);
      setBatchImportText('');
    } catch (err) {
      console.error('Batch Import Error:', err);
      alert('There was an error parsing the imported content. Please ensure it follows the format of JHora ASCII grids.');
    }
  };

  const handleToggleAllVargas = () => {
    const allVargasIn = VARGA_LIST.every(v => v in data.divisionalCharts);
    if (allVargasIn) {
      const coreCharts: Record<string, string> = {};
      if ('D9' in data.divisionalCharts) coreCharts['D9'] = data.divisionalCharts['D9'];
      if ('D10' in data.divisionalCharts) coreCharts['D10'] = data.divisionalCharts['D10'];
      setData(prev => ({ ...prev, divisionalCharts: coreCharts }));
    } else {
      const fullSet: Record<string, string> = { ...data.divisionalCharts };
      VARGA_LIST.forEach(v => {
        if (!(v in fullSet)) {
          fullSet[v] = VARGA_DUMMY_DATA[v] || '';
        }
      });
      setData(prev => ({ ...prev, divisionalCharts: fullSet }));
    }
  };

  const handleCopyTransitAnalysis = () => {
    if (!data.transitChartText || !data.rasiChartText) return;
    
    const natalChart = (data.transitNatalSelection || 'D1') === 'D1' 
      ? data.rasiChartText 
      : data.divisionalCharts[data.transitNatalSelection as string] || '';
      
    if (!natalChart) return;

    const result = generateCombinedTransitTable(
      natalChart,
      data.transitChartText,
      {
        natalName: data.transitNatalSelection || 'D1',
        transitDateTime: data.transitDateTime || ''
      }
    );

    navigator.clipboard.writeText(result);
  };

  const handleClear = () => {
    if (confirm('Are you sure you want to clear all data?')) {
      setData({
        ...INITIAL_DATA,
        userName: '',
        dob: '',
        birthTime: '',
        longitudeTable: '',
        rasiChartText: '',
        dasha: '',
        additionalInfo: '',
        divisionalCharts: {
          'D9': '',
          'D10': ''
        },
        isBirthTimeEstimate: false
      });
      setRasiPreview('');
    }
  };

  const handleLoadDefault = () => {
    setData(INITIAL_DATA);
  };

  const handlePasteImage = (e: React.ClipboardEvent) => {
    const items = e.clipboardData.items;
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') !== -1) {
        const blob = items[i].getAsFile();
        if (blob) {
          const reader = new FileReader();
          reader.onload = (event) => {
            setSavImage(event.target?.result as string);
          };
          reader.readAsDataURL(blob);
        }
      }
    }
  };

  const buildContextString = () => {
    const cleanJHoraSpaces = (text: string) => {
      if (!text) return '';
      return text
        .split('\n')
        .map(line => line.trim().replace(/\s\s+/g, ' '))
        .join('\n')
        .trim();
    };

    const getCompactTable = (name: string, ascii: string) => {
      if (!ascii.trim()) return '';
      const summary = parseJHoraGrid(ascii);
      return `### ${name}\n${summary}`;
    };

    const d1Table = getCompactTable('Rasi (D1)', data.rasiChartText);
    const vargas = Object.entries(data.divisionalCharts)
      .filter(([_, value]) => (value as string).trim().length > 0)
      .map(([key, value]) => getCompactTable(key, value as string))
      .filter(t => t.length > 0)
      .join('\n\n');

    let transitTable = '';
    if (data.transitChartText && data.rasiChartText) {
      const natalChart = (data.transitNatalSelection || 'D1') === 'D1' 
        ? data.rasiChartText 
        : data.divisionalCharts[data.transitNatalSelection as string] || '';
      if (natalChart) {
        transitTable = `## 🪐 Transit Synthesis\nReference: ${data.transitNatalSelection || 'D1'}, Time: ${data.transitDateTime || 'Now'}\n\n`;
        transitTable += generateCombinedTransitTable(
          natalChart,
          data.transitChartText,
          {
            natalName: data.transitNatalSelection || 'D1',
            transitDateTime: data.transitDateTime || ''
          }
        );
      }
    }

    const getSAVContext = () => {
      const vAV = data.vargaAshtakavarga || {};
      const vargaKeys = Object.keys(vAV).filter(k => Object.keys(vAV[k]).length > 0);
      
      if (vargaKeys.length === 0) return '';
      
      let contextTables = `## 🕉️ Sarvastakavarga (SAV) Points\n\n`;
      
      vargaKeys.sort().forEach(varga => {
        contextTables += `### SAV - ${varga}\n\n| H | Sign | Score |\n| :--- | :--- | :--- |\n`;
        
        const scores = vAV[varga] || {};
        const sortedData = zodOrder
          .map(sign => {
            const idx = zodOrder.indexOf(sign);
            const houseNum = ((idx - lagnaIdx + 12) % 12) + 1;
            return { houseNum, sign, score: scores[sign] || 0 };
          })
          .sort((a, b) => a.houseNum - b.houseNum);

        sortedData.forEach(item => {
          contextTables += `| H${item.houseNum < 10 ? '0' : ''}${item.houseNum} | ${item.sign} | ${item.score} |\n`;
        });
        contextTables += '\n';
      });
      
      return contextTables;
    };

    return `
Act as an expert Vedic Astrologer (@VedicGuru). 

--- TECHNICAL DATA SOURCE ---
**User**: ${data.userName}
**DOB**: ${data.dob}
**Time**: ${data.birthTime} (Estimate: ${data.isBirthTimeEstimate ? 'Yes' : 'No'})

## 📊 Longitude Table
${cleanJHoraSpaces(data.longitudeTable)}

${d1Table}

${vargas}

${getSAVContext()}

${transitTable ? transitTable + '\n\n' : ''}## ⏳ Dasha & Additional Info
**Dasha**: 
${cleanJHoraSpaces(data.dasha)}

**Additional**: 
${cleanJHoraSpaces(data.additionalInfo || 'N/A')}

---
    `.trim();
  };

  const generateMasterContext = () => {
    const context = buildContextString();
    navigator.clipboard.writeText(context);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  const hasChanges = React.useMemo(() => {
    if (!state.activeProfileId || !originalData) return false;
    
    // Compare essential fields
    const compareFields: (keyof AstroData)[] = [
      'userName', 'dob', 'birthTime', 'isBirthTimeEstimate', 
      'longitudeTable', 'rasiChartText', 'dasha', 'additionalInfo', 
      'divisionalCharts', 'ashtakavarga', 'vargaAshtakavarga', 'savChartType'
    ];

    return compareFields.some(field => {
      const current = data[field];
      const original = originalData[field];
      return JSON.stringify(current) !== JSON.stringify(original);
    });
  }, [data, originalData, state.activeProfileId]);

  const handleSyncProfile = async () => {
    if (!state.activeProfileId || !hasChanges || isSyncing) return;

    setIsSyncing(true);
    try {
      // 1. Sync to Supabase
      await updateProfileData(state.activeProfileId, data);
      
      // 2. Sync to local .md file in docs/
      try {
        const timestamp = new Date().toLocaleString();
        let context = buildContextString();
        // Inject Updated Date
        context = context.replace(
          '--- TECHNICAL DATA SOURCE ---',
          `--- TECHNICAL DATA SOURCE ---\n**Updated Date**: ${timestamp}`
        );
        
        await fetch('/api/save-local-md', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ userName: data.userName, content: context })
        });
      } catch (localErr) {
        console.error('Failed to update local .md file:', localErr);
      }

      setOriginalData(JSON.parse(JSON.stringify(data)));
      setSyncSuccess(true);
      setTimeout(() => setSyncSuccess(false), 3000);
    } catch (err) {
      console.error('Failed to sync profile:', err);
      alert('Failed to sync data to Supabase.');
    } finally {
      setIsSyncing(false);
    }
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onComplete(data);
  };

  return (
    <form onSubmit={handleSubmit} className="max-w-6xl mx-auto space-y-12 pb-32">
      {/* Profile Selector & Natal row */}
      <section className="bg-stone-50 p-6 rounded-2xl border border-stone-200 space-y-6">
        <div className="flex items-center justify-between pb-4 border-b border-stone-200">
           <div className="flex items-center gap-3">
             <div className="w-8 h-8 rounded-full bg-stone-900 flex items-center justify-center text-white">
               <User size={14} />
             </div>
             <h3 className="font-serif italic text-lg text-stone-900">Step 1: Identity & Birth Data</h3>
           </div>
           
           <div className="flex items-center gap-3">
             <label className="text-[10px] font-mono uppercase tracking-widest text-stone-400 font-bold">Switch Profile:</label>
             <div className="relative">
               <select 
                value={state.activeProfileId || ''}
                onChange={e => handleProfileChange(e.target.value)}
                className="bg-white border border-stone-200 rounded-xl px-4 py-2 pr-10 text-xs font-mono focus:ring-1 focus:ring-stone-400 outline-none transition-all text-stone-900 h-10 appearance-none min-w-[180px]"
               >
                 <option value="">-- Manual Entry --</option>
                 {state.profiles.map(p => (
                   <option key={p.id} value={p.id}>{p.name}</option>
                 ))}
               </select>
                <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-stone-400">
                  {isLoadingProfile ? <Loader2 size={14} className="animate-spin" /> : <ChevronRight size={14} className="rotate-90" />}
                </div>
              </div>
            </div>
           </div>

        <div className="flex flex-col md:flex-row items-center gap-4">
          <div className="flex-1 min-w-[200px]">
             <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-1 block">Native Name</label>
             <input 
              type="text"
              className="w-full bg-white border border-stone-200 rounded-xl px-4 py-2 text-sm focus:ring-1 focus:ring-stone-400 outline-none transition-all text-stone-900 h-11"
              value={data.userName}
              onChange={e => setData(prev => ({ ...prev, userName: e.target.value }))}
              required
            />
          </div>
          
          <div className="flex-none w-auto">
            <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-1 block">Birth Date</label>
            <VedicDateTimePicker 
              type="date"
              value={data.dob}
              onChange={v => setData(prev => ({ ...prev, dob: v }))}
            />
          </div>

          <div className="flex-none w-auto">
            <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-1 block">Birth Time</label>
            <VedicDateTimePicker 
              type="time"
              value={data.birthTime}
              onChange={v => setData(prev => ({ ...prev, birthTime: v }))}
            />
          </div>

          <div className="flex-none w-auto pt-4">
            <div 
              className={`flex items-center gap-2 px-4 h-11 rounded-xl border transition-all cursor-pointer select-none ${
                data.isBirthTimeEstimate 
                  ? 'bg-stone-900 text-white border-stone-900' 
                  : 'bg-white text-stone-400 border-stone-200 hover:border-stone-400'
              }`}
              title="Toggle Birth Time Estimate"
              onClick={() => setData(prev => ({ ...prev, isBirthTimeEstimate: !prev.isBirthTimeEstimate }))}
            >
              <Clock size={16} />
              <span className="text-[10px] font-mono uppercase tracking-widest font-bold">Est.</span>
            </div>
          </div>

          <div className="flex-none self-end pb-1">
             <button 
              type="button" 
              onClick={handleLoadDefault} 
              title="Reload Baseline"
              className="p-3 rounded-xl border border-stone-200 bg-white text-stone-400 hover:text-stone-900 transition-all active:scale-95 h-11 w-11 flex items-center justify-center"
            >
              <RefreshCcw size={14} />
            </button>
          </div>
        </div>
      </section>
           {/* Step 2: Longitude Table */}
      <section className="bg-white p-8 rounded-2xl border border-stone-200 shadow-sm">
        <h3 className="text-xl font-serif italic text-stone-900 mb-6">Step 2: Planetary Longitudes</h3>
        <div className="space-y-4">
          <div className="flex justify-between items-end px-1">
            <h4 className="text-[10px] font-mono font-bold uppercase tracking-widest text-stone-400">JHora Longitude Table (ASCII)</h4>
            <CopyButton content={data.longitudeTable} />
          </div>
          <textarea 
            className="w-full bg-stone-50 border border-stone-200 rounded-2xl p-6 font-mono text-[11px] h-64 focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-inner text-stone-600 leading-relaxed overflow-x-auto whitespace-pre"
            value={data.longitudeTable}
            onChange={e => setData(prev => ({ ...prev, longitudeTable: e.target.value }))}
            placeholder="Paste the Longitude Table from JHora text report here..."
            required
          />
        </div>
      </section>

      {/* Step 3: Divisional Analysis (Vargas) */}
      <section className="bg-white p-6 rounded-2xl border border-stone-200 space-y-8">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 pb-6 border-b border-stone-100">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-2xl bg-stone-900 flex items-center justify-center text-white shadow-lg">
              <Layout size={22} />
            </div>
            <div>
              <h3 className="text-xl font-serif italic text-stone-900">Step 3: Divisional Analysis (Vargas)</h3>
              <p className="text-[10px] text-stone-400 font-mono uppercase tracking-widest mt-1 font-bold">Rasi (D1) + Key Divisional Charts</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <button 
              type="button" 
              onClick={() => setShowBatchImporter(true)}
              className="flex items-center gap-2 px-6 py-2 bg-stone-100 hover:bg-stone-200 text-stone-600 rounded-2xl text-[10px] font-mono uppercase tracking-widest transition-all h-14 border border-stone-200"
            >
              <Sparkles size={16} /> Batch Import
            </button>

            <div className="relative">
              <button 
                type="button" 
                onClick={() => setShowTransitNatalSelect(!showTransitNatalSelect)}
                className="group flex flex-col items-center justify-center p-4 bg-stone-50 border border-stone-200 rounded-2xl hover:border-stone-400 transition-all min-w-[200px]"
              >
                <div className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-1 group-hover:text-stone-600 transition-colors">Add Divisional Chart</div>
                <div className="flex items-center gap-2">
                  <Plus size={14} className="text-stone-900" />
                  <span className="text-sm font-serif italic text-stone-900">Select Varga Type</span>
                </div>
              </button>

              {showTransitNatalSelect && (
                <div className="absolute top-full right-0 mt-3 w-[380px] bg-white border border-stone-200 rounded-2xl shadow-2xl p-5 z-50 animate-in fade-in zoom-in slide-in-from-top-4 duration-300">
                  <div className="flex items-center justify-between mb-4 pb-3 border-b border-stone-100">
                    <span className="text-[10px] font-mono font-bold text-stone-400 uppercase tracking-widest">Available Vargas</span>
                    <div className="flex gap-3">
                      <button 
                        type="button" 
                        onClick={(e) => { 
                          e.stopPropagation(); 
                          const allVargas = VARGA_LIST.reduce((acc, v) => ({ 
                            ...acc, 
                            [v]: data.divisionalCharts[v] || VARGA_DUMMY_DATA[v] || '' 
                          }), {});
                          setData(prev => ({ ...prev, divisionalCharts: allVargas })); 
                        }}
                        className="text-[9px] font-mono text-stone-500 hover:text-stone-900 uppercase tracking-tighter"
                      >
                        All
                      </button>
                      <span className="text-stone-200">/</span>
                      <button 
                        type="button" 
                        onClick={(e) => { e.stopPropagation(); setData(prev => ({ ...prev, divisionalCharts: {} })); }}
                        className="text-[9px] font-mono text-stone-500 hover:text-stone-900 uppercase tracking-tighter"
                      >
                        None
                      </button>
                    </div>
                  </div>
                  <div className="grid grid-cols-3 gap-2">
                    {VARGA_LIST.filter(v => v !== 'D45').map(v => {
                      const isAdded = v in data.divisionalCharts;
                      return (
                        <div key={v} className="relative group/vitem">
                          <button 
                            type="button"
                            onClick={(e) => { e.stopPropagation(); addDivisionalChart(v); }}
                            className={`w-full py-2.5 rounded-lg font-mono text-[10px] border transition-all flex flex-col items-center justify-center gap-0.5 ${
                              isAdded 
                                ? 'bg-stone-900 text-white border-stone-900 font-bold shadow-md' 
                                : 'bg-stone-50 text-stone-400 border-stone-100 hover:border-stone-300 hover:bg-white'
                            }`}
                          >
                            <span className="tracking-widest">{v}</span>
                            <span className="text-[8px] opacity-40 font-sans tracking-normal font-normal truncate max-w-full px-1">
                              {VARGA_MEANINGS[v]?.split('.')[0].slice(0, 15)}...
                            </span>
                          </button>
                          <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-48 p-2.5 bg-stone-900 text-stone-100 text-[10px] rounded-lg shadow-xl opacity-0 invisible group-hover/vitem:opacity-100 group-hover/vitem:visible transition-all pointer-events-none z-[100] border border-stone-800 leading-tight">
                            <div className="font-bold mb-1 text-stone-400">{v} Purpose</div>
                            {VARGA_MEANINGS[v]}
                            <div className="absolute top-full left-1/2 -translate-x-1/2 border-6 border-transparent border-t-stone-900" />
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Primary Rasi (D1) ASCII Input */}
        <div className="bg-stone-50/50 p-6 rounded-2xl border border-stone-200">
          <div className="flex justify-between items-end mb-4 px-1">
            <div className="flex items-center gap-3">
              <h4 className="text-[10px] font-mono font-bold uppercase tracking-widest text-stone-900 bg-white px-3 py-1 rounded-full border border-stone-200 shadow-sm">D1 - Rasi Chart (Natal)</h4>
              <CopyButton content={data.rasiChartText} />
            </div>
            {rasiPreview && (
              <div className="text-[9px] font-mono text-stone-400 uppercase tracking-widest font-bold">
                Lagna: <span className="text-stone-900">{rasiPreview.split(',')[0]}</span>
              </div>
            )}
          </div>
          <textarea 
            className="w-full bg-white border border-stone-200 rounded-2xl p-6 font-mono text-[11px] h-64 focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-inner text-stone-600 leading-relaxed overflow-x-auto whitespace-pre"
            value={data.rasiChartText}
            onChange={e => setData(prev => ({ ...prev, rasiChartText: e.target.value }))}
            placeholder="Paste Rasi D1 ASCII grid from JHora here..."
            required
          />
        </div>

        {Object.keys(data.divisionalCharts).length > 0 && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
            {Object.entries(data.divisionalCharts).map(([key, value]) => (
              <div key={key} className="space-y-1.5 p-3 bg-stone-50/50 rounded-xl border border-stone-100 relative group">
                <div className="flex justify-between items-center px-1">
                  <div className="flex items-center gap-1.5">
                    <span className="text-[10px] font-mono font-black text-stone-900 uppercase tracking-widest">{key}</span>
                    <HelpTooltip content={VARGA_MEANINGS[key]} position="top" />
                  </div>
                  <div className="flex items-center gap-2">
                    <CopyButton content={parseJHoraGrid(value as string)} />
                    <button type="button" onClick={() => removeDivisionalChart(key)} className="text-stone-300 hover:text-red-500 transition-colors">
                      <Trash2 size={12} />
                    </button>
                  </div>
                </div>
                <textarea 
                  className="w-full h-32 bg-white border border-stone-200 rounded-xl p-3 font-mono text-[9px] focus:ring-1 focus:ring-stone-400 outline-none transition-all text-stone-600 resize-none shadow-sm h-[180px] overflow-x-auto whitespace-pre"
                  value={value as string}
                  onChange={e => updateDivisionalChart(key, e.target.value)}
                  placeholder={`Paste ${key} ASCII grid...`}
                />
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Step 4 & 5: Timing (Dasha) & Metadata */}
      <section className="bg-white p-6 rounded-2xl border border-stone-200">
        <h3 className="text-lg font-serif italic text-stone-900 mb-4">Step 4 & 5: Timing & Metadata</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-3">
            <div className="flex justify-between items-end px-1">
              <h4 className="text-[10px] font-mono font-bold uppercase tracking-widest text-stone-400">Dasha Timeline</h4>
              <CopyButton content={data.dasha} />
            </div>
            <textarea 
              className="w-full bg-stone-50 border border-stone-200 rounded-2xl p-4 font-mono text-[11px] h-40 focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-inner text-stone-600 resize-none"
              value={data.dasha}
              onChange={e => setData(prev => ({ ...prev, dasha: e.target.value }))}
              placeholder="Paste Dasha cycles here..."
              required
            />
          </div>

          <div className="space-y-3">
            <div className="flex justify-between items-end px-1">
              <h4 className="text-[10px] font-mono font-bold uppercase tracking-widest text-stone-400">Metadata & Assets</h4>
              <CopyButton content={data.additionalInfo} />
            </div>
            <textarea 
              className="w-full bg-stone-50 border border-stone-200 rounded-2xl p-4 font-mono text-[11px] h-40 focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-inner text-stone-600 resize-none"
              value={data.additionalInfo || ''}
              onChange={e => setData(prev => ({ ...prev, additionalInfo: e.target.value }))}
              placeholder="Shadbala, Special Lagnas, Observations..."
            />
          </div>
        </div>
      </section>

      {/* Step 6: Sarvastakavarga (SAV) */}
      <section className="bg-white p-8 rounded-2xl border border-stone-200 shadow-sm hover:shadow-md transition-shadow">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 rounded-2xl bg-stone-900 flex items-center justify-center text-white shadow-lg animate-in fade-in zoom-in duration-500">
              <Layout size={20} />
            </div>
            <div>
              <h3 className="text-xl font-serif italic text-stone-900">Step 6: Mathematical Strength (SAV)</h3>
              <p className="text-[10px] text-stone-400 font-mono uppercase tracking-widest mt-1 font-bold">Manual Score Entry • South Indian Grid</p>
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-4 bg-stone-50 p-2 rounded-2xl border border-stone-100">
            <div className="flex items-center gap-2 px-3">
              <label className="text-[10px] font-mono text-stone-400 uppercase tracking-widest font-black">Chart Ref:</label>
              <select 
                value={data.savChartType || 'D1'}
                onChange={e => setData(prev => ({ ...prev, savChartType: e.target.value }))}
                className="bg-white border border-stone-200 rounded-xl px-3 py-1.5 text-[11px] font-mono focus:ring-1 focus:ring-stone-400 outline-none transition-all text-stone-900 shadow-sm hover:border-stone-400"
              >
                <option value="D1">Rasi (D1)</option>
                <option value="D9">Navamsha (D9)</option>
                <option value="D10">Dashamsha (D10)</option>
                <option value="D60">Shashtiamsha (D60)</option>
              </select>
            </div>
            <div className="w-[1px] h-6 bg-stone-200 hidden md:block" />
            <CopyButton 
               label="Copy SAV Table"
               content={(function() {
                 const currentRef = normalizeVargaType(data.savChartType || 'D1');
                 const scores = data.vargaAshtakavarga?.[currentRef] || {};
                 let tableContent = `### SAV Score for ${data.savChartType || 'D1'}\n\n| H | Sign | Score |\n| :--- | :--- | :--- |\n`;
                 const sortedTableData = zodOrder
                  .map(sign => {
                    const idx = zodOrder.indexOf(sign);
                    const houseNum = ((idx - lagnaIdx + 12) % 12) + 1;
                    return { houseNum, sign, score: scores[sign] || 0 };
                  })
                  .sort((a, b) => a.houseNum - b.houseNum);

                 sortedTableData.forEach(item => {
                   tableContent += `| H${item.houseNum < 10 ? '0' : ''}${item.houseNum} | ${item.sign} | ${item.score} |\n`;
                 });
                 return tableContent;
               })()} 
             />
          </div>
        </div>

        {/* Screenshot Paste Area */}
        <div 
          className={`mb-8 p-6 rounded-3xl flex flex-col items-center justify-center text-center transition-all cursor-crosshair relative overflow-hidden min-h-[160px] border-2 border-dashed ${
            savImage ? 'border-emerald-200 bg-white' : 'border-stone-200 bg-stone-50 group/paste hover:border-stone-400'
          }`}
          onPaste={handlePasteImage}
          tabIndex={0}
        >
           {savImage ? (
             <div className="relative w-full max-w-md animate-in fade-in zoom-in duration-300">
               <img src={savImage} alt="SAV Screenshot" className="rounded-xl shadow-lg border border-stone-200 max-h-[300px] mx-auto" />
               <button 
                type="button" 
                onClick={() => setSavImage(null)}
                className="absolute -top-3 -right-3 w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center shadow-lg hover:bg-red-600 transition-colors border-2 border-white"
               >
                 <Trash2 size={14} />
               </button>
               <div className="mt-4 flex justify-center gap-3">
                 <button 
                    type="button" 
                    disabled={isOcrLoading}
                    onClick={async () => {
                      if (!savImage) return;
                      const currentRef = normalizeVargaType(data.savChartType || 'D1');
                      
                      setIsOcrLoading(true);
                      try {
                        const result = await VisionScanner.scanSAV(savImage, currentRef);
                        
                        // Update state with extracted scores
                        setData(prev => {
                          const vAV = prev.vargaAshtakavarga || {};
                          return {
                            ...prev,
                            vargaAshtakavarga: {
                              ...vAV,
                              [currentRef]: result.scores
                            },
                            // Legacy sync for D1
                            ...(currentRef === 'D1' ? { ashtakavarga: result.scores } : {})
                          };
                        });
                        
                        // Visual success feedback
                        alert(`Successfully synced ${currentRef} SAV scores!`);
                      } catch (err: any) {
                        console.error('OCR Error:', err);
                        alert(`Failed to extract data: ${err.message}`);
                      } finally {
                        setIsOcrLoading(false);
                      }
                    }}
                    className={`px-4 py-2 bg-stone-900 text-white text-[10px] font-mono uppercase tracking-widest rounded-xl transition-all shadow-md flex items-center gap-2 ${isOcrLoading ? 'opacity-70 cursor-wait' : 'hover:bg-stone-800'}`}
                  >
                    {isOcrLoading ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
                    {isOcrLoading ? 'Extracting Grid...' : 'Sync with AI Assistant'}
                  </button>
                 <button type="button" onClick={() => setSavImage(null)} className="px-4 py-2 bg-white border border-stone-200 text-stone-600 text-[10px] font-mono uppercase tracking-widest rounded-xl hover:bg-stone-50 transition-all">Clear Image</button>
               </div>
               
               {isOcrLoading && (
                 <div className="mt-4 p-3 bg-stone-900/5 rounded-xl border border-stone-200/50 animate-pulse text-[10px] font-mono text-stone-500 uppercase tracking-widest">
                   AI is parsing JHora spatial data...
                 </div>
               )}
             </div>
           ) : (
             <>
               <div className="w-12 h-12 rounded-full bg-white shadow-sm flex items-center justify-center text-stone-300 mb-3 group-hover/paste:scale-110 transition-transform">
                 <Layout size={20} />
               </div>
               <p className="text-[11px] font-mono uppercase tracking-[0.2em] text-stone-900 font-bold mb-1">Paste JHora Screenshot Here</p>
               <p className="text-[10px] text-stone-400 font-sans italic mb-4">Click this box and press Ctrl+V to sync visual context</p>
               
               <div className="flex gap-2">
                 <button type="button" className="px-3 py-1.5 bg-white border border-stone-200 rounded-lg text-[9px] font-mono uppercase tracking-widest hover:bg-stone-900 hover:text-white transition-all shadow-sm">Upload File</button>
                 <button type="button" className="px-3 py-1.5 bg-white border border-stone-200 rounded-lg text-[9px] font-mono uppercase tracking-widest hover:bg-stone-50 transition-all shadow-sm opacity-50 cursor-not-allowed">AI Sync OCR</button>
               </div>
             </>
           )}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          {/* Left Side: 4x4 Grid Input */}
          <div className="space-y-4">
            <div className="flex items-center justify-between px-2 bg-stone-50 py-3 rounded-2xl border border-stone-100/50">
              <div className="flex items-center gap-2">
                <HelpCircle size={14} className="text-stone-300" />
                <h4 className="text-[10px] font-mono font-bold uppercase tracking-widest text-stone-600">Sync with JHora Screenshot</h4>
              </div>
              <span className="text-[9px] text-stone-400 font-sans italic">Hover to identify signs</span>
            </div>
            
            <div className="grid grid-cols-4 gap-2 aspect-square max-w-[440px] mx-auto p-4 bg-stone-50 rounded-[40px] border border-stone-100 shadow-[inset_0_2px_10px_rgba(0,0,0,0.02)]">
              {(() => {
                const gridLayout = [
                  ["PISCES", "ARIES", "TAURUS", "GEMINI"],
                  ["AQUARIUS", null, null, "CANCER"],
                  ["CAPRICORN", null, null, "LEO"],
                  ["SAGITTARIUS", "SCORPIO", "LIBRA", "VIRGO"]
                ];

                const currentRef = normalizeVargaType(data.savChartType || 'D1');
                const scores = data.vargaAshtakavarga?.[currentRef] || {};

                return gridLayout.flatMap((row, rIdx) => 
                  row.map((sign, cIdx) => {
                    if (!sign) {
                      return (
                        <div key={`empty-${rIdx}-${cIdx}`} className="rounded-2xl flex flex-col items-center justify-center border border-stone-200/20 bg-stone-100/30">
                          {rIdx === 1 && cIdx === 1 && <span className="text-[20px] font-serif italic text-stone-900 font-black tracking-tighter mix-blend-overlay">SAV</span>}
                          {rIdx === 2 && cIdx === 1 && <span className="text-[9px] font-mono text-stone-300 font-bold uppercase tracking-[0.2em]">{data.savChartType}</span>}
                        </div>
                      );
                    }

                    const pts = scores[sign] || 0;
                    const signIdx = zodOrder.indexOf(sign);
                    const hNum = ((signIdx - lagnaIdx + 12) % 12) + 1;
                    const isLagna = sign === lagnaSign;
                    const isStrong = pts >= 28;

                    return (
                      <div 
                        key={sign} 
                        className={`relative group/cell flex flex-col items-center justify-center p-2 rounded-2xl border transition-all duration-300 ${
                          isLagna 
                            ? 'bg-stone-900 border-stone-800 shadow-[0_0_15px_rgba(0,0,0,0.15)] scale-105 z-10' 
                            : isStrong
                              ? 'bg-emerald-50/50 border-emerald-100'
                              : 'bg-white border-stone-100 hover:border-stone-400 hover:shadow-sm'
                        }`}
                      >
                        <label className={`text-[8px] font-mono font-black uppercase tracking-tighter mb-1 transition-colors ${
                          isLagna ? 'text-stone-400' : 'text-stone-400 group-hover:text-stone-900'
                        }`}>
                          {`H${hNum < 10 ? '0' : ''}${hNum} - ${sign.slice(0, 3)}`}
                        </label>
                        
                        {isLagna && (
                          <div className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center text-[8px] font-black shadow-lg border-2 border-white animate-pulse">
                            As
                          </div>
                        )}

                        <input 
                          type="number"
                          value={pts || ''}
                          placeholder="0"
                          onChange={e => {
                            const val = parseInt(e.target.value) || 0;
                            setData(prev => {
                              const vAV = prev.vargaAshtakavarga || {};
                              const currentScores = vAV[currentRef] || {};
                              return {
                                ...prev,
                                vargaAshtakavarga: {
                                  ...vAV,
                                  [currentRef]: { ...currentScores, [sign]: val }
                                },
                                ...(currentRef === 'D1' ? { ashtakavarga: { ...currentScores, [sign]: val } } : {})
                              };
                            });
                          }}
                          className={`w-full text-center bg-transparent text-lg font-serif italic focus:ring-0 outline-none transition-all ${
                            isLagna ? 'text-white' : 'text-stone-900 group-hover/cell:scale-110'
                          } ${isStrong && !isLagna ? 'text-emerald-700 font-black' : ''}`}
                        />
                        
                        {pts > 0 && (
                          <div className={`mt-1 h-0.5 w-4 rounded-full transition-all ${
                            isStrong ? 'bg-emerald-400 w-8' : 'bg-stone-200'
                          }`} />
                        )}
                      </div>
                    );
                  })
                );
              })()}
            </div>

          </div>

          {/* Right Side: House & Sign Analysis Table */}
          <div className="space-y-6">
            <div className="bg-stone-900 rounded-[32px] p-8 shadow-2xl relative overflow-hidden group/board">
              <div className="absolute top-0 right-0 p-12 opacity-5 -rotate-12 transition-transform duration-1000 group-hover/board:rotate-12 group-hover/board:scale-125">
                <Star size={160} className="text-white" />
              </div>
              
              <div className="relative z-10 space-y-6">
                <div className="flex items-center justify-between">
                   <div>
                     <h4 className="text-[10px] font-mono font-bold uppercase tracking-[0.2em] text-stone-500">Analysis Dashboard</h4>
                     <p className="text-[14px] font-serif italic text-white mt-1">House Alignment View</p>
                   </div>
                   <div className="px-3 py-1 bg-white/10 text-white text-[9px] font-mono rounded-full border border-white/20 backdrop-blur-sm animate-pulse">ACTIVE</div>
                </div>

                <div className="space-y-1 max-h-[360px] overflow-y-auto pr-3 custom-scrollbar">
                   {zodOrder.map(sign => {
                     const idx = zodOrder.indexOf(sign);
                     const houseNum = ((idx - lagnaIdx + 12) % 12) + 1;
                     const isAsc = houseNum === 1;
                     const currentRef = normalizeVargaType(data.savChartType || 'D1');
                     const scores = data.vargaAshtakavarga?.[currentRef] || {};
                     const pts = scores[sign] || 0;
                     const isHigh = pts >= 30;
                     const isLow = pts > 0 && pts <= 25;

                     return (
                       <div key={`house-row-${sign}`} className={`flex items-center justify-between py-2.5 px-4 rounded-xl transition-all duration-300 group/row ${
                         isAsc ? 'bg-white/10 border border-white/10 shadow-lg' : 'hover:bg-white/5 border border-transparent hover:border-white/5'
                       }`}>
                         <div className="flex items-center gap-4">
                           <span className={`w-8 text-[11px] font-mono transition-colors ${
                             isAsc ? 'text-white font-black' : isHigh ? 'text-emerald-400' : isLow ? 'text-orange-400' : 'text-stone-600'
                           }`}>
                             H{houseNum < 10 ? `0${houseNum}` : houseNum}
                           </span>
                           <div className="flex flex-col">
                             <span className={`text-[13px] font-serif italic transition-colors ${isAsc ? 'text-white' : 'text-stone-300'}`}>{sign}</span>
                             {isAsc && <span className="text-[8px] font-mono text-stone-500 uppercase tracking-widest font-bold">Lagna Point</span>}
                           </div>
                         </div>
                         
                         <div className="flex items-center gap-4">
                            <div className="text-right">
                              <span className={`text-xl font-serif italic transition-all duration-500 ${
                                isHigh ? 'text-emerald-400 drop-shadow-[0_0_8px_rgba(16,185,129,0.15)]' : isLow ? 'text-orange-400' : 'text-white/80'
                              }`}>
                                {pts || '--'}
                              </span>
                            </div>
                            <div className="w-16 h-1 bg-stone-800 rounded-full overflow-hidden shadow-inner flex-none">
                               <div 
                                 className={`h-full transition-all duration-700 ease-out rounded-full ${
                                   isHigh ? 'bg-emerald-400' : isLow ? 'bg-orange-400' : 'bg-stone-600'
                                 }`}
                                 style={{ width: `${Math.min((pts / 45) * 100, 100)}%` }}
                               />
                            </div>
                         </div>
                       </div>
                     );
                   })}
                </div>

                <div className="pt-6 border-t border-stone-800 flex items-start gap-3">
                   <div className="w-1 h-1 rounded-full bg-emerald-400 mt-2 animate-ping" />
                   <p className="text-[10px] text-stone-500 font-sans leading-relaxed">
                     Lagna-aligned SAV scores provide high-resolution predictive insights. 
                     Scores {'>'}30 typically indicate effortless manifestation in related house significations.
                   </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Transit Synthesis Section - ULTRA CONDENSED */}
      <section className="bg-stone-50 p-5 rounded-2xl border border-stone-200">
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2">
              <h3 className="text-lg font-serif italic text-stone-900">Step 7: Contextual Analysis (Transit)</h3>
              <HelpTooltip content="Correlate current transits with your Natal chart. Enter the Transit ASCII grid below." position="top" />
            </div>
            
            <div className="w-[1px] h-4 bg-stone-200 mx-1" />
            
            {/* Natal Ref Selector - Dropdown Style */}
            <div className="relative group/transit">
              <button 
                type="button"
                onClick={() => setShowTransitNatalSelect(!showTransitNatalSelect)}
                className="flex items-center gap-2 px-3 py-1.5 bg-white border border-stone-200 rounded-full hover:border-stone-300 transition-all text-[10px] font-mono text-stone-700 shadow-sm"
              >
                <span className="text-stone-400">Natal Ref:</span>
                <span className="font-bold">{data.transitNatalSelection || 'D1'}</span>
                <ChevronRight size={12} className={`text-stone-300 transition-transform ${showTransitNatalSelect ? 'rotate-90' : ''}`} />
              </button>
              
              {showTransitNatalSelect && (
                <div className="absolute left-0 top-full mt-2 w-48 p-2 bg-white rounded-xl shadow-2xl border border-stone-200 z-[100] animate-in fade-in zoom-in duration-200">
                  <div className="space-y-1">
                    <button 
                      type="button"
                      onClick={() => { setData(prev => ({ ...prev, transitNatalSelection: 'D1' })); setShowTransitNatalSelect(false); }}
                      className={`w-full text-left px-3 py-2 rounded-lg font-mono text-[10px] transition-all ${
                        data.transitNatalSelection === 'D1' ? 'bg-stone-900 text-white font-bold' : 'hover:bg-stone-50 text-stone-600'
                      }`}
                    >
                      Rasi (D1)
                    </button>
                    {Object.entries(data.divisionalCharts)
                      .filter(([_, value]) => (value as string).trim().length > 0)
                      .map(([key]) => (
                        <button 
                          key={key}
                          type="button"
                          onClick={() => { setData(prev => ({ ...prev, transitNatalSelection: key })); setShowTransitNatalSelect(false); }}
                          className={`w-full text-left px-3 py-2 rounded-lg font-mono text-[10px] transition-all ${
                            data.transitNatalSelection === key ? 'bg-stone-900 text-white font-bold' : 'hover:bg-stone-50 text-stone-600'
                          }`}
                        >
                          {key} Chart
                        </button>
                      ))
                    }
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button 
              type="button"
              onClick={() => {
                const natalRef = data.transitNatalSelection || 'D1';
                const natalAscii = natalRef === 'D1' ? data.rasiChartText : data.divisionalCharts[natalRef];
                
                const transitTableContent = generateCombinedTransitTable(
                  natalAscii || '', 
                  data.transitChartText || '', 
                  { 
                    natalName: natalRef,
                    transitDateTime: data.transitDateTime || ''
                  }
                );
                const fullTransitText = `
TRANSIT SYNTHESIS (${natalRef} vs Transit)
Date: ${data.transitDateTime}
Transit Data:
${data.transitChartText}

Comparison Table:
${transitTableContent}
                `.trim();
                navigator.clipboard.writeText(fullTransitText);
                setCopied(true);
                setTimeout(() => setCopied(false), 2000);
              }}
              className={`flex items-center gap-2 px-4 py-2 rounded-full font-mono text-[9px] uppercase tracking-widest transition-all ${
                copied ? 'bg-stone-900 text-white' : 'bg-white border border-stone-200 text-stone-400 hover:text-stone-900 hover:border-stone-300 shadow-sm'
              }`}
            >
              <ClipboardIcon size={12} /> {copied ? 'Transit Data Copied' : 'Copy Transit Data'}
            </button>
          </div>
        </div>

        <div className="flex flex-col lg:flex-row gap-8">
          {/* Left Block: Date & Time */}
          <div className="flex flex-row lg:flex-col gap-4 lg:w-64 flex-none">
            <div className="flex-1 lg:flex-none">
               <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-2 block">Transit Date</label>
               <VedicDateTimePicker 
                type="date"
                value={data.transitDateTime || ''}
                onChange={v => setData(prev => ({ ...prev, transitDateTime: v }))}
              />
            </div>
            <div className="flex-1 lg:flex-none">
               <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-2 block">Transit Time</label>
               <VedicDateTimePicker 
                type="time"
                value={data.transitDateTime || ''}
                onChange={v => setData(prev => ({ ...prev, transitDateTime: v }))}
              />
            </div>
          </div>

          {/* Right Block: ASCII Chart */}
          <div className="flex-1">
            <label className="text-[9px] font-mono uppercase tracking-widest text-stone-400 font-bold mb-2 block">Transit Chart (ASCII)</label>
            <div className="relative group/ascii h-full min-h-[160px]">
              <textarea 
                className="w-full h-full bg-white border border-stone-200 rounded-2xl p-4 font-mono text-[10px] outline-none shadow-sm focus:ring-1 focus:ring-stone-400 resize-none transition-all text-stone-600 leading-relaxed"
                value={data.transitChartText || ''}
                onChange={e => setData(prev => ({ ...prev, transitChartText: e.target.value }))}
                placeholder="Paste Transit ASCII Grid..."
              />
              <div className="absolute top-3 right-3 opacity-0 group-hover/ascii:opacity-100 transition-opacity">
                <CopyButton content={generateCombinedTransitTable(
                  (data.transitNatalSelection || 'D1') === 'D1' 
                    ? data.rasiChartText 
                    : data.divisionalCharts[data.transitNatalSelection as string] || '',
                  data.transitChartText || '',
                  {
                    natalName: data.transitNatalSelection || 'D1',
                    transitDateTime: data.transitDateTime || ''
                  }
                )} />
              </div>
            </div>
          </div>
        </div>
      </section>


      {/* Action Footer */}
      <div className="fixed bottom-0 left-0 w-full bg-stone-50/90 backdrop-blur-md border-t border-stone-200 py-4 px-4 z-40">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="flex items-center gap-4">
            <button type="button" onClick={handleClear} className="text-[10px] font-mono font-bold text-stone-400 uppercase tracking-widest hover:text-red-500 transition-colors">Clear All</button>
            <div className="w-[1px] h-6 bg-stone-200" />
            <button 
              type="button"
              disabled={!data.longitudeTable || !data.rasiChartText}
              onClick={generateMasterContext}
              className={`flex items-center gap-2 px-6 py-2 rounded-full font-mono text-[10px] uppercase tracking-widest transition-all h-10 ${
                copied ? 'bg-stone-900 text-white shadow-lg' : 'bg-stone-100 text-stone-600 hover:bg-stone-200'
              } disabled:opacity-30`}
            >
              <Terminal size={14} /> {copied ? 'COPIED !' : 'COPY ALL TECHNICAL DATA'}
            </button>

            {state.activeProfileId && (
              <>
               <div className="w-[1px] h-6 bg-stone-200" />
               <button 
                type="button"
                onClick={handleSyncProfile}
                disabled={!hasChanges || isSyncing}
                className={`flex items-center gap-2 px-6 py-2 rounded-full font-mono text-[10px] uppercase tracking-widest transition-all h-10 relative overflow-hidden ${
                  syncSuccess 
                    ? 'bg-emerald-500 text-white shadow-lg' 
                    : hasChanges 
                      ? 'bg-stone-900 text-white shadow-lg' 
                      : 'bg-stone-100 text-stone-400 cursor-default'
                } disabled:opacity-50`}
               >
                 {isSyncing ? (
                   <Loader2 size={14} className="animate-spin" />
                 ) : syncSuccess ? (
                   <Check size={14} />
                 ) : (
                   <RefreshCcw size={14} className={hasChanges ? 'animate-pulse' : ''} />
                 )}
                 <span>{syncSuccess ? 'SYNCED' : isSyncing ? 'SYNCING...' : hasChanges ? 'SYNC MASTER DATA' : 'UP TO DATE'}</span>
                 
                 {hasChanges && !isSyncing && !syncSuccess && (
                   <div className="absolute top-1.5 right-1.5 w-2 h-2 bg-emerald-400 rounded-full animate-ping" />
                 )}
               </button>
              </>
            )}
          </div>

          <button 
            type="submit"
            className="w-full md:w-auto px-10 py-3 bg-stone-900 text-white font-serif italic text-lg rounded-full shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all h-12"
          >
            Begin Deep Analysis
          </button>
        </div>
      </div>
      {showBatchImporter && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-stone-900/40 backdrop-blur-md animate-in fade-in duration-300">
          <div className="bg-white w-full max-w-3xl rounded-3xl shadow-2xl border border-stone-200 overflow-hidden flex flex-col max-h-[80vh] animate-in zoom-in-95 duration-300">
            <div className="p-6 border-b border-stone-100 flex items-center justify-between bg-stone-50">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-stone-900 flex items-center justify-center text-white shadow-lg">
                  <Sparkles size={20} />
                </div>
                <div>
                  <h3 className="text-lg font-serif italic text-stone-900">Batch Chart Importer</h3>
                  <p className="text-[10px] text-stone-400 font-mono uppercase tracking-widest mt-1 font-bold">Paste Raw JHora ASCII Grids Below</p>
                </div>
              </div>
              <button 
                type="button" 
                onClick={() => setShowBatchImporter(false)}
                className="w-10 h-10 rounded-full hover:bg-stone-200 flex items-center justify-center text-stone-400 hover:text-stone-900 transition-all"
              >
                <Plus size={20} className="rotate-45" />
              </button>
            </div>
            
            <div className="p-6 flex-1 overflow-hidden flex flex-col space-y-4">
              <p className="text-[11px] text-stone-500 leading-relaxed italic">
                Paste raw ASCII grids copied directly from Jagannatha Hora. The system will automatically detect the charts (Rasi, D-9, D-10, etc.) and populate the relevant fields below.
              </p>
              <textarea 
                className="flex-1 w-full bg-stone-50 border border-stone-200 rounded-2xl p-6 font-mono text-[11px] focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-inner text-stone-600 leading-relaxed overflow-x-auto whitespace-pre h-64"
                placeholder="Paste JHora charts here (e.g. ones with +-----------------------------------------------+ )"
                value={batchImportText}
                onChange={e => setBatchImportText(e.target.value)}
              />
            </div>
            
            <div className="p-6 bg-stone-50 border-t border-stone-100 flex justify-end gap-4">
              <button 
                type="button" 
                onClick={() => setShowBatchImporter(false)}
                className="px-6 py-2 rounded-full font-mono text-[10px] uppercase tracking-widest text-stone-400 hover:text-stone-900 transition-all font-bold"
              >
                Cancel
              </button>
              <button 
                type="button"
                onClick={() => parseBatchImport(batchImportText)}
                disabled={!batchImportText.trim()}
                className="px-8 py-3 bg-stone-900 text-white font-mono text-[10px] uppercase tracking-widest rounded-full shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0 active:scale-95 transition-all disabled:opacity-30 flex items-center gap-2"
              >
                <Check size={14} /> Process Import
              </button>
            </div>
          </div>
        </div>
      )}
    </form>
  );
}