'use client';

import { cn } from '@/lib/utils';
import { PH_COUNTRY_CODE, sanitizeLocalPhoneInput } from '@/lib/phone';

interface PhilippinePhoneInputProps {
  label?: string;
  labelTl?: string;
  value: string;
  onChange: (localValue: string) => void;
  error?: string;
  disabled?: boolean;
  required?: boolean;
  id?: string;
  className?: string;
}

export function PhilippinePhoneInput({
  label = 'Phone number',
  labelTl,
  value,
  onChange,
  error,
  disabled,
  required,
  id,
  className,
}: PhilippinePhoneInputProps) {
  const inputId = id || 'phone-local';

  return (
    <div className={cn('space-y-1.5', className)}>
      {label && (
        <label htmlFor={inputId} className="block text-sm font-medium text-slate-700">
          <span className="block">
            {label}
            {required && <span className="text-red-500"> *</span>}
          </span>
          {labelTl && <span className="block text-xs font-normal text-muted mt-0.5">{labelTl}</span>}
        </label>
      )}
      <div
        className={cn(
          'flex h-11 overflow-hidden rounded-lg border border-border bg-white focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary',
          error && 'border-red-500 focus-within:ring-red-500/20 focus-within:border-red-500',
          disabled && 'bg-slate-50 opacity-70'
        )}
      >
        <span className="inline-flex items-center border-r border-border bg-slate-50 px-3 text-sm font-semibold text-slate-600 shrink-0">
          {PH_COUNTRY_CODE}
        </span>
        <input
          id={inputId}
          type="tel"
          inputMode="numeric"
          autoComplete="tel-national"
          value={value}
          onChange={(e) => onChange(sanitizeLocalPhoneInput(e.target.value))}
          placeholder="9XX XXX XXXX"
          disabled={disabled}
          required={required}
          maxLength={10}
          className="min-w-0 flex-1 bg-transparent px-3 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none"
        />
      </div>
      <p className="text-xs text-muted">Enter your mobile number without the country code.</p>
      {error && <p className="text-sm text-red-500">{error}</p>}
    </div>
  );
}