import React, { useState, useEffect, useRef } from 'react';
import { Clock, Calendar } from 'lucide-react';
import ScrollPicker from './ScrollPicker';

interface Props {
  value: string; // ISO format or HH:mm:ss
  onChange: (value: string) => void;
  type: 'date' | 'time' | 'datetime';
  label?: string;
}

export default function VedicDateTimePicker({ value, onChange, type, label }: Props) {
  const [internalDate, setInternalDate] = useState('');
  const [hour, setHour] = useState(10);
  const [minute, setMinute] = useState(0);
  const [second, setSecond] = useState(0);
  const [showPicker, setShowPicker] = useState(false);
  const pickerRef = useRef<HTMLDivElement>(null);

  // Sync internal state from value prop
  useEffect(() => {
    if (!value) return;
    try {
      if (type === 'time') {
        const [h, m, s] = value.split(':').map(Number);
        setHour(isNaN(h) ? 10 : h);
        setMinute(isNaN(m) ? 0 : m);
        setSecond(isNaN(s) ? 0 : s);
      } else if (type === 'date') {
        setInternalDate(value);
      } else if (type === 'datetime') {
        const parts = value.split(' ');
        if (parts.length === 2) {
           setInternalDate(parts[0]);
           const [h, m, s] = parts[1].split(':').map(Number);
           setHour(isNaN(h) ? 10 : h); 
           setMinute(isNaN(m) ? 0 : m); 
           setSecond(isNaN(s) ? 0 : s);
        } else if (value.includes('T')) {
           const [dPart, tPart] = value.split('T');
           setInternalDate(dPart);
           const [h, m, s] = tPart.replace('Z', '').split(':').map(Number);
           setHour(isNaN(h) ? 10 : h); 
           setMinute(isNaN(m) ? 0 : m); 
           setSecond(isNaN(s) ? 0 : s);
        }
      }
    } catch (e) {
      console.error("Date Parse Error:", e);
    }
  }, [value, type]);

  // Handle outside clicks
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
        setShowPicker(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newDateStr = e.target.value;
    setInternalDate(newDateStr);
    
    if (type === 'date') {
      onChange(newDateStr);
    } else {
      const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
      onChange(`${newDateStr} ${timeStr}`);
    }
  };

  const handleTimeUpdate = (h: number, mi: number, s: number) => {
    const timeStr = `${h.toString().padStart(2, '0')}:${mi.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    if (type === 'time') {
      onChange(timeStr);
    } else {
      onChange(`${internalDate} ${timeStr}`);
    }
  };

  const hours = Array.from({ length: 24 }, (_, i) => i);
  const minutes = Array.from({ length: 60 }, (_, i) => i);
  const seconds = Array.from({ length: 60 }, (_, i) => i);

  return (
    <div className="relative inline-block" ref={pickerRef}>
      <div className="flex items-center gap-1">
        {(type === 'date' || type === 'datetime') && (
          <div className="relative group">
            <input
              type="date"
              value={internalDate}
              onChange={handleDateChange}
              className="bg-white border border-stone-200 rounded-xl px-3 py-2 font-mono text-xs text-stone-900 focus:ring-1 focus:ring-stone-400 outline-none transition-all shadow-sm h-11 w-36 hover:border-stone-300"
            />
          </div>
        )}
        
        {(type === 'time' || type === 'datetime') && (
          <div className="relative">
            <button
              type="button"
              onClick={() => setShowPicker(!showPicker)}
              className="flex items-center gap-2 px-3 py-2 bg-white border border-stone-200 rounded-xl hover:border-stone-300 transition-all text-xs font-mono text-stone-700 h-11 min-w-[110px] shadow-sm active:scale-95"
            >
              <Clock size={14} className="text-stone-300" />
              <span>{hour.toString().padStart(2, '0')}:{minute.toString().padStart(2, '0')}:{second.toString().padStart(2, '0')}</span>
            </button>

            {showPicker && (
              <div className="absolute top-full right-0 mt-2 p-4 bg-white rounded-2xl shadow-2xl border border-stone-200 z-[100] animate-in fade-in zoom-in duration-200">
                <div className="flex gap-2">
                  <ScrollPicker label="HR" values={hours} selectedValue={hour} onChange={v => { setHour(v); handleTimeUpdate(v, minute, second); }} />
                  <ScrollPicker label="MN" values={minutes} selectedValue={minute} onChange={v => { setMinute(v); handleTimeUpdate(hour, v, second); }} />
                  <ScrollPicker label="SC" values={seconds} selectedValue={second} onChange={v => { setSecond(v); handleTimeUpdate(hour, minute, v); }} />
                </div>
                <button 
                  type="button"
                  onClick={() => setShowPicker(false)}
                  className="w-full mt-4 py-2 bg-stone-900 text-white font-mono text-[10px] uppercase tracking-widest rounded-lg hover:bg-stone-800 transition-colors"
                >
                  Done
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}