/**
 * Personal Step Component
 * Personal information fields for signup using Zod validation
 */

"use client";

import { Input } from "@/components/atoms";
import { FormField } from "@/components/molecules/FormField/FormField";
import type { FormErrors, FormTouched, UseZodFormReturn } from "@customer-portal/validation";
import type { SignupFormValues } from "./SignupForm";

interface PersonalStepProps {
  values: SignupFormValues;
  errors: FormErrors<SignupFormValues>;
  touched: FormTouched<SignupFormValues>;
  setValue: UseZodFormReturn<SignupFormValues>["setValue"];
  setTouchedField: UseZodFormReturn<SignupFormValues>["setTouchedField"];
}

export function PersonalStep({
  values,
  errors,
  touched,
  setValue,
  setTouchedField,
}: PersonalStepProps) {
  const getError = (field: keyof SignupFormValues) => {
    return touched[field as string] ? errors[field as string] : undefined;
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
        <FormField label="First Name" error={getError("firstName")} required>
          <Input
            type="text"
            value={values.firstName}
            onChange={e => setValue("firstName", e.target.value)}
            onBlur={() => setTouchedField("firstName")}
            placeholder="Enter your first name"
            className="w-full"
          />
        </FormField>

        <FormField label="Last Name" error={getError("lastName")} required>
          <Input
            type="text"
            value={values.lastName}
            onChange={e => setValue("lastName", e.target.value)}
            onBlur={() => setTouchedField("lastName")}
            placeholder="Enter your last name"
            className="w-full"
          />
        </FormField>
      </div>

      <FormField label="Email Address" error={getError("email")} required>
        <Input
          type="email"
          value={values.email}
          onChange={e => setValue("email", e.target.value)}
          onBlur={() => setTouchedField("email")}
          placeholder="Enter your email address"
          className="w-full"
        />
      </FormField>

      <FormField label="Phone Number" error={getError("phone")} required>
        <Input
          type="tel"
          value={values.phone || ""}
          onChange={e => setValue("phone", e.target.value)}
          onBlur={() => setTouchedField("phone")}
          placeholder="+81 XX-XXXX-XXXX"
          className="w-full"
        />
      </FormField>

      <FormField
        label="Customer Number"
        error={getError("sfNumber")}
        required
        helperText="Your existing customer number (minimum 6 characters)"
      >
        <Input
          type="text"
          value={values.sfNumber}
          onChange={e => setValue("sfNumber", e.target.value)}
          onBlur={() => setTouchedField("sfNumber")}
          placeholder="Enter your customer number"
          className="w-full"
        />
      </FormField>

      <FormField label="Company (Optional)" error={getError("company")}>
        <Input
          type="text"
          value={values.company || ""}
          onChange={e => setValue("company", e.target.value)}
          onBlur={() => setTouchedField("company")}
          placeholder="Enter your company name"
          className="w-full"
        />
      </FormField>
    </div>
  );
}
