import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { UserDetails } from "../types";
import { ArrowRight, ArrowLeft } from "lucide-react";
import { toast } from "sonner";

export function Details({
  initial,
  onBack,
  onNext,
}: {
  initial: UserDetails;
  onBack: () => void;
  onNext: (u: UserDetails) => void;
}) {
  const [u, setU] = useState<UserDetails>(initial);

  const submit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!u.fullName.trim() || u.fullName.length > 80) return toast.error("Enter your full name");
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(u.email)) return toast.error("Enter a valid email");
    if (!/^\+?[0-9\s-]{7,15}$/.test(u.phone)) return toast.error("Enter a valid phone number");
    if (!u.instagram.trim() || u.instagram.length > 40) return toast.error("Enter your Instagram username");
    onNext({
      ...u,
      fullName: u.fullName.trim(),
      email: u.email.trim().toLowerCase(),
      phone: u.phone.trim(),
      instagram: u.instagram.trim().replace(/^@/, ""),
    });
  };

  return (
    <form onSubmit={submit} className="space-y-5">
      <div>
        <h2 className="text-2xl md:text-3xl font-bold text-gradient">Tell us about you</h2>
        <p className="text-sm text-muted-foreground mt-1">Your details stay private and confidential.</p>
      </div>

      <Field label="Full Name">
        <Input value={u.fullName} maxLength={80} onChange={(e) => setU({ ...u, fullName: e.target.value })} placeholder="John Doe" required />
      </Field>
      <Field label="Email">
        <Input type="email" value={u.email} maxLength={120} onChange={(e) => setU({ ...u, email: e.target.value })} placeholder="you@example.com" required />
      </Field>
      <Field label="Phone Number">
        <Input type="tel" value={u.phone} maxLength={15} inputMode="numeric"
               onChange={(e) => setU({ ...u, phone: e.target.value.replace(/[^0-9+\s-]/g, "") })}
               placeholder="+91 98765 43210" required />
      </Field>
      <Field label="Instagram Username">
        <div className="relative">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">@</span>
          <Input value={u.instagram} maxLength={40} onChange={(e) => setU({ ...u, instagram: e.target.value })} placeholder="yourhandle" className="pl-7" required />
        </div>
      </Field>

      <div className="flex gap-3 pt-2">
        <Button type="button" variant="glass" size="lg" onClick={onBack}>
          <ArrowLeft className="w-4 h-4" />
        </Button>
        <Button type="submit" variant="hero" size="lg" className="flex-1">
          Continue <ArrowRight className="ml-1 w-4 h-4" />
        </Button>
      </div>
    </form>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="space-y-2">
      <Label className="text-xs uppercase tracking-wider text-muted-foreground">{label}</Label>
      {children}
    </div>
  );
}