"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface Props {
  onSubmit: (data: {
    donorName: string
    donorEmail: string
    donorPhone: string
    giftAid: boolean
  }) => void
}

export function IdentityStep({ onSubmit }: Props) {
  const [name, setName] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")
  const [giftAid, setGiftAid] = useState(false)
  const [submitting, setSubmitting] = useState(false)

  const hasContact = email.includes("@") || phone.length >= 10
  const isValid = hasContact

  const handleSubmit = async () => {
    if (!isValid) return
    setSubmitting(true)
    try {
      await onSubmit({ donorName: name, donorEmail: email, donorPhone: phone, giftAid })
    } catch {
      setSubmitting(false)
    }
  }

  return (
    <div className="max-w-md mx-auto pt-4 space-y-6">
      <div className="text-center space-y-2">
        <h1 className="text-2xl font-extrabold text-gray-900">
          Almost there!
        </h1>
        <p className="text-muted-foreground">
          We need a way to send you payment details
        </p>
      </div>

      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Name <span className="text-muted-foreground font-normal">(optional)</span></Label>
          <Input
            id="name"
            placeholder="Your name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            autoComplete="name"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input
            id="email"
            type="email"
            placeholder="your@email.com"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            autoComplete="email"
            inputMode="email"
          />
        </div>

        <div className="relative flex items-center">
          <div className="flex-grow border-t border-gray-200" />
          <span className="flex-shrink mx-3 text-xs text-muted-foreground">or</span>
          <div className="flex-grow border-t border-gray-200" />
        </div>

        <div className="space-y-2">
          <Label htmlFor="phone">Phone</Label>
          <Input
            id="phone"
            type="tel"
            placeholder="07700 900000"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
            autoComplete="tel"
            inputMode="tel"
          />
        </div>

        {/* Gift Aid */}
        <label className="flex items-start gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 cursor-pointer hover:border-trust-blue/50 transition-colors">
          <input
            type="checkbox"
            checked={giftAid}
            onChange={(e) => setGiftAid(e.target.checked)}
            className="mt-1 h-5 w-5 rounded border-gray-300 text-trust-blue focus:ring-trust-blue"
          />
          <div>
            <span className="font-semibold text-gray-900">Add Gift Aid</span>
            <p className="text-sm text-muted-foreground mt-0.5">
              Boost your donation by 25% at no extra cost to you. You must be a UK taxpayer.
            </p>
          </div>
        </label>
      </div>

      <Button
        size="xl"
        className="w-full"
        disabled={!isValid || submitting}
        onClick={handleSubmit}
      >
        {submitting ? "Submitting..." : "Complete Pledge ✓"}
      </Button>

      <p className="text-center text-xs text-muted-foreground">
        We&apos;ll only use this to send payment details and confirm receipt.
      </p>
    </div>
  )
}
