import React, { useState } from 'react';
import { PROFILE_SUMMARY } from '../data/cvData';
import { Mail, Phone, MapPin, Globe, Send, CheckCircle2, Building2, Dna, FileText, Clock, ExternalLink } from 'lucide-react';

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: '',
    institution: '',
    email: '',
    category: 'Research Collaboration',
    subject: '',
    message: ''
  });

  const [submitted, setSubmitted] = useState<boolean>(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="space-y-12 py-8">
      
      {/* Page Title & Header Card */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Official Header Banner Card */}
        <div className="rounded-3xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-md overflow-hidden">
          
          <div className="bg-gradient-to-r from-emerald-900 via-teal-950 to-slate-950 p-6 sm:p-8 text-white">
            <div className="flex flex-col md:flex-row items-center gap-6">
              
              <img
                src={PROFILE_SUMMARY.photoUrl}
                alt="Prof. Dr. N. Thajuddin"
                className="w-28 h-28 sm:w-36 sm:h-36 rounded-2xl object-cover object-top border-4 border-emerald-400/80 shadow-lg shrink-0"
                referrerPolicy="no-referrer"
              />

              <div className="space-y-2 text-center md:text-left">
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 text-xs font-mono font-bold">
                  Academic & Clinical Contact Office
                </div>
                
                <h1 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white tracking-tight font-display">
                  Prof. Dr. N. Thajuddin, Ph.D., D.Sc.
                </h1>

                <p className="text-xs sm:text-sm text-slate-300 max-w-2xl font-normal leading-relaxed">
                  Former Pro - Vice Chancellor (2023–2026), B. S. Abdur Rahman Crescent Institute of Science & Technology · Former Head & Professor of Microbiology, Bharathidasan University.
                </p>

                <div className="flex flex-wrap items-center justify-center md:justify-start gap-x-3 gap-y-1 text-xs font-mono text-emerald-400 pt-1">
                  <span>FLS (London)</span>
                  <span aria-hidden="true" className="text-slate-600">·</span>
                  <span>FRSB (London)</span>
                  <span aria-hidden="true" className="text-slate-600">·</span>
                  <span>FNABS</span>
                  <span aria-hidden="true" className="text-slate-600">·</span>
                  <span>FMSI</span>
                  <span aria-hidden="true" className="text-slate-600">·</span>
                  <span>FMBSI</span>
                </div>
              </div>

            </div>
          </div>

        </div>

      </div>


      {/* Main Grid: Contact Details & Interactive Inquiry Form */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          
          {/* Left Column: Official Contact & Research Identifiers */}
          <div className="lg:col-span-5 space-y-6">
            
            {/* Office Locations */}
            <div className="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm space-y-4">
              <h3 className="text-xs font-mono font-bold uppercase text-slate-400 tracking-wider flex items-center gap-2">
                <Building2 className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                <span>Institutional Offices</span>
              </h3>

              <div className="space-y-4 text-xs text-slate-700 dark:text-slate-300">
                <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <div className="font-bold text-slate-900 dark:text-white mb-1">
                    Office of Former Pro - Vice Chancellor
                  </div>
                  <div className="leading-relaxed">
                    B. S. Abdur Rahman Crescent Institute of Science & Technology (Deemed University), Vandalur, Chennai – 600 048, Tamil Nadu, India.
                  </div>
                </div>

                <div className="p-3.5 rounded-xl bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <div className="font-bold text-slate-900 dark:text-white mb-1">
                    Department of Microbiology & School of Life Sciences
                  </div>
                  <div className="leading-relaxed">
                    Bharathidasan University, Tiruchirappalli – 620 024, Tamil Nadu, India.
                  </div>
                </div>
              </div>
            </div>

            {/* Direct Contact Methods */}
            <div className="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm space-y-3">
              <h3 className="text-xs font-mono font-bold uppercase text-slate-400 tracking-wider flex items-center gap-2 mb-2">
                <Mail className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                <span>Direct Contact Details</span>
              </h3>

              <div className="space-y-2.5 text-xs">
                <div className="flex items-center gap-3 text-slate-800 dark:text-slate-200">
                  <Phone className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0" />
                  <span className="font-mono font-bold">{PROFILE_SUMMARY.contact.phone}</span>
                </div>

                <div className="flex items-start gap-3 text-slate-800 dark:text-slate-200">
                  <Mail className="w-4 h-4 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5" />
                  <div className="font-mono text-xs space-y-0.5">
                    <div>nthaju2002@yahoo.com</div>
                    <div>nthaju2002@bdu.ac.in</div>
                    <div>nthaju2002@gmail.com</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Research Identifiers */}
            <div className="p-6 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
              <h3 className="text-xs font-mono font-bold uppercase text-slate-400 tracking-wider flex items-center gap-2 mb-3">
                <Dna className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                <span>Global Research Profiles & IDs</span>
              </h3>

              <div className="space-y-2 text-xs font-mono">
                <div className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <span className="text-slate-400">ORCID iD:</span>
                  <a href={`https://orcid.org/${PROFILE_SUMMARY.contact.orcid}`} target="_blank" rel="noreferrer" className="text-emerald-600 dark:text-emerald-400 font-bold hover:underline flex items-center gap-1">
                    <span>{PROFILE_SUMMARY.contact.orcid}</span>
                    <ExternalLink className="w-3 h-3" />
                  </a>
                </div>

                <div className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <span className="text-slate-400">Scopus ID:</span>
                  <span className="text-slate-900 dark:text-white font-bold">{PROFILE_SUMMARY.contact.scopusId}</span>
                </div>

                <div className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <span className="text-slate-400">Web of Science:</span>
                  <span className="text-slate-900 dark:text-white font-bold">{PROFILE_SUMMARY.contact.webOfScienceId}</span>
                </div>

                <div className="flex items-center justify-between p-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/60 dark:border-slate-800/60">
                  <span className="text-slate-400">Live DNA Profile:</span>
                  <a href={`https://livedna.org/${PROFILE_SUMMARY.contact.liveDna}`} target="_blank" rel="noreferrer" className="text-emerald-600 dark:text-emerald-400 font-bold hover:underline flex items-center gap-1">
                    <span>{PROFILE_SUMMARY.contact.liveDna}</span>
                    <ExternalLink className="w-3 h-3" />
                  </a>
                </div>
              </div>
            </div>

          </div>

          {/* Right Column: Academic Inquiry & Collaboration Form */}
          <div className="lg:col-span-7 p-6 sm:p-8 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-800/80 shadow-sm">
            <h3 className="text-lg font-bold text-slate-900 dark:text-white mb-1">
              Academic Inquiry & Research Collaboration
            </h3>
            <p className="text-xs sm:text-sm text-slate-600 dark:text-slate-300 mb-6 font-normal">
              Send a direct message regarding joint research programs, keynote lectures, industrial consultancy, or doctoral mentorship inquiries.
            </p>

            {submitted ? (
              <div className="p-6 rounded-2xl bg-emerald-50 dark:bg-emerald-950/60 border border-emerald-200 dark:border-emerald-900 text-emerald-900 dark:text-emerald-200 space-y-3">
                <CheckCircle2 className="w-8 h-8 text-emerald-600 dark:text-emerald-400" />
                <h4 className="text-base font-bold">Inquiry Received</h4>
                <p className="text-xs leading-relaxed">
                  Thank you for contacting the office of Prof. Dr. N. Thajuddin. Your message regarding <span className="font-bold">"{formData.subject || formData.category}"</span> has been transmitted successfully.
                </p>
                <button
                  onClick={() => {
                    setSubmitted(false);
                    setFormData({ name: '', institution: '', email: '', category: 'Research Collaboration', subject: '', message: '' });
                  }}
                  className="px-4 py-2 text-xs font-semibold rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"
                >
                  Send Another Inquiry
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-4 text-xs sm:text-sm">
                
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                      Your Full Name *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="Dr. / Prof. / Mr. / Ms."
                      value={formData.name}
                      onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                      className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                      Institution / University *
                    </label>
                    <input
                      type="text"
                      required
                      placeholder="University or Research Lab"
                      value={formData.institution}
                      onChange={(e) => setFormData({ ...formData, institution: e.target.value })}
                      className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    />
                  </div>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                      Email Address *
                    </label>
                    <input
                      type="email"
                      required
                      placeholder="name@institution.edu"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                      className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                      Inquiry Category *
                    </label>
                    <select
                      value={formData.category}
                      onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                      className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                    >
                      <option value="Research Collaboration">Research Collaboration</option>
                      <option value="Post-Doctoral / Ph.D. Inquiry">Post-Doctoral / Ph.D. Inquiry</option>
                      <option value="Keynote Speaker / Plenary Lecture">Keynote Speaker / Plenary Lecture</option>
                      <option value="Industrial Consultancy / MoU">Industrial Consultancy / MoU</option>
                      <option value="Cyanobacteria Strain Deposit">Cyanobacteria Strain Deposit</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                    Subject Heading *
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="Brief description of your query"
                    value={formData.subject}
                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
                    className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  />
                </div>

                <div>
                  <label className="block text-xs font-mono font-semibold text-slate-700 dark:text-slate-300 mb-1">
                    Detailed Message *
                  </label>
                  <textarea
                    rows={5}
                    required
                    placeholder="Provide details regarding your proposal, collaboration objectives, or academic request..."
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                    className="w-full px-3.5 py-2.5 rounded-lg bg-slate-50 dark:bg-slate-950 border border-slate-200/80 dark:border-slate-800/80 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  />
                </div>

                <button
                  type="submit"
                  className="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-slate-900 text-white dark:bg-emerald-500 dark:text-slate-950 hover:bg-slate-800 dark:hover:bg-emerald-400 font-bold text-xs sm:text-sm transition-colors shadow-md"
                >
                  <Send className="w-4 h-4" />
                  <span>Submit Inquiry to Office</span>
                </button>

              </form>
            )}

          </div>

        </div>
      </section>

    </div>
  );
}