'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Phone, MapPin, Clock, Send, Mail, User } from 'lucide-react'

interface ContactSection {
  title: string
  contacts: Array<{
    label: string
    value: string
    type: 'phone' | 'email' | 'address' | 'person'
  }>
}

const contactSections: ContactSection[] = [
  {
    title: 'MANAGER TRAFFIC AND SECURITY SERVICES',
    contacts: [
      { label: 'Office Phone', value: '012 318 9542', type: 'phone' },
      { label: 'Physical Address', value: 'White Town Hall, Ludorf Street, Brits', type: 'address' },
    ],
  },
  {
    title: 'TRAFFIC FINE QUERIES',
    contacts: [
      { label: 'Contact Person', value: 'Mr. PM Moruti', type: 'person' },
      { label: 'Office Phone', value: '012 318 9293', type: 'phone' },
      { label: 'Email', value: 'patricmoruti@madibeng.gov.za', type: 'email' },
      { label: 'Physical Address', value: 'White Town Hall, Ludorf Street, Brits', type: 'address' },
    ],
  },
  {
    title: 'MOTOR VEHICLE AND REGISTRATION AUTHORITY AND DRIVERS LICENSING',
    contacts: [
      { label: 'Contact Person', value: 'Mr. GL Masike', type: 'person' },
      { label: 'Office Phone', value: '012 250 2580', type: 'phone' },
      { label: 'Email', value: 'gopolangmasike@madibeng.gov.za', type: 'email' },
      { label: 'Physical Address', value: 'Off Kaptein Barnard Street and Crocodile Road, Brits Industrial area', type: 'address' },
    ],
  },
  {
    title: 'QUERIES FOR LEARNER AND DRIVERS LICENSES APPOINTMENTS FOR TEST DATES, RENEWAL OF LICENSES AND PRDP APPLICATION',
    contacts: [
      { label: 'Contact Person', value: 'Mr. ML Lelaka', type: 'person' },
      { label: 'Office Phone', value: '012 250 2580', type: 'phone' },
      { label: 'Email', value: 'gopolangmasike@madibeng.gov.za', type: 'email' },
      { label: 'Physical Address', value: 'Off Kaptein Barnard Street and Crocodile Road, Brits Industrial area', type: 'address' },
    ],
  },
  {
    title: 'QUERIES FOR MOTOR VEHICLE REGISTRATION, SCRAPPING OF VEHICLES AND RENEWAL OF VEHICLE LICENSES',
    contacts: [
      { label: 'Contact Person', value: 'Me. EN Ngoma', type: 'person' },
      { label: 'Office Phone', value: '012 250 2580', type: 'phone' },
      { label: 'Email', value: 'gopolangmasike@madibeng.gov.za', type: 'email' },
      { label: 'Physical Address', value: 'Off Kaptein Barnard Street and Crocodile Road, Brits Industrial area', type: 'address' },
    ],
  },
  {
    title: 'QUERIES FOR MOTOR VEHICLE REGISTRATION, SCRAPPING OF VEHICLES AND RENEWAL OF LICENSES AT HARTEBEESPOORT SATELITE',
    contacts: [
      { label: 'Contact Person', value: 'Me. Y Moswana', type: 'person' },
      { label: 'Office Phone', value: '012 253 0049', type: 'phone' },
      { label: 'Email', value: 'gopolangmasike@madibeng.gov.za', type: 'email' },
      { label: 'Physical Address', value: 'In Marais Street, opposite Laerskool Generaal Hendrik Schoeman', type: 'address' },
    ],
  },
]

export default function TrafficPage() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  })
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
    // TODO: Implement form submission
    setTimeout(() => {
      setIsSubmitting(false)
      alert('Thank you for your message. We will get back to you soon.')
      setFormData({ name: '', email: '', subject: '', message: '' })
    }, 1000)
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

  const getIcon = (type: string) => {
    switch (type) {
      case 'phone':
        return <Phone className="w-5 h-5 text-red-500 flex-shrink-0 mt-1" />
      case 'email':
        return <Mail className="w-5 h-5 text-red-500 flex-shrink-0 mt-1" />
      case 'address':
        return <MapPin className="w-5 h-5 text-red-500 flex-shrink-0 mt-1" />
      case 'person':
        return <User className="w-5 h-5 text-red-500 flex-shrink-0 mt-1" />
      default:
        return null
    }
  }

  return (
    <div className="min-h-screen py-12 px-4">
      <div className="max-w-[1200px] 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-12"
          >
            <div className="text-primary text-lg font-semibold mb-4">
              <div className="flex items-center gap-2">
                <Clock className="w-5 h-5" />
                MONDAY - FRIDAY: 07H00 - 16H00
              </div>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-2">
              Directorate: Public Safety, Fleet and Facility Management
            </h1>
            <div className="w-24 h-1 bg-primary mt-4"></div>
          </motion.div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {/* Left Column - Contact Information */}
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <h2 className="text-2xl font-bold text-white mb-6">Who to contact</h2>
              <div className="space-y-6">
                {contactSections.map((section, sectionIndex) => (
                  <motion.div
                    key={sectionIndex}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.3 + sectionIndex * 0.1 }}
                    className="glass rounded-lg p-6 space-y-3 hover:bg-white/10 transition-colors"
                  >
                    <h3 className="text-white font-bold text-sm md:text-base mb-4 leading-tight">
                      {section.title}
                    </h3>
                    {section.contacts.map((contact, contactIndex) => (
                      <div key={contactIndex} className="flex items-start gap-3">
                        {getIcon(contact.type)}
                        <div className="flex-1">
                          <div className="text-white/60 text-xs mb-1">{contact.label}</div>
                          {contact.type === 'phone' ? (
                            <a
                              href={`tel:${contact.value.replace(/\s/g, '')}`}
                              className="text-white hover:text-primary-light transition-colors text-sm"
                            >
                              {contact.value}
                            </a>
                          ) : contact.type === 'email' ? (
                            <a
                              href={`mailto:${contact.value}`}
                              className="text-white hover:text-primary-light transition-colors text-sm break-all"
                            >
                              {contact.value}
                            </a>
                          ) : (
                            <div className="text-white text-sm">{contact.value}</div>
                          )}
                        </div>
                      </div>
                    ))}
                  </motion.div>
                ))}
              </div>
            </motion.div>

            {/* Right Column - Contact Form */}
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <h2 className="text-2xl font-bold text-white mb-6">Send us a Message</h2>
              <form onSubmit={handleSubmit} className="space-y-4">
                <div>
                  <input
                    type="text"
                    name="name"
                    placeholder="Name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
                  />
                </div>
                <div>
                  <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
                  />
                </div>
                <div>
                  <input
                    type="text"
                    name="subject"
                    placeholder="Subject"
                    value={formData.subject}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
                  />
                </div>
                <div>
                  <textarea
                    name="message"
                    placeholder="Message"
                    value={formData.message}
                    onChange={handleChange}
                    required
                    rows={6}
                    className="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all resize-y"
                  />
                </div>
                <motion.button
                  type="submit"
                  disabled={isSubmitting}
                  whileHover={{ scale: 1.05 }}
                  whileTap={{ scale: 0.95 }}
                  className="w-full bg-primary hover:bg-primary-dark text-white font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isSubmitting ? (
                    'Sending...'
                  ) : (
                    <>
                      <Send className="w-5 h-5" />
                      Send
                    </>
                  )}
                </motion.button>
              </form>
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}