import React from "react";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { Calendar, Clock } from "lucide-react";

// Custom theme for react-datepicker
const calendarStyles = `
  .react-datepicker {
    font-family: inherit;
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.3);
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px);
    display: flex !important;
    overflow: hidden;
    height: 280px !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  .react-datepicker__header {
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
  }
  .react-datepicker__month-container {
    float: none !important;
    flex: 1;
  }
  .react-datepicker__time-container {
    float: none !important;
    width: 85px !important;
    border-left: 1px solid #f1f5f9;
    height: 280px !important;
    background: #f8fafc;
  }
  .react-datepicker__time-box {
    width: 100% !important;
    height: 240px !important; /* Avoid header height */
    border-radius: 0 !important;
  }
  .react-datepicker__time-list {
    padding: 0 !important;
    overflow-y: auto !important;
    height: calc(280px - 40px) !important;
  }
  .react-datepicker__time-list-item {
    height: auto !important;
    padding: 10px 0 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s;
  }
  .react-datepicker__time-list-item:hover {
    background: #e2e8f0 !important;
    color: #4f46e5 !important;
  }
  .react-datepicker__time-list-item--selected {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
  }
  .react-datepicker__day-name, .react-datepicker__day {
    width: 2.2rem;
    line-height: 2.2rem;
    margin: 0.1rem;
    border-radius: 0.6rem;
    font-weight: 600;
    color: #1e293b !important;
    font-size: 0.8rem;
  }
  .react-datepicker__day--selected {
    background-color: #4f46e5 !important;
    color: #ffffff !important;
  }
  .react-datepicker__day--keyboard-selected {
    background-color: #f1f5f9;
    color: #4f46e5 !important;
  }
  .react-datepicker__current-month, .react-datepicker__time-header {
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f172a !important;
    font-size: 0.75rem !important;
  }
  .react-datepicker__navigation {
    top: 1rem;
  }
`;

const DateTimePicker = ({ label, selected, onChange, placeholder, minDate = new Date() }) => {
  return (
    <div className="flex-1 min-w-[200px] px-4 py-3 relative">
      <style>{calendarStyles}</style>
      <div className="flex items-center gap-2">
        <Calendar className="w-4 h-4 text-dark-700 flex-shrink-0" />
        <div className="flex-1">
          <p className="text-[11px] text-badge-text font-medium leading-none mb-1">{label}</p>
          <div className="relative group">
            <ReactDatePicker
              selected={selected}
              onChange={onChange}
              showTimeSelect
              dateFormat="MMMM d, yyyy h:mm aa"
              minDate={minDate}
              placeholderText={placeholder}
              className="text-sm font-semibold text-dark-900 placeholder:text-gray-400 bg-transparent border-none outline-none w-full cursor-pointer"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default DateTimePicker;
