"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { AdminLayout } from "@/components/admin-layout"
import {
  ArrowLeft,
  User,
  Mail,
  Phone,
  MapPin,
  GraduationCap,
  FileText,
  Download,
  CheckCircle,
  XCircle,
  Clock,
  MessageSquare,
  Calendar,
  Globe,
  Award,
  BookOpen,
} from "lucide-react"
import { toast } from "@/lib/toast"

interface ApplicationData {
  id: string
  studentName: string
  email: string
  phone: string
  dateOfBirth: string
  nationality: string
  program: string
  status: "pending" | "under-review" | "approved" | "rejected"
  submittedAt: string
  isInternational: boolean
  personalInfo: {
    firstName: string
    middleName?: string
    lastName: string
    gender: string
    maritalStatus?: string
    religion?: string
  }
  address: {
    street: string
    city: string
    state: string
    country: string
    postalCode: string
  }
  education: {
    previousSchool: string
    graduationYear: number
    gpa: number
    certificates: string[]
  }
  documents: {
    id: string
    name: string
    type: string
    uploadedAt: string
    url: string
  }[]
  reviewNotes?: string
  reviewedBy?: string
  reviewedAt?: string
}

export default function ApplicationReviewPage() {
  const params = useParams()
  const router = useRouter()
  const [application, setApplication] = useState<ApplicationData | null>(null)
  const [loading, setLoading] = useState(true)
  const [reviewNotes, setReviewNotes] = useState("")
  const [isUpdating, setIsUpdating] = useState(false)

  useEffect(() => {
    // Simulate fetching application data
    setTimeout(() => {
      setApplication({
        id: params.id as string,
        studentName: "John Doe",
        email: "john.doe@example.com",
        phone: "+233 24 123 4567",
        dateOfBirth: "1998-05-15",
        nationality: "Ghanaian",
        program: "Computer Science",
        status: "pending",
        submittedAt: "2024-01-15T10:30:00Z",
        isInternational: false,
        personalInfo: {
          firstName: "John",
          middleName: "Kwame",
          lastName: "Doe",
          gender: "male",
          maritalStatus: "single",
          religion: "Christian",
        },
        address: {
          street: "123 University Avenue",
          city: "Accra",
          state: "Greater Accra",
          country: "Ghana",
          postalCode: "GA-123-4567",
        },
        education: {
          previousSchool: "Accra High School",
          graduationYear: 2020,
          gpa: 3.8,
          certificates: ["WASSCE Certificate", "Mathematics Certificate"],
        },
        documents: [
          {
            id: "1",
            name: "WASSCE Certificate",
            type: "academic",
            uploadedAt: "2024-01-15T09:00:00Z",
            url: "/documents/wassce-cert.pdf",
          },
          {
            id: "2",
            name: "Birth Certificate",
            type: "identity",
            uploadedAt: "2024-01-15T09:15:00Z",
            url: "/documents/birth-cert.pdf",
          },
          {
            id: "3",
            name: "Passport Photo",
            type: "photo",
            uploadedAt: "2024-01-15T09:30:00Z",
            url: "/documents/passport-photo.jpg",
          },
        ],
      })
      setLoading(false)
    }, 1000)
  }, [params.id])

  const handleStatusUpdate = async (newStatus: ApplicationData["status"]) => {
    if (!application) return

    setIsUpdating(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

      setApplication((prev) => (prev ? { ...prev, status: newStatus } : null))
      toast.success(`Application ${newStatus.replace("-", " ")} successfully`)
    } catch (error) {
      toast.error("Failed to update application status")
    } finally {
      setIsUpdating(false)
    }
  }

  const handleSaveNotes = async () => {
    if (!application) return

    setIsUpdating(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

      setApplication((prev) =>
        prev
          ? {
              ...prev,
              reviewNotes,
              reviewedBy: "Admin User",
              reviewedAt: new Date().toISOString(),
            }
          : null,
      )
      toast.success("Review notes saved successfully")
    } catch (error) {
      toast.error("Failed to save review notes")
    } finally {
      setIsUpdating(false)
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "pending":
        return "bg-yellow-100 text-yellow-800 border-yellow-200"
      case "under-review":
        return "bg-blue-100 text-blue-800 border-blue-200"
      case "approved":
        return "bg-green-100 text-green-800 border-green-200"
      case "rejected":
        return "bg-red-100 text-red-800 border-red-200"
      default:
        return "bg-gray-100 text-gray-800 border-gray-200"
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "approved":
        return <CheckCircle className="h-4 w-4" />
      case "rejected":
        return <XCircle className="h-4 w-4" />
      case "under-review":
        return <Clock className="h-4 w-4" />
      default:
        return <Clock className="h-4 w-4" />
    }
  }

  if (loading) {
    return (
      <AdminLayout>
        <div className="flex items-center justify-center h-64">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent"></div>
        </div>
      </AdminLayout>
    )
  }

  if (!application) {
    return (
      <AdminLayout>
        <div className="text-center py-12">
          <h2 className="text-2xl font-bold text-foreground mb-2">Application Not Found</h2>
          <p className="text-muted-foreground mb-4">The requested application could not be found.</p>
          <Button onClick={() => router.back()} variant="outline">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Go Back
          </Button>
        </div>
      </AdminLayout>
    )
  }

  return (
    <AdminLayout>
      <div className="space-y-8 animate-fade-in">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button variant="outline" onClick={() => router.back()} className="bg-transparent border-border/50">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Applications
            </Button>
            <div>
              <h1 className="text-3xl font-bold text-foreground tracking-tight">Application Review</h1>
              <p className="text-muted-foreground">Review and manage student application</p>
            </div>
          </div>
          <Badge className={`${getStatusColor(application.status)} border text-sm px-3 py-1`}>
            <div className="flex items-center gap-1.5">
              {getStatusIcon(application.status)}
              <span className="capitalize">{application.status.replace("-", " ")}</span>
            </div>
          </Badge>
        </div>

        {/* Student Overview */}
        <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
          <CardHeader className="border-b border-border/50">
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-4">
                <div className="p-3 bg-accent/10 rounded-xl">
                  <User className="h-6 w-6 text-accent" />
                </div>
                <div>
                  <CardTitle className="text-2xl text-foreground">{application.studentName}</CardTitle>
                  <CardDescription className="text-base text-muted-foreground">
                    {application.program} • {application.isInternational ? "International" : "Local"} Student
                  </CardDescription>
                </div>
              </div>
              <div className="text-right text-sm text-muted-foreground">
                <p>Submitted: {new Date(application.submittedAt).toLocaleDateString()}</p>
                <p>Application ID: {application.id}</p>
              </div>
            </div>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="flex items-center gap-3">
                <Mail className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="text-sm text-muted-foreground">Email</p>
                  <p className="font-medium text-foreground">{application.email}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Phone className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="text-sm text-muted-foreground">Phone</p>
                  <p className="font-medium text-foreground">{application.phone}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Globe className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="text-sm text-muted-foreground">Nationality</p>
                  <p className="font-medium text-foreground">{application.nationality}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Application Details */}
        <Tabs defaultValue="personal" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4 lg:w-fit lg:grid-cols-4 bg-muted/50 p-1">
            <TabsTrigger
              value="personal"
              className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
            >
              <User className="h-4 w-4 mr-2" />
              Personal
            </TabsTrigger>
            <TabsTrigger
              value="education"
              className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
            >
              <GraduationCap className="h-4 w-4 mr-2" />
              Education
            </TabsTrigger>
            <TabsTrigger
              value="documents"
              className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
            >
              <FileText className="h-4 w-4 mr-2" />
              Documents
            </TabsTrigger>
            <TabsTrigger
              value="review"
              className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
            >
              <MessageSquare className="h-4 w-4 mr-2" />
              Review
            </TabsTrigger>
          </TabsList>

          <TabsContent value="personal" className="space-y-6 animate-slide-in">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <User className="h-5 w-5 text-accent" />
                    Personal Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">First Name</p>
                      <p className="font-medium text-foreground">{application.personalInfo.firstName}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Last Name</p>
                      <p className="font-medium text-foreground">{application.personalInfo.lastName}</p>
                    </div>
                  </div>
                  {application.personalInfo.middleName && (
                    <div>
                      <p className="text-sm text-muted-foreground">Middle Name</p>
                      <p className="font-medium text-foreground">{application.personalInfo.middleName}</p>
                    </div>
                  )}
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">Gender</p>
                      <p className="font-medium text-foreground capitalize">{application.personalInfo.gender}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Date of Birth</p>
                      <p className="font-medium text-foreground">
                        {new Date(application.dateOfBirth).toLocaleDateString()}
                      </p>
                    </div>
                  </div>
                  {application.personalInfo.maritalStatus && (
                    <div>
                      <p className="text-sm text-muted-foreground">Marital Status</p>
                      <p className="font-medium text-foreground capitalize">{application.personalInfo.maritalStatus}</p>
                    </div>
                  )}
                </CardContent>
              </Card>

              <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MapPin className="h-5 w-5 text-accent" />
                    Address Information
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <p className="text-sm text-muted-foreground">Street Address</p>
                    <p className="font-medium text-foreground">{application.address.street}</p>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">City</p>
                      <p className="font-medium text-foreground">{application.address.city}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">State/Region</p>
                      <p className="font-medium text-foreground">{application.address.state}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <p className="text-sm text-muted-foreground">Country</p>
                      <p className="font-medium text-foreground">{application.address.country}</p>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Postal Code</p>
                      <p className="font-medium text-foreground">{application.address.postalCode}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          <TabsContent value="education" className="space-y-6 animate-slide-in">
            <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <BookOpen className="h-5 w-5 text-accent" />
                  Educational Background
                </CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div>
                    <p className="text-sm text-muted-foreground">Previous School</p>
                    <p className="font-medium text-foreground">{application.education.previousSchool}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Graduation Year</p>
                    <p className="font-medium text-foreground">{application.education.graduationYear}</p>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">GPA</p>
                    <div className="flex items-center gap-2">
                      <p className="font-medium text-foreground">{application.education.gpa}</p>
                      <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                        <Award className="h-3 w-3 mr-1" />
                        Excellent
                      </Badge>
                    </div>
                  </div>
                </div>

                <div>
                  <p className="text-sm text-muted-foreground mb-3">Certificates & Qualifications</p>
                  <div className="flex flex-wrap gap-2">
                    {application.education.certificates.map((cert, index) => (
                      <Badge key={index} variant="secondary" className="bg-accent/10 text-accent border-accent/20">
                        {cert}
                      </Badge>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="documents" className="space-y-6 animate-slide-in">
            <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="flex items-center gap-2">
                  <FileText className="h-5 w-5 text-accent" />
                  Uploaded Documents
                </CardTitle>
                <CardDescription>Review all documents submitted by the student</CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {application.documents.map((doc) => (
                    <div
                      key={doc.id}
                      className="flex items-center justify-between p-4 border border-border/50 rounded-lg bg-muted/20"
                    >
                      <div className="flex items-center gap-3">
                        <div className="p-2 bg-accent/10 rounded-lg">
                          <FileText className="h-4 w-4 text-accent" />
                        </div>
                        <div>
                          <p className="font-medium text-foreground">{doc.name}</p>
                          <p className="text-sm text-muted-foreground">
                            {doc.type} • Uploaded {new Date(doc.uploadedAt).toLocaleDateString()}
                          </p>
                        </div>
                      </div>
                      <Button variant="outline" size="sm" className="bg-transparent border-border/50">
                        <Download className="h-4 w-4 mr-2" />
                        Download
                      </Button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="review" className="space-y-6 animate-slide-in">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <MessageSquare className="h-5 w-5 text-accent" />
                    Review Notes
                  </CardTitle>
                  <CardDescription>Add your review comments and observations</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <Textarea
                    placeholder="Enter your review notes here..."
                    value={reviewNotes}
                    onChange={(e) => setReviewNotes(e.target.value)}
                    className="min-h-32 bg-input border-border/50 focus:border-accent"
                  />
                  <Button
                    onClick={handleSaveNotes}
                    disabled={isUpdating}
                    className="w-full bg-accent hover:bg-accent/90"
                  >
                    {isUpdating ? "Saving..." : "Save Notes"}
                  </Button>

                  {application.reviewNotes && (
                    <div className="mt-6 p-4 bg-muted/30 rounded-lg border border-border/50">
                      <div className="flex items-center gap-2 mb-2">
                        <Calendar className="h-4 w-4 text-muted-foreground" />
                        <p className="text-sm text-muted-foreground">
                          Previous review by {application.reviewedBy} on{" "}
                          {application.reviewedAt && new Date(application.reviewedAt).toLocaleDateString()}
                        </p>
                      </div>
                      <p className="text-foreground">{application.reviewNotes}</p>
                    </div>
                  )}
                </CardContent>
              </Card>

              <Card className="border-border/50 bg-card/50 backdrop-blur-sm">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <CheckCircle className="h-5 w-5 text-accent" />
                    Application Decision
                  </CardTitle>
                  <CardDescription>Update the application status</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-3">
                    <Button
                      onClick={() => handleStatusUpdate("approved")}
                      disabled={isUpdating || application.status === "approved"}
                      className="bg-green-600 hover:bg-green-700 text-white"
                    >
                      <CheckCircle className="h-4 w-4 mr-2" />
                      Approve
                    </Button>
                    <Button
                      onClick={() => handleStatusUpdate("rejected")}
                      disabled={isUpdating || application.status === "rejected"}
                      variant="destructive"
                    >
                      <XCircle className="h-4 w-4 mr-2" />
                      Reject
                    </Button>
                  </div>
                  <Button
                    onClick={() => handleStatusUpdate("under-review")}
                    disabled={isUpdating || application.status === "under-review"}
                    variant="outline"
                    className="w-full bg-transparent border-border/50"
                  >
                    <Clock className="h-4 w-4 mr-2" />
                    Mark Under Review
                  </Button>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </AdminLayout>
  )
}