'use client';

import React, { useState } from 'react';
import { Mail, Phone, MapPin, Send, HelpCircle, ShieldCheck } from 'lucide-react';
import api from '@/lib/api';
import { showToast } from '@/components/common/Toast';

export default function ContactPage() {
  const [form, setForm] = useState({
    name: '',
    email: '',
    subject: '',
    message: '',
  });
  const [loading, setLoading] = useState(false);
  const [ticketNumber, setTicketNumber] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await api.post('/contact/submit', form);
      const ticketNum = res.data?.data?.ticketNumber;
      setTicketNumber(ticketNum);
      showToast('Support ticket raised successfully!', 'success');
      setForm({ name: '', email: '', subject: '', message: '' });
    } catch (err: any) {
      showToast('Failed to raise support ticket. Please retry.', 'error');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950 py-16 px-4 sm:px-8">
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12">
        {/* Contact Info Panel */}
        <div className="lg:col-span-5 space-y-8 self-center">
          <div>
            <span className="text-[10px] font-bold tracking-widest text-[#701a08] uppercase block">Connect With Us</span>
            <h1 className="text-3xl sm:text-4xl font-extrabold text-zinc-900 dark:text-zinc-100 mt-2">
              Get in Touch with our Vedic Scholars
            </h1>
            <p className="text-xs text-zinc-500 mt-4 leading-relaxed font-semibold">
              Have questions about translations, shipping, rare manuscript availability, or wholesale distribution? Fill out the form or reach out directly.
            </p>
          </div>

          <div className="space-y-4 text-xs font-semibold text-zinc-700 dark:text-zinc-300">
            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-rose-50 text-[#701a08] flex items-center justify-center">
                <Mail className="w-4.5 h-4.5" />
              </div>
              <div>
                <span className="text-[10px] font-bold text-zinc-400 block uppercase">Email Support</span>
                <a href="mailto:support@indianbooksworldwide.com" className="hover:underline">support@indianbooksworldwide.com</a>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-rose-50 text-[#701a08] flex items-center justify-center">
                <Phone className="w-4.5 h-4.5" />
              </div>
              <div>
                <span className="text-[10px] font-bold text-zinc-400 block uppercase">Phone Support</span>
                <a href="tel:+912212345678" className="hover:underline">+91 22 1234 5678</a>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="w-9 h-9 rounded-xl bg-rose-50 text-[#701a08] flex items-center justify-center">
                <MapPin className="w-4.5 h-4.5" />
              </div>
              <div>
                <span className="text-[10px] font-bold text-zinc-400 block uppercase">Headquarters</span>
                <span>Chowkhamba Sanskrit Series Office, Kashi (Varanasi), India</span>
              </div>
            </div>
          </div>
        </div>

        {/* Contact Form Panel */}
        <div className="lg:col-span-7 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-3xl p-6 sm:p-10 shadow-sm space-y-6">
          {ticketNumber ? (
            <div className="text-center py-12 space-y-6">
              <div className="w-16 h-16 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center mx-auto shadow-inner">
                <ShieldCheck className="w-8 h-8" />
              </div>
              <div className="space-y-2">
                <h2 className="text-xl font-extrabold text-zinc-900 dark:text-zinc-100">Enquiry Submitted!</h2>
                <p className="text-xs text-zinc-500 font-semibold">
                  Your enquiry has been successfully logged under support ticket:
                </p>
                <div className="inline-block px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-xl font-mono text-sm font-extrabold text-[#701a08] mt-2">
                  {ticketNumber}
                </div>
              </div>
              <p className="text-[11px] text-zinc-400 max-w-sm mx-auto font-medium">
                An confirmation email has been dispatched. Our team will review and reply within 24 hours.
              </p>
              <button
                onClick={() => setTicketNumber(null)}
                className="px-6 py-2.5 rounded-xl border border-zinc-300 hover:bg-zinc-50 text-xs font-bold text-zinc-600"
              >
                Submit another request
              </button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-5 text-xs font-semibold">
              <h2 className="text-lg font-extrabold border-b pb-3 flex items-center gap-1.5">
                <HelpCircle className="w-5 h-5 text-[#701a08]" /> Submit Support Request
              </h2>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="text-zinc-500 block mb-1">Your Full Name *</label>
                  <input
                    type="text"
                    required
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    placeholder="e.g. Rahul Dev"
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                  />
                </div>

                <div>
                  <label className="text-zinc-500 block mb-1">Your Email Address *</label>
                  <input
                    type="email"
                    required
                    value={form.email}
                    onChange={(e) => setForm({ ...form, email: e.target.value })}
                    placeholder="e.g. rahul@example.com"
                    className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 font-mono"
                  />
                </div>
              </div>

              <div>
                <label className="text-zinc-500 block mb-1">Subject of Enquiry *</label>
                <input
                  type="text"
                  required
                  value={form.subject}
                  onChange={(e) => setForm({ ...form, subject: e.target.value })}
                  placeholder="e.g. Order Delivery Query / Manuscript Translation request"
                  className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                />
              </div>

              <div>
                <label className="text-zinc-500 block mb-1">Detailed Message *</label>
                <textarea
                  required
                  rows={5}
                  value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  placeholder="Provide all details including order ID if applicable..."
                  className="w-full px-4 py-2.5 rounded-xl border border-zinc-300 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800"
                />
              </div>

              <button
                type="submit"
                disabled={loading}
                className="w-full py-3 rounded-xl bg-[#701a08] hover:bg-[#581406] text-white font-extrabold flex items-center justify-center gap-1.5 shadow-md hover:opacity-95 transition-opacity"
              >
                {loading ? 'Submitting ticket...' : <>Submit Enquiry <Send className="w-4 h-4" /></>}
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}