'use client';

/**
 * Shadcn DatePicker Component
 * 
 * Custom, accessible, and animated Date Picker Popover with Year & Month navigation
 * and interactive Calendar Grid. Eliminates native browser date pickers.
 */

import * as React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Calendar as CalendarIcon,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
} from 'lucide-react';
import { cn } from '@/lib/utils';

export interface DatePickerProps {
  value?: string; // Format: YYYY-MM-DD
  onChange?: (dateString: string) => void;
  placeholder?: string;
  className?: string;
  minYear?: number;
  maxYear?: number;
  locale?: string;
  disabled?: boolean;
}

const MONTHS_EN = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

const MONTHS_AR = [
  'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
  'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
];

const DAYS_EN = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
const DAYS_AR = ['أحد', 'إثن', 'ثلا', 'أرب', 'خمي', 'جمع', 'سبت'];

export function DatePicker({
  value = '',
  onChange,
  placeholder = 'Select date',
  className,
  minYear = 1940,
  maxYear = new Date().getFullYear(),
  locale = 'en',
  disabled = false,
}: DatePickerProps) {
  const isAr = locale === 'ar';
  const [open, setOpen] = React.useState(false);
  const containerRef = React.useRef<HTMLDivElement>(null);

  // Parse initial date
  const parsedDate = React.useMemo(() => {
    if (!value) return null;
    const [y, m, d] = value.split('-').map(Number);
    if (!y || !m || !d) return null;
    return new Date(y, m - 1, d);
  }, [value]);

  const [prevValue, setPrevValue] = React.useState(value);
  const [viewYear, setViewYear] = React.useState<number>(
    parsedDate ? parsedDate.getFullYear() : 1995
  );
  const [viewMonth, setViewMonth] = React.useState<number>(
    parsedDate ? parsedDate.getMonth() : 3 // April default
  );

  // Sync view when value prop changes during render
  if (value !== prevValue) {
    setPrevValue(value);
    if (parsedDate) {
      setViewYear(parsedDate.getFullYear());
      setViewMonth(parsedDate.getMonth());
    }
  }

  // Mode: 'calendar' | 'year' | 'month'
  const [viewMode, setViewMode] = React.useState<'calendar' | 'year' | 'month'>('calendar');

  // Click outside to close
  React.useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setOpen(false);
        setViewMode('calendar');
      }
    };
    if (open) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [open]);

  // Formatted display text
  const formattedDisplay = React.useMemo(() => {
    if (!parsedDate) return '';
    const day = String(parsedDate.getDate()).padStart(2, '0');
    const monthName = isAr ? MONTHS_AR[parsedDate.getMonth()] : MONTHS_EN[parsedDate.getMonth()];
    const year = parsedDate.getFullYear();
    return isAr ? `${day} ${monthName} ${year}` : `${monthName} ${day}, ${year}`;
  }, [parsedDate, isAr]);

  // Days in month calculation
  const calendarDays = React.useMemo(() => {
    const firstDayIndex = new Date(viewYear, viewMonth, 1).getDay();
    const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
    const daysInPrevMonth = new Date(viewYear, viewMonth, 0).getDate();

    const days: { day: number; isCurrentMonth: boolean; dateStr: string }[] = [];

    // Previous month padding
    for (let i = firstDayIndex - 1; i >= 0; i--) {
      const prevDay = daysInPrevMonth - i;
      const prevMonth = viewMonth === 0 ? 11 : viewMonth - 1;
      const prevYear = viewMonth === 0 ? viewYear - 1 : viewYear;
      const dateStr = `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(prevDay).padStart(2, '0')}`;
      days.push({ day: prevDay, isCurrentMonth: false, dateStr });
    }

    // Current month days
    for (let d = 1; d <= daysInMonth; d++) {
      const dateStr = `${viewYear}-${String(viewMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
      days.push({ day: d, isCurrentMonth: true, dateStr });
    }

    // Next month padding to fill 35 or 42 slots
    const remaining = (7 - (days.length % 7)) % 7;
    for (let d = 1; d <= remaining; d++) {
      const nextMonth = viewMonth === 11 ? 0 : viewMonth + 1;
      const nextYear = viewMonth === 11 ? viewYear + 1 : viewYear;
      const dateStr = `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
      days.push({ day: d, isCurrentMonth: false, dateStr });
    }

    return days;
  }, [viewYear, viewMonth]);

  const handleSelectDate = (dateStr: string) => {
    onChange?.(dateStr);
    setOpen(false);
    setViewMode('calendar');
  };

  const handlePrevMonth = () => {
    if (viewMonth === 0) {
      setViewMonth(11);
      setViewYear((prev) => prev - 1);
    } else {
      setViewMonth((prev) => prev - 1);
    }
  };

  const handleNextMonth = () => {
    if (viewMonth === 11) {
      setViewMonth(0);
      setViewYear((prev) => prev + 1);
    } else {
      setViewMonth((prev) => prev + 1);
    }
  };

  // Generate Year options
  const yearsList = React.useMemo(() => {
    const list = [];
    for (let y = maxYear; y >= minYear; y--) {
      list.push(y);
    }
    return list;
  }, [minYear, maxYear]);

  return (
    <div ref={containerRef} className={cn('relative w-full text-start', className)}>
      {/* ── Trigger Button ── */}
      <button
        type="button"
        disabled={disabled}
        onClick={() => setOpen(!open)}
        aria-expanded={open}
        aria-haspopup="dialog"
        className={cn(
          'flex h-11 w-full items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-3.5 py-2 text-xs font-semibold text-zinc-900 dark:text-white transition-all shadow-2xs hover:border-zinc-300 dark:hover:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer select-none',
          open && 'border-zinc-900 dark:border-white ring-1 ring-zinc-900 dark:ring-white'
        )}
      >
        <div className="flex items-center gap-2 truncate">
          <CalendarIcon className="w-4 h-4 text-brand-500 shrink-0" />
          <span className={cn(!value && 'text-zinc-400 dark:text-zinc-500 font-normal')}>
            {formattedDisplay || placeholder}
          </span>
        </div>
        <ChevronDown
          className={cn(
            'h-4 w-4 text-zinc-400 dark:text-zinc-500 shrink-0 transition-transform duration-200 ms-2',
            open && 'rotate-180 text-zinc-900 dark:text-white'
          )}
        />
      </button>

      {/* ── Animated Popover Calendar Dropdown ── */}
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: -6, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -6, scale: 0.98 }}
            transition={{ duration: 0.15, ease: 'easeOut' }}
            className="absolute z-50 mt-1.5 w-[310px] sm:w-[320px] rounded-3xl border border-zinc-200 dark:border-zinc-800 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-md p-4 shadow-2xl focus:outline-none select-none"
          >
            {/* Header: Month & Year Picker Buttons + Navigation */}
            <div className="flex items-center justify-between pb-3 border-b border-zinc-100 dark:border-zinc-800 gap-1">
              <div className="flex items-center gap-1.5">
                <button
                  type="button"
                  onClick={() => setViewMode(viewMode === 'month' ? 'calendar' : 'month')}
                  className={cn(
                    'px-2.5 py-1 text-xs font-extrabold rounded-lg transition-colors cursor-pointer flex items-center gap-1',
                    viewMode === 'month'
                      ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                      : 'text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800'
                  )}
                >
                  <span>{isAr ? MONTHS_AR[viewMonth] : MONTHS_EN[viewMonth]}</span>
                  <ChevronDown className="w-3 h-3 text-zinc-400" />
                </button>

                <button
                  type="button"
                  onClick={() => setViewMode(viewMode === 'year' ? 'calendar' : 'year')}
                  className={cn(
                    'px-2.5 py-1 text-xs font-extrabold rounded-lg transition-colors cursor-pointer flex items-center gap-1',
                    viewMode === 'year'
                      ? 'bg-zinc-900 text-white dark:bg-white dark:text-zinc-900'
                      : 'text-zinc-900 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800'
                  )}
                >
                  <span>{viewYear}</span>
                  <ChevronDown className="w-3 h-3 text-zinc-400" />
                </button>
              </div>

              {/* Prev / Next Month Buttons */}
              {viewMode === 'calendar' && (
                <div className="flex items-center gap-1">
                  <button
                    type="button"
                    onClick={handlePrevMonth}
                    className="p-1.5 text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors cursor-pointer"
                    title={isAr ? 'الشهر السابق' : 'Previous Month'}
                  >
                    {isAr ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
                  </button>
                  <button
                    type="button"
                    onClick={handleNextMonth}
                    className="p-1.5 text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors cursor-pointer"
                    title={isAr ? 'الشهر القادم' : 'Next Month'}
                  >
                    {isAr ? <ChevronLeft className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
                  </button>
                </div>
              )}
            </div>

            {/* ── VIEW MODE 1: CALENDAR GRID ── */}
            {viewMode === 'calendar' && (
              <div className="pt-3">
                {/* Day Headers (Su, Mo, Tu, We, Th, Fr, Sa) */}
                <div className="grid grid-cols-7 gap-1 text-center mb-1">
                  {(isAr ? DAYS_AR : DAYS_EN).map((d, idx) => (
                    <span key={idx} className="text-[10px] font-bold text-zinc-400 dark:text-zinc-500 uppercase tracking-wider py-1">
                      {d}
                    </span>
                  ))}
                </div>

                {/* Days Grid */}
                <div className="grid grid-cols-7 gap-1 text-center">
                  {calendarDays.map((item, idx) => {
                    const isSelected = value === item.dateStr;
                    return (
                      <button
                        key={idx}
                        type="button"
                        onClick={() => handleSelectDate(item.dateStr)}
                        className={cn(
                          'h-8 w-8 mx-auto flex items-center justify-center text-xs font-semibold rounded-xl transition-all cursor-pointer',
                          !item.isCurrentMonth && 'text-zinc-300 dark:text-zinc-600 opacity-60',
                          item.isCurrentMonth && !isSelected && 'text-zinc-800 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800',
                          isSelected && 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 font-bold shadow-xs scale-105'
                        )}
                      >
                        {item.day}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* ── VIEW MODE 2: MONTH SELECTION ── */}
            {viewMode === 'month' && (
              <div className="grid grid-cols-3 gap-2 pt-3 max-h-56 overflow-y-auto">
                {(isAr ? MONTHS_AR : MONTHS_EN).map((m, idx) => {
                  const isSelected = viewMonth === idx;
                  return (
                    <button
                      key={idx}
                      type="button"
                      onClick={() => {
                        setViewMonth(idx);
                        setViewMode('calendar');
                      }}
                      className={cn(
                        'py-2 px-2 text-xs font-semibold rounded-xl transition-colors cursor-pointer text-center',
                        isSelected
                          ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 font-bold'
                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                      )}
                    >
                      {m}
                    </button>
                  );
                })}
              </div>
            )}

            {/* ── VIEW MODE 3: YEAR SELECTION ── */}
            {viewMode === 'year' && (
              <div className="grid grid-cols-3 gap-2 pt-3 max-h-56 overflow-y-auto pr-1">
                {yearsList.map((y) => {
                  const isSelected = viewYear === y;
                  return (
                    <button
                      key={y}
                      type="button"
                      onClick={() => {
                        setViewYear(y);
                        setViewMode('calendar');
                      }}
                      className={cn(
                        'py-2 px-2 text-xs font-semibold rounded-xl transition-colors cursor-pointer text-center font-mono',
                        isSelected
                          ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-950 font-bold'
                          : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800'
                      )}
                    >
                      {y}
                    </button>
                  );
                })}
              </div>
            )}

            {/* Bottom Actions: Clear & Quick Today */}
            <div className="flex items-center justify-between pt-3 mt-3 border-t border-zinc-100 dark:border-zinc-800 text-[11px]">
              {value ? (
                <button
                  type="button"
                  onClick={() => {
                    onChange?.('');
                    setOpen(false);
                  }}
                  className="text-zinc-400 hover:text-rose-600 transition-colors font-semibold cursor-pointer"
                >
                  {isAr ? 'مسح التاريخ' : 'Clear'}
                </button>
              ) : <div />}

              <button
                type="button"
                onClick={() => {
                  const today = new Date();
                  const dateStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
                  handleSelectDate(dateStr);
                }}
                className="text-brand-600 dark:text-brand-400 hover:underline font-bold cursor-pointer"
              >
                {isAr ? 'اليوم' : 'Today'}
              </button>
            </div>

          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default DatePicker;