'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { LogOut, Mail } from 'lucide-react';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import { logoUrl } from '@/lib/assets';
import { useLanguage } from '@/lib/language-context';
import { getTranslation } from '@/lib/translations';

export default function AccountPage() {
  const router = useRouter();
  const { language } = useLanguage();
  const t = getTranslation(language);
  const [email, setEmail] = useState<string | null>(null);
  const [name, setName] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadSession = async () => {
      try {
        const response = await fetch('/api/auth/customer/session', { cache: 'no-store' });
        const data = (await response.json()) as {
          authenticated: boolean;
          email: string | null;
          name: string | null;
        };

        if (!data.authenticated || !data.email) {
          router.replace('/login?tab=customer');
          return;
        }

        setEmail(data.email);
        setName(data.name);
        window.dispatchEvent(new Event('shahi-customer-auth-changed'));
      } catch {
        router.replace('/login?tab=customer');
      } finally {
        setLoading(false);
      }
    };

    void loadSession();
  }, [router]);

  const handleLogout = async () => {
    await fetch('/api/auth/customer/logout', { method: 'POST' });
    window.dispatchEvent(new Event('shahi-customer-auth-changed'));
    router.replace('/login?tab=customer');
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-[#F8F5F0] flex items-center justify-center text-[#6B665F]">
        {t.auth.customer.loading}
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      <main className="max-w-2xl mx-auto px-4 sm:px-6 py-12 sm:py-16 text-center">
        <div className="mx-auto mb-8 flex h-20 w-20 items-center justify-center rounded-3xl border border-[#c99a2e]/30 bg-white p-4 shadow-lg">
          <img src={logoUrl()} alt="Shahi Kitchen" className="h-full w-full object-contain" />
        </div>

        <p className="text-xs tracking-[3px] text-[#c99a2e] mb-3">{t.auth.customer.badge}</p>
        <h1 className="font-serif text-3xl sm:text-4xl tracking-[-0.8px] text-[#101724] mb-4">
          {t.auth.customer.welcomeTitle}
        </h1>
        <p className="text-[15px] leading-relaxed text-[#6B665F] mb-8">
          {t.auth.customer.welcomeSubtitle}
        </p>

        <div className="rounded-3xl border border-[#EDE6D9] bg-white p-5 sm:p-8 shadow-xl">
          <p className="text-sm text-[#6B665F] mb-2">{t.auth.customer.loggedInAs}</p>
          {name && (
            <p className="font-serif text-lg sm:text-xl text-[#101724] mb-1 break-words">{name}</p>
          )}
          <div className="inline-flex max-w-full items-center gap-2 rounded-full bg-[#FFF6DC] px-4 sm:px-5 py-2.5 text-sm font-medium text-[#60420d]">
            <Mail className="h-4 w-4 shrink-0" />
            <span className="truncate" title={email ?? ''}>{email}</span>
          </div>
        </div>

        <button
          type="button"
          onClick={() => void handleLogout()}
          className="mt-8 inline-flex items-center gap-2 rounded-full border border-[#EDE6D9] bg-white px-6 py-3 text-sm font-medium text-[#6B665F] hover:text-[#101724] transition"
        >
          <LogOut className="h-4 w-4" />
          {t.auth.customer.logout}
        </button>
      </main>

      <Footer />
    </div>
  );
}