import { InputHTMLAttributes, ReactNode, SelectHTMLAttributes } from "react";
import { normalizeClockTime } from "../datetime/clock";

export function Field({
  label,
  hint,
  error,
  children,
}: {
  label: string;
  hint?: string;
  error?: string;
  children: ReactNode;
}) {
  return (
    <label className="block space-y-1.5">
      <span className="text-sm font-medium text-foreground/85">{label}</span>
      {children}
      {hint && !error ? (
        <span className="block text-xs text-[var(--muted)]">{hint}</span>
      ) : null}
      {error ? (
        <span className="flex items-center gap-1 text-xs text-red-600">
          <svg viewBox="0 0 20 20" className="h-3.5 w-3.5 shrink-0" fill="currentColor" aria-hidden>
            <path
              fillRule="evenodd"
              d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
              clipRule="evenodd"
            />
          </svg>
          {error}
        </span>
      ) : null}
    </label>
  );
}

const baseControl =
  "w-full rounded-xl border bg-white px-3.5 py-2.5 text-sm outline-none transition focus:ring-2 ring-primary";

export function Input({
  invalid,
  className = "",
  type,
  value,
  defaultValue,
  onChange,
  lang,
  step,
  dir,
  ...props
}: InputHTMLAttributes<HTMLInputElement> & { invalid?: boolean }) {
  const isClock = type === "time" || type === "datetime-local";
  const normalizedValue =
    type === "time" && typeof value === "string"
      ? normalizeClockTime(value) || value
      : value;
  const normalizedDefault =
    type === "time" && typeof defaultValue === "string"
      ? normalizeClockTime(defaultValue) || defaultValue
      : defaultValue;

  return (
    <input
      type={type}
      className={`${baseControl} ${
        invalid
          ? "border-red-400 focus:border-red-500"
          : "border-[var(--border)] focus:border-primary"
      } ${className}`}
      aria-invalid={invalid || undefined}
      value={normalizedValue}
      defaultValue={normalizedDefault}
      onChange={onChange}
      // Force 24-hour picker; document `lang="fa"` otherwise shows AM/PM on many browsers.
      lang={isClock ? lang ?? "en-GB" : lang}
      dir={isClock ? dir ?? "ltr" : dir}
      step={type === "time" ? step ?? 60 : step}
      {...props}
    />
  );
}

export function Select({
  invalid,
  className = "",
  ...props
}: SelectHTMLAttributes<HTMLSelectElement> & { invalid?: boolean }) {
  return (
    <select
      className={`${baseControl} ${
        invalid
          ? "border-red-400 focus:border-red-500"
          : "border-[var(--border)] focus:border-primary"
      } ${className}`}
      aria-invalid={invalid || undefined}
      {...props}
    />
  );
}

export function Textarea({
  invalid,
  className = "",
  ...props
}: React.TextareaHTMLAttributes<HTMLTextAreaElement> & { invalid?: boolean }) {
  return (
    <textarea
      className={`${baseControl} ${
        invalid
          ? "border-red-400 focus:border-red-500"
          : "border-[var(--border)] focus:border-primary"
      } ${className}`}
      rows={4}
      aria-invalid={invalid || undefined}
      {...props}
    />
  );
}