'use client'

import { motion } from 'framer-motion'
import { ArrowLeft, FileText, Download, FileCheck, User, Briefcase } from 'lucide-react'
import Link from 'next/link'

interface Form {
  id: string
  title: string
  description: string
  category: string
  downloadUrl: string
  fileSize: string
  fileType: string
}

const forms: Form[] = [
  {
    id: '1',
    title: 'Application Form - General Positions',
    description: 'Standard application form for all general municipal positions',
    category: 'Application Forms',
    downloadUrl: '/forms/application-form-general.pdf',
    fileSize: '245 KB',
    fileType: 'PDF'
  },
  {
    id: '2',
    title: 'Application Form - Senior Management',
    description: 'Application form specifically for senior management positions',
    category: 'Application Forms',
    downloadUrl: '/forms/application-form-senior.pdf',
    fileSize: '312 KB',
    fileType: 'PDF'
  },
  {
    id: '3',
    title: 'Medical Certificate Form',
    description: 'Medical certificate form required for certain positions',
    category: 'Supporting Documents',
    downloadUrl: '/forms/medical-certificate.pdf',
    fileSize: '128 KB',
    fileType: 'PDF'
  },
  {
    id: '4',
    title: 'Reference Check Form',
    description: 'Form for providing professional references',
    category: 'Supporting Documents',
    downloadUrl: '/forms/reference-check.pdf',
    fileSize: '156 KB',
    fileType: 'PDF'
  },
  {
    id: '5',
    title: 'Disclosure Form',
    description: 'Financial and conflict of interest disclosure form',
    category: 'Supporting Documents',
    downloadUrl: '/forms/disclosure-form.pdf',
    fileSize: '189 KB',
    fileType: 'PDF'
  },
  {
    id: '6',
    title: 'Employment Equity Form',
    description: 'Employment equity and diversity information form',
    category: 'Supporting Documents',
    downloadUrl: '/forms/employment-equity.pdf',
    fileSize: '201 KB',
    fileType: 'PDF'
  },
]

const categories = Array.from(new Set(forms.map(f => f.category)))

export default function VacancyFormsPage() {
  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[1000px] mx-auto">
        <div className="glass-page rounded-2xl p-8 md:p-12 shadow-2xl">
          {/* Header */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="mb-8"
          >
            <Link
              href="/vacancies"
              className="inline-flex items-center gap-2 text-white/70 hover:text-white mb-6 transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              Back to Vacancies
            </Link>
            <div className="flex items-center justify-center gap-3 mb-4">
              <FileText className="w-8 h-8 text-primary-light" />
              <h1 className="text-4xl md:text-5xl font-bold text-white">Vacancy Forms</h1>
            </div>
            <p className="text-white/70 text-lg text-center mb-6">
              Download application forms and supporting documents for job applications
            </p>
            <div className="w-24 h-1 bg-primary mx-auto"></div>
          </motion.div>

          {/* Forms by Category */}
          {categories.map((category, categoryIndex) => {
            const categoryForms = forms.filter(f => f.category === category)
            
            return (
              <motion.div
                key={category}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: categoryIndex * 0.1 }}
                className="mb-8"
              >
                <h2 className="text-2xl font-bold text-white mb-4 flex items-center gap-2">
                  {category === 'Application Forms' ? (
                    <Briefcase className="w-6 h-6 text-primary-light" />
                  ) : (
                    <FileCheck className="w-6 h-6 text-primary-light" />
                  )}
                  {category}
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {categoryForms.map((form, formIndex) => (
                    <motion.div
                      key={form.id}
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.5, delay: (categoryIndex * 0.1) + (formIndex * 0.05) }}
                      whileHover={{ y: -4, scale: 1.02 }}
                      className="glass rounded-xl p-6 shadow-xl glass-hover border-2 border-white/10 hover:border-primary/30 transition-all duration-300"
                    >
                      <div className="flex items-start gap-4">
                        <div className="flex-shrink-0">
                          <div className="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center">
                            <FileText className="w-6 h-6 text-primary-light" />
                          </div>
                        </div>
                        <div className="flex-1">
                          <h3 className="text-lg font-bold text-white mb-2">
                            {form.title}
                          </h3>
                          <p className="text-white/70 text-sm mb-4">
                            {form.description}
                          </p>
                          <div className="flex items-center justify-between">
                            <div className="text-white/50 text-xs">
                              {form.fileSize} • {form.fileType}
                            </div>
                            <a
                              href={form.downloadUrl}
                              download
                              className="flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-all hover:scale-105"
                            >
                              <Download className="w-4 h-4" />
                              Download
                            </a>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>
              </motion.div>
            )
          })}

          {/* Information Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="glass rounded-xl p-6 mt-8"
          >
            <h2 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <User className="w-5 h-5 text-primary-light" />
              Application Instructions
            </h2>
            <div className="space-y-3 text-white/80 text-sm">
              <p>
                • Please download and complete all required forms for the position you are applying for
              </p>
              <p>
                • Ensure all forms are filled out completely and accurately
              </p>
              <p>
                • Submit your application along with all supporting documents before the closing date
              </p>
              <p>
                • For questions or assistance, please contact the Human Resources department
              </p>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  )
}