"use client"

import { useState } from "react"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { FormInput, FormSelect } from "@/components/form-field"
import { SelectItem } from "@/components/ui/select"
import { Save, ArrowRight, ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"

export default function GuardianPage() {
  const router = useRouter()
  const [formData, setFormData] = useState({
    guardianName: "",
    relationship: "",
    occupation: "",
    phoneNumber: "",
    email: "",
    address: "",
    city: "",
    state: "",
    country: "",
    emergencyName: "",
    emergencyRelationship: "",
    emergencyPhone: "",
    emergencyAddress: "",
  })

  const [errors, setErrors] = useState<Record<string, string>>({})
  const [isSaving, setIsSaving] = useState(false)

  const handleInputChange = (field: string, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: "" }))
    }
  }

  const validateForm = () => {
    const newErrors: Record<string, string> = {}

    if (!formData.guardianName.trim()) newErrors.guardianName = "Guardian name is required"
    if (!formData.relationship) newErrors.relationship = "Relationship is required"
    if (!formData.phoneNumber.trim()) newErrors.phoneNumber = "Phone number is required"
    if (!formData.address.trim()) newErrors.address = "Address is required"
    if (!formData.emergencyName.trim()) newErrors.emergencyName = "Emergency contact name is required"
    if (!formData.emergencyPhone.trim()) newErrors.emergencyPhone = "Emergency contact phone is required"

    if (formData.email && !/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid"
    }

    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  const handleSaveDraft = async () => {
    setIsSaving(true)
    setTimeout(() => {
      setIsSaving(false)
      alert("Draft saved successfully!")
    }, 1000)
  }

  const handleNext = () => {
    if (validateForm()) {
      handleSaveDraft()
      router.push("/dashboard/applications/scholarship")
    }
  }

  const handlePrevious = () => {
    router.push("/dashboard/applications/program")
  }

  return (
    <DashboardLayout>
      <div className="max-w-4xl mx-auto space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-primary">Guardian Information</h1>
          <p className="text-muted-foreground">
            Please provide details of your parent/guardian and emergency contact person.
          </p>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>Parent/Guardian Details</CardTitle>
            <CardDescription>
              Information about your parent or guardian. Fields marked with * are required.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-2 gap-4">
              <FormInput
                label="Full Name"
                required
                value={formData.guardianName}
                onChange={(e) => handleInputChange("guardianName", e.target.value)}
                error={errors.guardianName}
                placeholder="Enter guardian's full name"
              />
              <FormSelect
                label="Relationship"
                required
                value={formData.relationship}
                onValueChange={(value) => handleInputChange("relationship", value)}
                error={errors.relationship}
                placeholder="Select relationship"
              >
                <SelectItem value="father">Father</SelectItem>
                <SelectItem value="mother">Mother</SelectItem>
                <SelectItem value="guardian">Guardian</SelectItem>
                <SelectItem value="uncle">Uncle</SelectItem>
                <SelectItem value="aunt">Aunt</SelectItem>
                <SelectItem value="grandparent">Grandparent</SelectItem>
                <SelectItem value="sibling">Sibling</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </FormSelect>
            </div>

            <FormInput
              label="Occupation"
              value={formData.occupation}
              onChange={(e) => handleInputChange("occupation", e.target.value)}
              placeholder="Enter guardian's occupation"
            />

            <div className="grid md:grid-cols-2 gap-4">
              <FormInput
                label="Phone Number"
                required
                type="tel"
                value={formData.phoneNumber}
                onChange={(e) => handleInputChange("phoneNumber", e.target.value)}
                error={errors.phoneNumber}
                placeholder="Enter phone number"
              />
              <FormInput
                label="Email Address"
                type="email"
                value={formData.email}
                onChange={(e) => handleInputChange("email", e.target.value)}
                error={errors.email}
                placeholder="Enter email address"
              />
            </div>

            <FormInput
              label="Address"
              required
              value={formData.address}
              onChange={(e) => handleInputChange("address", e.target.value)}
              error={errors.address}
              placeholder="Enter guardian's address"
            />

            <div className="grid md:grid-cols-3 gap-4">
              <FormInput
                label="City"
                value={formData.city}
                onChange={(e) => handleInputChange("city", e.target.value)}
                placeholder="Enter city"
              />
              <FormInput
                label="State"
                value={formData.state}
                onChange={(e) => handleInputChange("state", e.target.value)}
                placeholder="Enter state"
              />
              <FormInput
                label="Country"
                value={formData.country}
                onChange={(e) => handleInputChange("country", e.target.value)}
                placeholder="Enter country"
              />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Emergency Contact</CardTitle>
            <CardDescription>
              Provide details of someone we can contact in case of emergency (can be the same as guardian).
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid md:grid-cols-2 gap-4">
              <FormInput
                label="Full Name"
                required
                value={formData.emergencyName}
                onChange={(e) => handleInputChange("emergencyName", e.target.value)}
                error={errors.emergencyName}
                placeholder="Enter emergency contact name"
              />
              <FormSelect
                label="Relationship"
                value={formData.emergencyRelationship}
                onValueChange={(value) => handleInputChange("emergencyRelationship", value)}
                placeholder="Select relationship"
              >
                <SelectItem value="father">Father</SelectItem>
                <SelectItem value="mother">Mother</SelectItem>
                <SelectItem value="guardian">Guardian</SelectItem>
                <SelectItem value="uncle">Uncle</SelectItem>
                <SelectItem value="aunt">Aunt</SelectItem>
                <SelectItem value="grandparent">Grandparent</SelectItem>
                <SelectItem value="sibling">Sibling</SelectItem>
                <SelectItem value="friend">Friend</SelectItem>
                <SelectItem value="other">Other</SelectItem>
              </FormSelect>
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              <FormInput
                label="Phone Number"
                required
                type="tel"
                value={formData.emergencyPhone}
                onChange={(e) => handleInputChange("emergencyPhone", e.target.value)}
                error={errors.emergencyPhone}
                placeholder="Enter emergency contact phone"
              />
              <FormInput
                label="Address"
                value={formData.emergencyAddress}
                onChange={(e) => handleInputChange("emergencyAddress", e.target.value)}
                placeholder="Enter emergency contact address"
              />
            </div>
          </CardContent>
        </Card>

        {/* Action Buttons */}
        <div className="flex justify-between">
          <div className="flex gap-2">
            <Button variant="outline" onClick={handlePrevious}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              Previous
            </Button>
            <Button variant="outline" onClick={handleSaveDraft} disabled={isSaving}>
              <Save className="mr-2 h-4 w-4" />
              {isSaving ? "Saving..." : "Save Draft"}
            </Button>
          </div>
          <Button onClick={handleNext} className="bg-accent hover:bg-accent/90">
            Next: Scholarship Information
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>
      </div>
    </DashboardLayout>
  )
}