'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import axios from 'axios';
import InternalPageTemplate from '@/components/InternalPageTemplate';
import { useAuthStore } from '@/store/authStore';
import { useTranslations } from 'next-intl';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';

export default function SupportPage() {
  const t = useTranslations('pages.support');

  const CATEGORIES = [
    t('categories.searchNotReturning'),
    t('categories.incorrectPrice'),
    t('categories.accountLogin'),
    t('categories.billingSubscription'),
    t('categories.featureRequest'),
    t('categories.other'),
  ];

  const faqs = [
    {
      q: t('faqs.searchNotReturning.q'),
      a: t('faqs.searchNotReturning.a'),
    },
    {
      q: t('faqs.priceDiffers.q'),
      a: t('faqs.priceDiffers.a'),
    },
    {
      q: t('faqs.compareCountries.q'),
      a: t('faqs.compareCountries.a'),
    },
    {
      q: t('faqs.cancelPlan.q'),
      a: t('faqs.cancelPlan.a'),
    },
  ];

  const router = useRouter();
  const { isAuthenticated, user, token } = useAuthStore();

  const [category, setCategory] = useState(CATEGORIES[0]);
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  useEffect(() => {
    if (!isAuthenticated) router.push('/signin');
  }, [isAuthenticated, router]);

  if (!isAuthenticated || !user) return null;

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      await axios.post(
        `${API_URL}/api/support/ticket`,
        { category, subject, message },
        { headers: { Authorization: `Bearer ${token}` } }
      );
      setSubmitted(true);
    } catch (err: unknown) {
      const message =
        axios.isAxiosError(err) && err.response?.data?.error
          ? err.response.data.error
          : 'Failed to submit your ticket. Please try again.';
      setError(message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <InternalPageTemplate>
      {/* Header */}
      <div className="mb-12">
        <h1 className="text-4xl font-bold text-gray-900 mb-4">{t('heading')}</h1>
        <p className="text-gray-500 text-lg max-w-2xl leading-relaxed">
          {t('subheading')}
        </p>
      </div>

      {/* FAQ */}
      <div className="mb-12">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('commonQuestions')}</h2>
        <div className="flex flex-col divide-y divide-gray-100 border border-gray-100 rounded-2xl overflow-hidden">
          {faqs.map((faq, i) => (
            <div key={i} className="bg-gray-50">
              <button
                onClick={() => setOpenFaq(openFaq === i ? null : i)}
                className="w-full flex items-center justify-between px-6 py-4 text-left"
              >
                <span className="text-sm font-medium text-gray-800">{faq.q}</span>
                <svg
                  className={`w-4 h-4 text-gray-400 shrink-0 ml-4 transition-transform ${openFaq === i ? 'rotate-180' : ''}`}
                  fill="none" viewBox="0 0 24 24" stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              {openFaq === i && (
                <div className="px-6 pb-4">
                  <p className="text-sm text-gray-500 leading-relaxed">{faq.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Ticket form */}
      <div>
        <h2 className="text-lg font-semibold text-gray-900 mb-4">{t('submitTicket')}</h2>

        {submitted ? (
          <div className="bg-emerald-50 border border-emerald-100 rounded-2xl px-6 py-8 text-center">
            <div className="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-6 h-6 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="text-base font-semibold text-gray-900 mb-1">{t('ticketSubmitted')}</h3>
            <p className="text-sm text-gray-500 mb-4">
              {t('ticketSuccessBody', { email: user.email })}
            </p>
            <button
              onClick={() => { setSubmitted(false); setSubject(''); setMessage(''); setCategory(CATEGORIES[0]); }}
              className="text-sm text-brand-purple hover:text-purple-700 font-medium transition-colors"
            >
              {t('submitAnother')}
            </button>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="bg-gray-50 border border-gray-100 rounded-2xl px-6 py-6 flex flex-col gap-4">
            {/* Submitting as */}
            <div className="flex items-center gap-2 text-sm text-gray-500 bg-white border border-gray-100 rounded-lg px-3 py-2">
              <svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
              <span>{t('submittingAs')} <span className="font-medium text-gray-700">{user.email}</span></span>
            </div>

            {/* Category */}
            <div className="flex flex-col gap-1.5">
              <label className="text-sm font-medium text-gray-700">{t('categoryLabel')}</label>
              <select
                value={category}
                onChange={e => setCategory(e.target.value)}
                className="border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:border-brand-purple focus:ring-1 focus:ring-brand-purple transition bg-white"
              >
                {CATEGORIES.map(c => (
                  <option key={c} value={c}>{c}</option>
                ))}
              </select>
            </div>

            {/* Subject */}
            <div className="flex flex-col gap-1.5">
              <label className="text-sm font-medium text-gray-700">{t('subjectLabel')}</label>
              <input
                type="text"
                value={subject}
                onChange={e => setSubject(e.target.value)}
                required
                placeholder={t('subjectPlaceholder')}
                className="border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:border-brand-purple focus:ring-1 focus:ring-brand-purple transition"
              />
            </div>

            {/* Message */}
            <div className="flex flex-col gap-1.5">
              <label className="text-sm font-medium text-gray-700">{t('messageLabel')}</label>
              <textarea
                value={message}
                onChange={e => setMessage(e.target.value)}
                required
                rows={5}
                placeholder={t('messagePlaceholder')}
                className="border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none focus:border-brand-purple focus:ring-1 focus:ring-brand-purple transition resize-none"
              />
            </div>

            {error && (
              <p className="text-sm text-red-500">✕ {error}</p>
            )}

            <button
              type="submit"
              disabled={loading}
              className="bg-brand-purple hover:bg-purple-700 text-white text-sm font-medium px-5 py-2.5 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-start"
            >
              {loading ? t('submittingButton') : t('submitButton')}
            </button>
          </form>
        )}
      </div>
    </InternalPageTemplate>
  );
}