"use client";

import { P1_COMMON_UI } from "@/lib/priority1/ui-labels";
import { p1DateFromIso, p1DateToIso } from "@/lib/priority1/date-format";
import { minPickupDateIso } from "@/lib/priority1/pickup-date";
import { P1FieldLabel } from "@/components/priority1/feathery-card";

interface P1DateFieldProps {
  label: string;
  /** MM/DD/YYYY */
  value: string;
  disabled?: boolean;
  error?: string;
  onChange: (displayValue: string) => void;
}

/** 提货日 — 原生日历 + MM/DD/YYYY 存储 */
export function P1DateField({
  label,
  value,
  disabled,
  error,
  onChange,
}: P1DateFieldProps) {
  const iso = p1DateToIso(value);
  const minIso = minPickupDateIso();

  return (
    <div className="space-y-1">
      <P1FieldLabel required htmlFor="p1-pickup-date">
        {label}
      </P1FieldLabel>
      <input
        id="p1-pickup-date"
        type="date"
        disabled={disabled}
        min={minIso}
        value={iso}
        onChange={(e) => {
          const next = p1DateFromIso(e.target.value);
          if (next) onChange(next);
        }}
        className={`h-11 w-full max-w-xs rounded-sm border bg-neutral-100 px-3 text-sm focus:border-neutral-600 focus:outline-none focus:ring-1 focus:ring-neutral-400 disabled:opacity-60 ${
          error ? "border-red-500" : "border-neutral-400"
        }`}
      />
      {value ? (
        <p className="text-xs text-neutral-500">已选：{value}</p>
      ) : (
        <p className="text-xs text-neutral-500">{P1_COMMON_UI.pickupDateHint}</p>
      )}
      {error ? <p className="text-xs text-red-600">{error}</p> : null}
    </div>
  );
}