import { View, Text, TouchableOpacity, Modal, Platform } from 'react-native';
import { useState } from 'react';
import { Calendar } from 'lucide-react-native';

interface Props {
  label?: string;
  value: number | null;
  onChange: (timestamp: number) => void;
}

export function DatePicker({ label, value, onChange }: Props) {
  const [show, setShow] = useState(false);

  // Build a simple date selector (year/month/day dropdowns)
  const selected = value ? new Date(value * 1000) : new Date();
  const today = new Date();

  const [year, setYear] = useState(selected.getFullYear());
  const [month, setMonth] = useState(selected.getMonth());
  const [day, setDay] = useState(selected.getDate());

  const years = Array.from({ length: 3 }, (_, i) => today.getFullYear() - 1 + i);
  const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);

  function handleConfirm() {
    const d = new Date(year, month, day, 12, 0, 0);
    onChange(Math.floor(d.getTime() / 1000));
    setShow(false);
  }

  const displayDate = value
    ? new Date(value * 1000).toLocaleDateString('en-PH', { year: 'numeric', month: 'short', day: 'numeric' })
    : 'Select date';

  return (
    <View className="mb-4">
      {label && <Text className="text-charcoal font-medium mb-1">{label}</Text>}
      <TouchableOpacity
        onPress={() => setShow(true)}
        className="flex-row items-center border border-gray-200 rounded-xl px-4 py-3 bg-white"
      >
        <Calendar size={16} color="#1A6B72" />
        <Text className={`ml-2 flex-1 ${value ? 'text-charcoal' : 'text-gray-400'}`}>{displayDate}</Text>
      </TouchableOpacity>

      <Modal visible={show} transparent animationType="fade">
        <TouchableOpacity className="flex-1 bg-black/50 justify-end" onPress={() => setShow(false)}>
          <View className="bg-white rounded-t-3xl p-6">
            <Text className="text-charcoal font-semibold text-lg mb-4 text-center">Select Date</Text>

            <View className="flex-row justify-center gap-4 mb-6">
              {/* Month */}
              <View className="flex-1">
                <Text className="text-gray-500 text-xs text-center mb-2">Month</Text>
                <View className="border border-gray-200 rounded-xl overflow-hidden">
                  {months.map((m, i) => (
                    <TouchableOpacity key={m} onPress={() => setMonth(i)} className={`py-2 px-3 ${month === i ? 'bg-primary' : ''}`}>
                      <Text className={`text-center text-sm ${month === i ? 'text-white font-semibold' : 'text-charcoal'}`}>{m}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>

              {/* Day */}
              <View style={{ width: 60 }}>
                <Text className="text-gray-500 text-xs text-center mb-2">Day</Text>
                <View className="border border-gray-200 rounded-xl overflow-hidden">
                  {days.filter((_, i) => i < 10 || Math.abs(i - (day - 1)) < 3).map((d) => (
                    <TouchableOpacity key={d} onPress={() => setDay(d)} className={`py-2 ${day === d ? 'bg-primary' : ''}`}>
                      <Text className={`text-center text-sm ${day === d ? 'text-white font-semibold' : 'text-charcoal'}`}>{d}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>

              {/* Year */}
              <View style={{ width: 70 }}>
                <Text className="text-gray-500 text-xs text-center mb-2">Year</Text>
                <View className="border border-gray-200 rounded-xl overflow-hidden">
                  {years.map((y) => (
                    <TouchableOpacity key={y} onPress={() => setYear(y)} className={`py-3 ${year === y ? 'bg-primary' : ''}`}>
                      <Text className={`text-center text-sm ${year === y ? 'text-white font-semibold' : 'text-charcoal'}`}>{y}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>
            </View>

            <TouchableOpacity onPress={handleConfirm} className="bg-primary rounded-xl py-4">
              <Text className="text-white text-center font-semibold text-base">Confirm</Text>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </View>
  );
}