"use client"

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Card } from "@/components/ui/card"
import { Mail, Phone } from "lucide-react"
import { ContactInformationSchema, type ContactInformation as ContactInformationType } from "@/lib/types/checkout"
import { useEffect } from "react"

interface ContactInformationProps {
  onChange?: (data: ContactInformationType) => void
  defaultValues?: Partial<ContactInformationType>
  orderId?: number
}

export function ContactInformation({ onChange, defaultValues, orderId }: ContactInformationProps) {
  const {
    register,
    formState: { errors },
    watch,
  } = useForm<ContactInformationType>({
    resolver: zodResolver(ContactInformationSchema),
    mode: "onChange",
    defaultValues: defaultValues || {
      email: "",
      phone: "",
    },
  })

  // Watch form changes and notify parent using subscription
  useEffect(() => {
    if (!onChange) return

    const subscription = watch((value) => {
      onChange(value as ContactInformationType)
    })
    return () => subscription.unsubscribe()
  }, [watch, onChange])

  return (
    <Card className="p-10 shadow-float border-border/50 focus-within:shadow-elevated transition-all duration-300">
      <div className="mb-8">
        <div className="flex items-center gap-3 mb-3">
          <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
            <Mail className="h-5 w-5 text-primary" />
          </div>
          <h2 className="text-2xl font-bold text-foreground tracking-tight">
            {orderId ? `Order #${orderId}` : "Identity"}
          </h2>
        </div>
        <p className="text-sm text-muted-foreground">How we'll reach you</p>
      </div>

      <div className="space-y-6">
        <div className="space-y-3">
          <Label htmlFor="email" className="text-sm font-medium text-foreground">
            Email Address
          </Label>
          <div className="relative">
            <Input
              id="email"
              type="email"
              placeholder="you@example.com"
              className="h-14 text-base pl-11 focus-glow transition-all"
              autoComplete="email"
              {...register("email")}
              aria-invalid={errors.email ? "true" : "false"}
            />
            <Mail className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          </div>
          {errors.email && <p className="text-sm text-destructive mt-1">{errors.email.message}</p>}
        </div>

        <div className="space-y-3">
          <Label htmlFor="phone" className="text-sm font-medium text-foreground">
            Phone Number <span className="text-muted-foreground font-normal">(optional)</span>
          </Label>
          <div className="relative">
            <Input
              id="phone"
              type="tel"
              placeholder="+1 (555) 000-0000"
              className="h-14 text-base pl-11 focus-glow transition-all"
              autoComplete="tel"
              {...register("phone")}
            />
            <Phone className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          </div>
          {errors.phone && <p className="text-sm text-destructive mt-1">{errors.phone.message}</p>}
        </div>
      </div>
    </Card>
  )
}
