"use client"

import { DashboardLayout } from "@/components/dashboard-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import { CheckCircle, Clock, FileText, Mail, Calendar, Download, AlertCircle } from "lucide-react"

// Mock admission status data
const admissionStatus = {
  applicationId: "FU2024-APP789123",
  submittedDate: "2024-01-15",
  currentStatus: "under-review",
  statusHistory: [
    {
      status: "submitted",
      date: "2024-01-15",
      description: "Application submitted successfully",
      completed: true,
    },
    {
      status: "documents-verified",
      date: "2024-01-18",
      description: "All documents verified and accepted",
      completed: true,
    },
    {
      status: "under-review",
      date: "2024-01-20",
      description: "Application under academic review",
      completed: true,
    },
    {
      status: "interview-scheduled",
      date: null,
      description: "Interview/screening (if required)",
      completed: false,
    },
    {
      status: "admission-decision",
      date: null,
      description: "Final admission decision",
      completed: false,
    },
  ],
  estimatedDecisionDate: "2024-02-15",
  nextSteps: [
    "Your application is currently being reviewed by the admissions committee",
    "You will be notified via email if an interview is required",
    "Final admission decision will be communicated by February 15, 2024",
  ],
  documents: [
    { name: "Application Form", status: "verified", downloadable: true },
    { name: "Academic Transcripts", status: "verified", downloadable: false },
    { name: "Recommendation Letters", status: "verified", downloadable: false },
  ],
}

export default function AdmissionStatusPage() {
  const getStatusIcon = (status: string, completed: boolean) => {
    if (completed) {
      return <CheckCircle className="h-5 w-5 text-green-600" />
    }
    if (status === admissionStatus.currentStatus) {
      return <Clock className="h-5 w-5 text-blue-600" />
    }
    return <div className="h-5 w-5 rounded-full border-2 border-muted-foreground/30" />
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "submitted":
      case "documents-verified":
      case "under-review":
        return "bg-blue-100 text-blue-800"
      case "interview-scheduled":
        return "bg-orange-100 text-orange-800"
      case "admission-decision":
        return "bg-green-100 text-green-800"
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

  const completedSteps = admissionStatus.statusHistory.filter((step) => step.completed).length
  const totalSteps = admissionStatus.statusHistory.length
  const progressPercentage = (completedSteps / totalSteps) * 100

  return (
    <DashboardLayout>
      <div className="max-w-4xl mx-auto space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-primary">Admission Status</h1>
          <p className="text-muted-foreground">Track the progress of your application and admission decision.</p>
        </div>

        {/* Application Overview */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Application Overview
            </CardTitle>
            <CardDescription>Your application details and current status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-3">
                <div>
                  <span className="text-sm text-muted-foreground">Application ID:</span>
                  <p className="font-mono font-medium">{admissionStatus.applicationId}</p>
                </div>
                <div>
                  <span className="text-sm text-muted-foreground">Submitted Date:</span>
                  <p className="font-medium">
                    {new Date(admissionStatus.submittedDate).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    })}
                  </p>
                </div>
                <div>
                  <span className="text-sm text-muted-foreground">Current Status:</span>
                  <div className="mt-1">
                    <Badge className={getStatusColor(admissionStatus.currentStatus)}>
                      {admissionStatus.currentStatus.replace("-", " ").toUpperCase()}
                    </Badge>
                  </div>
                </div>
              </div>
              <div className="space-y-3">
                <div>
                  <span className="text-sm text-muted-foreground">Progress:</span>
                  <div className="mt-2">
                    <Progress value={progressPercentage} className="h-2" />
                    <p className="text-sm text-muted-foreground mt-1">
                      {completedSteps} of {totalSteps} steps completed
                    </p>
                  </div>
                </div>
                <div>
                  <span className="text-sm text-muted-foreground">Estimated Decision Date:</span>
                  <p className="font-medium flex items-center gap-2">
                    <Calendar className="h-4 w-4" />
                    {new Date(admissionStatus.estimatedDecisionDate).toLocaleDateString("en-US", {
                      year: "numeric",
                      month: "long",
                      day: "numeric",
                    })}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Status Timeline */}
        <Card>
          <CardHeader>
            <CardTitle>Application Timeline</CardTitle>
            <CardDescription>Track your application through each stage of the admission process</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-6">
              {admissionStatus.statusHistory.map((step, index) => (
                <div key={step.status} className="flex gap-4">
                  <div className="flex flex-col items-center">
                    {getStatusIcon(step.status, step.completed)}
                    {index < admissionStatus.statusHistory.length - 1 && (
                      <div className="w-px h-12 bg-muted-foreground/20 mt-2" />
                    )}
                  </div>
                  <div className="flex-1 pb-8">
                    <div className="flex items-center justify-between">
                      <h3 className="font-medium">
                        {step.status.replace("-", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
                      </h3>
                      {step.date && (
                        <span className="text-sm text-muted-foreground">
                          {new Date(step.date).toLocaleDateString()}
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-muted-foreground mt-1">{step.description}</p>
                    {step.status === admissionStatus.currentStatus && (
                      <Badge variant="outline" className="mt-2">
                        Current Stage
                      </Badge>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Next Steps */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <AlertCircle className="h-5 w-5" />
              What's Next?
            </CardTitle>
            <CardDescription>Important information about the next steps in your application process</CardDescription>
          </CardHeader>
          <CardContent>
            <ul className="space-y-2">
              {admissionStatus.nextSteps.map((step, index) => (
                <li key={index} className="flex items-start gap-2">
                  <div className="w-2 h-2 rounded-full bg-accent mt-2 flex-shrink-0" />
                  <span className="text-sm">{step}</span>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>

        {/* Document Status */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FileText className="h-5 w-5" />
              Document Status
            </CardTitle>
            <CardDescription>Status of your submitted documents</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {admissionStatus.documents.map((doc, index) => (
                <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                  <div className="flex items-center gap-3">
                    <FileText className="h-4 w-4 text-muted-foreground" />
                    <div>
                      <p className="font-medium text-sm">{doc.name}</p>
                      <Badge variant="default" className="text-xs">
                        <CheckCircle className="h-3 w-3 mr-1" />
                        {doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}
                      </Badge>
                    </div>
                  </div>
                  {doc.downloadable && (
                    <Button variant="outline" size="sm">
                      <Download className="h-4 w-4 mr-2" />
                      Download
                    </Button>
                  )}
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Contact Information */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Mail className="h-5 w-5" />
              Need Help?
            </CardTitle>
            <CardDescription>Contact our admissions office for any questions about your application</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <h4 className="font-medium mb-2">Admissions Office</h4>
                <div className="space-y-1 text-sm text-muted-foreground">
                  <p>Email: admissions@fanaka.edu</p>
                  <p>Phone: +234 (0) 1 234 5678</p>
                  <p>Office Hours: Mon-Fri, 8:00 AM - 5:00 PM</p>
                </div>
              </div>
              <div>
                <h4 className="font-medium mb-2">Student Support</h4>
                <div className="space-y-1 text-sm text-muted-foreground">
                  <p>Email: support@fanaka.edu</p>
                  <p>Phone: +234 (0) 1 234 5679</p>
                  <p>Available: 24/7 Online Support</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
}