'use client'

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

interface ContactItem {
  label: string
  phone: string
  icon: 'phone' | 'map'
}

const contactItems: ContactItem[] = [
  { label: 'Customer Care', phone: '012 318 9503/9283', icon: 'phone' },
  { label: 'General Enquiries', phone: '012 318 9635/6/9/9218', icon: 'phone' },
  { label: 'Meter Reading', phone: '012 318 9320/9426/9424/9138', icon: 'phone' },
  { label: 'Rates & Services', phone: '012 318 9519/9440/5/9247/9434/9436', icon: 'phone' },
  { label: 'Property Valuations', phone: '012 318 9441/9432/9567', icon: 'phone' },
  { label: 'Free Basic Services', phone: '012 318 9291/9258/9446/9641/9698', icon: 'phone' },
  { label: 'Disconnections due to non-payments', phone: '012 318 9291/9258/9446/9641/9698/9169/9452', icon: 'phone' },
  { label: 'Indigent Services', phone: '012 318 9596', icon: 'phone' },
  { label: 'Electronic & Other payments', phone: '012 318 9112/9438/9236', icon: 'phone' },
  { label: 'Credit Control', phone: '012 318 9291/9258/9446/9641/9169', icon: 'phone' },
]

export default function AccountsPage() {
  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,
    })
  }

  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: 07h30 - 16h00
              </div>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-2">
              Division: Revenue Management Services
            </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-4">
                {contactItems.map((item, index) => (
                  <motion.div
                    key={index}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.3 + index * 0.05 }}
                    className="flex items-start gap-3 glass rounded-lg p-4 hover:bg-white/10 transition-colors"
                  >
                    <div className="flex-shrink-0 mt-1">
                      {item.icon === 'phone' ? (
                        <Phone className="w-5 h-5 text-red-500" />
                      ) : (
                        <MapPin className="w-5 h-5 text-red-500" />
                      )}
                    </div>
                    <div className="flex-1">
                      <div className="text-white font-semibold mb-1">{item.label}</div>
                      <a
                        href={`tel:${item.phone.replace(/\s/g, '')}`}
                        className="text-white/80 hover:text-primary-light transition-colors text-sm"
                      >
                        {item.phone}
                      </a>
                    </div>
                  </motion.div>
                ))}
                
                {/* Physical Address */}
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.4, delay: 0.3 + contactItems.length * 0.05 }}
                  className="flex items-start gap-3 glass rounded-lg p-4 hover:bg-white/10 transition-colors"
                >
                  <div className="flex-shrink-0 mt-1">
                    <MapPin className="w-5 h-5 text-red-500" />
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-semibold mb-1">Physical Address</div>
                    <div className="text-white/80 text-sm">53 Van Velden Street Brits</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>
  )
}