'use client';

import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { submitContactMessage } from '@/lib/actions/contactActions';
import { Mail, Send, CheckCircle2, Sparkles } from 'lucide-react';
import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';

export default function ContactPage() {
  const t = useTranslations('contact');
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  const [submitted, setSubmitted] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setErrorMsg(null);

    const res = await submitContactMessage(form);
    setIsSubmitting(false);

    if (res.success) {
      setSubmitted(true);
      setForm({ name: '', email: '', subject: '', message: '' });
    } else {
      setErrorMsg(res.error || 'Failed to submit message');
    }
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12 flex-1 w-full">
      
      {/* Header */}
      <div className="text-center space-y-3 max-w-2xl mx-auto">
        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 text-red-400 text-xs font-bold border border-red-500/20">
          <Mail className="w-4 h-4" />
          <span>Get in Touch with Creator</span>
        </div>
        <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
          {t('title')}
        </h1>
        <p className="text-sm text-slate-400">
          {t('subtitle')}
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start max-w-5xl mx-auto">
        
        {/* Contact Info Card */}
        <div className="lg:col-span-5 bg-slate-900/80 border border-slate-800 p-8 rounded-3xl space-y-6 shadow-xl">
          <h2 className="text-xl font-bold text-white flex items-center gap-2">
            <Sparkles className="w-5 h-5 text-red-500" />
            <span>Why Reach Out?</span>
          </h2>

          <ul className="space-y-4 text-xs text-slate-300">
            <li className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
                ✓
              </div>
              <div>
                <span className="font-bold text-white block">Future Tutorial Requests</span>
                <span>Suggest coding topics, frameworks, or projects you want covered.</span>
              </div>
            </li>

            <li className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
                ✓
              </div>
              <div>
                <span className="font-bold text-white block">Sponsorship & Inquiries</span>
                <span>Discuss channel sponsorships or platform collaborations.</span>
              </div>
            </li>

            <li className="flex items-start gap-3">
              <div className="w-6 h-6 rounded-full bg-red-500/10 text-red-400 flex items-center justify-center flex-shrink-0 mt-0.5">
                ✓
              </div>
              <div>
                <span className="font-bold text-white block">Code Issues & Feedback</span>
                <span>Provide feedback on video code snippets or starter templates.</span>
              </div>
            </li>
          </ul>

          <div className="pt-6 border-t border-slate-800 space-y-3 text-xs">
            <div className="flex items-center gap-3 text-slate-300">
              <Mail className="w-4 h-4 text-red-400" />
              <span>contact@youtube-devhub.com</span>
            </div>
            <div className="flex items-center gap-3 text-slate-300">
              <Youtube className="w-4 h-4 text-red-500" />
              <span>YouTube: @DevHubChannel</span>
            </div>
          </div>
        </div>

        {/* Form Area */}
        <div className="lg:col-span-7 bg-slate-900/60 border border-slate-800 p-8 rounded-3xl shadow-xl">
          {submitted ? (
            <div className="p-8 text-center space-y-4 bg-emerald-950/30 border border-emerald-800/40 rounded-2xl">
              <CheckCircle2 className="w-12 h-12 text-emerald-400 mx-auto animate-bounce" />
              <h3 className="text-xl font-bold text-white">{t('success')}</h3>
              <p className="text-xs text-slate-300">Your message has been saved in PostgreSQL. I will reply soon.</p>
              <button
                onClick={() => setSubmitted(false)}
                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-xs font-bold text-white rounded-xl transition-colors"
              >
                Send Another Message
              </button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              {errorMsg && (
                <div className="p-3 rounded-xl bg-red-950/50 border border-red-800 text-xs text-red-400">
                  {errorMsg}
                </div>
              )}

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('name')}</label>
                <input
                  type="text"
                  required
                  value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
                  placeholder="John Doe"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('email')}</label>
                <input
                  type="email"
                  required
                  value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
                  placeholder="john@example.com"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('subject')}</label>
                <input
                  type="text"
                  required
                  value={form.subject}
                  onChange={(e) => setForm({ ...form, subject: e.target.value })}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
                  placeholder="Sponsorship Proposal or New Tutorial Request"
                />
              </div>

              <div>
                <label className="block text-xs font-semibold text-slate-300 mb-1.5">{t('message')}</label>
                <textarea
                  rows={5}
                  required
                  value={form.message}
                  onChange={(e) => setForm({ ...form, message: e.target.value })}
                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-red-500/50"
                  placeholder="Type your message here..."
                />
              </div>

              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full py-3.5 px-6 bg-red-600 hover:bg-red-500 text-white font-bold text-xs rounded-xl shadow-lg shadow-red-600/30 transition-all flex items-center justify-center gap-2"
              >
                {isSubmitting ? (
                  <span>Saving to PostgreSQL...</span>
                ) : (
                  <>
                    <Send className="w-4 h-4" />
                    <span>{t('send')}</span>
                  </>
                )}
              </button>
            </form>
          )}
        </div>

      </div>

    </div>
  );
}