sase.tr/apps/web/src/components/vehicles/vin-input.tsx

import { Button } from "@sase/ui";
import { Input } from "@sase/ui";
import { Search } from "lucide-react";
import { useState } from "react";

const VIN_REGEX = /^[A-HJ-NPR-Z0-9]{17}$/;
function isValidVin(vin: string): boolean {
  if (!vin || vin.length !== 17) return false;
  return VIN_REGEX.test(vin.toUpperCase());
}

interface VinInputProps {
  onSubmit: (vin: string) => void;
  loading?: boolean;
  error?: string | null;
}

export function VinInput({ onSubmit, loading, error }: VinInputProps) {
  const [vin, setVin] = useState("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    const cleanVin = vin.toUpperCase().trim();
    if (!isValidVin(cleanVin)) return;
    onSubmit(cleanVin);
  }

  const vinUpper = vin.toUpperCase().trim();
  const isInvalid = vinUpper.length === 17 && !isValidVin(vinUpper);

  return (
    <div>
      <form onSubmit={handleSubmit} className="flex gap-3">
        <Input
          placeholder="VIN numarasini girin (17 karakter)"
          value={vin}
          onChange={(e) => setVin(e.target.value.toUpperCase())}
          maxLength={17}
          className="font-mono text-lg tracking-wider"
        />
        <Button type="submit" disabled={loading || vin.length !== 17 || isInvalid}>
          {loading ? <span className="animate-spin">...</span> : <Search className="h-4 w-4" />}
          Ara
        </Button>
      </form>
      {isInvalid && (
        <p className="mt-2 text-sm text-destructive">
          Gecersiz VIN. 17 karakter olmali, I, O, Q harfleri kullanilamaz.
        </p>
      )}
      {error && <p className="mt-2 text-sm text-destructive">{error}</p>}
    </div>
  );
}