export function formatDateForInput(value: string | Date | null) {
  if (!value) return "";

  const date = new Date(value);

  return date.toISOString().split("T")[0];
}

interface InputProps {
  label?: string;
  name: string;
  type?: string;
  className?: string;
  value?: any;
  placeholder?: string;
  onChange?: (name: any, value: any) => void;
  required?: boolean;
  error?: string;
  disabled?: boolean;
}

export function Input({ label = "", className = "", name, value, onChange, type = "text", required = false,
  error, disabled = false, ...props }: InputProps) {
  const formattedValue = type === "date" ? formatDateForInput(value) : value ?? "";
  return (
    <div className={`flex flex-col ${className}`}>
      <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
        {label}
        {required && (
          <span className="text-red-500 ml-1">*</span>
        )}
      </label>
      <input
        {...props}
        name={name}
        type={type}
        value={formattedValue}
        disabled={disabled}
        onChange={(e) => onChange?.(name, e.target.value)}
        className={`text-xs font-medium p-2 h-6 rounded-lg border 
        ${error
            ? "border-red-500"
            : "border-[#cfded7]"
          }
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
        `}
      />
      {error && (
        <span className="text-sm text-red-500 mt-1">
          {error}
        </span>
      )}
    </div>
  );
}

interface SelectProps {
  label?: string;
  name: string;
  options: any[];
  value?: any;
  required?: boolean;
  error?: string;
  className?: string;
  onChange?: (name: any, value: any) => void;
}

export function Select({ label = "", options, name, value, onChange, required = false,
  error, className = "", ...props }: SelectProps) {
  return (
    <div className={`flex flex-col ${className}`}>
      <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
        {label}
        {required && (
          <span className="text-red-500 ml-1">*</span>
        )}
      </label>
      <select
        {...props}
        name={name}
        value={value || ""}
        onChange={(e) => onChange?.(name, e.target.value)}
        className={`text-xs font-medium p-2 h-9 rounded-lg border 
        ${error
            ? "border-red-500"
            : "border-[#cfded7]"
          }
        focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
        `}
      >
        <option value="">--</option>
        {options.map((opt: any) => (
          <option key={opt.value} value={opt.value}>{opt.label}
          </option>
        ))}
      </select>
      {error && (
        <span className="text-sm text-red-500 mt-1">
          {error}
        </span>
      )}
    </div>
  );
}

interface CheckboxProps {
  label: string;
  name: string;
  value: string | number;
  checked: boolean;
  onChange: (name: string, value: string | number) => void;
  className?: string;
}

export function Checkbox({ name, label, value, checked, onChange, className }: CheckboxProps) {
  return (
    <label className="flex items-center gap-1 cursor-pointer bg-[#f4f8f6] border border-[#cfded7] px-3 py-2 rounded-lg hover:bg-[#e8f3ef]">
      <input
        type="checkbox"
        checked={checked}
        onChange={() => onChange(name, value)}
        className={className || "accent-[#2f7d5f]"}
      />
      <span className="text-xs">{label}</span>
    </label>
  );
}

interface ConditionalCheckboxBlockProps {
  label: string;
  name: string;
  value: string | number;
  checked: boolean;
  onToggle: (name: string, value: string | number) => void;
  children?: React.ReactNode;
  className?: string;
}

export function ConditionalCheckboxBlock({
  label,
  name,
  value,
  checked,
  className = "accent-[#2f7d5f]",
  onToggle,
  children
}: ConditionalCheckboxBlockProps) {
  return (
    <div className="flex flex-wrap items-end gap-1">
      <Checkbox
        label={label}
        name={name}
        value={value}
        checked={checked}
        onChange={onToggle}
        className={className}
      />

      {checked && (
        <div className="flex flex-wrap items-end gap-1 flex-1">
          {children}
        </div>
      )}
    </div>
  );
}

interface RadioGroupProps {
  label: string;
  name: string;
  value: string;
  options: { value: string; label: string }[];
  onChange: (name: string, value: string) => void;
  required?: boolean;
}

export function RadioGroup({
  label,
  name,
  value,
  options,
  onChange,
  required
}: RadioGroupProps) {
  return (
    <div className="flex flex-col gap-0">
      <label className="text-xs font-medium text-[#2f5d4b]">
        {label}
        {required && <span className="text-red-500 ml-1">*</span>}
      </label>

      <div className="flex gap-0 flex-wrap">
        {options.map((opt) => (
          <label
            key={opt.value}
            className="flex items-center gap-2 cursor-pointer bg-[#f4f8f6] border border-[#cfded7] px-3 py-2 rounded-lg hover:bg-[#e8f3ef]"
          >
            <input
              type="radio"
              name={name}
              value={opt.value}
              checked={value === opt.value}
              onChange={() =>
                onChange(name, opt.value)
              }
              className="accent-[#2f7d5f]"
            />
            <span className="text-xs">
              {opt.label}
            </span>
          </label>
        ))}
      </div>
    </div>
  );
}

export function Textarea({ label, value, onChange }: any) {
  return (
    <div className="flex flex-col">
      <label className="mb-1 text-xs font-medium text-[#2f5d4b]">
        {label}
      </label>
      <textarea
        value={value}
        onChange={(e) => onChange("", e.target.value)}
        className="p-2.5 rounded-lg border border-[#cfded7] focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
        rows={5}
      />
    </div>
  );
}

// temp: used in RGPD module
export function TextArea({ label, name, value, onChange }: any) {
  return (
    <div className="flex flex-col">
      <label className="mb-1 text-sm font-semibold text-[#2f5d4b]">
        {label}
      </label>
      <textarea
        value={value}
        onChange={(e) => onChange(name, e.target.value)}
        className="p-2.5 rounded-lg border border-[#cfded7] focus:outline-none focus:ring-2 focus:ring-[#2f7d5f]/20"
        rows={3}
      />
    </div>
  );
}