'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { Plus, Pencil, Trash2, Save, Image as ImageIcon } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { EventGalleryItem, EventGallerySettingsData, LocalizedString } from '@/types';
import Button from '@/components/ui/Button';
import Input, { Textarea } from '@/components/ui/Input';
import ImageUploader from '@/components/ui/ImageUploader';
import { StatusBadge } from '@/components/ui/Badge';
import { ConfirmDeleteModal } from '@/components/ui/Modal';
import Pagination from '@/components/ui/Pagination';
import { PageSpinner } from '@/components/ui/Spinner';
import LanguageTabs, { useLanguageTabs, Lang } from '@/components/ui/LanguageTabs';
import LayoutPreview from './_components/LayoutPreview';

const emptyLS = (): LocalizedString => ({ en: '', zh: '' });

function asLS(val: unknown): LocalizedString {
  if (val && typeof val === 'object' && 'en' in val) return val as LocalizedString;
  if (typeof val === 'string') return { en: val, zh: '' };
  return emptyLS();
}

function formatDate(d: string) {
  return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

export default function EventGalleryListPage() {
  const { activeLang, setActiveLang } = useLanguageTabs();
  const [activeTab, setActiveTab] = useState<'events' | 'layout' | 'settings'>('events');

  // Settings state
  const [heroTitle, setHeroTitle] = useState<LocalizedString>(emptyLS());
  const [heroSubtitle, setHeroSubtitle] = useState<LocalizedString>(emptyLS());
  const [heroImage, setHeroImage] = useState('');
  const [isSavingSettings, setIsSavingSettings] = useState(false);

  // Events state
  const [events, setEvents] = useState<EventGalleryItem[]>([]);
  const [allEvents, setAllEvents] = useState<EventGalleryItem[]>([]);
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [isLoading, setIsLoading] = useState(true);
  const [deleteTarget, setDeleteTarget] = useState<EventGalleryItem | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  const updateLS = (setter: React.Dispatch<React.SetStateAction<LocalizedString>>, lang: Lang, value: string) => {
    setter((prev) => ({ ...prev, [lang]: value }));
  };

  const loadSettings = async () => {
    try {
      const data = await api.getEventGallerySettings();
      setHeroTitle(asLS(data.heroTitle));
      setHeroSubtitle(asLS(data.heroSubtitle));
      setHeroImage(data.heroImage ?? '');
    } catch {
      toast.error('Failed to load page settings');
    }
  };

  const loadEvents = async (p = page) => {
    setIsLoading(true);
    try {
      const data = await api.getAdminEventGallery({ page: p, limit: 20 });
      setEvents(data.events ?? []);
      setTotalPages(data.pagination?.pages ?? 1);
    } catch {
      toast.error('Failed to load events');
    } finally {
      setIsLoading(false);
    }
  };

  const loadAllEvents = async () => {
    try {
      const data = await api.getAdminEventGallery({ page: 1, limit: 200 });
      setAllEvents(data.events ?? []);
    } catch {
      /* silently fail -- layout tab will just be empty */
    }
  };

  useEffect(() => {
    loadSettings();
    loadEvents();
    loadAllEvents();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => { loadEvents(); }, [page]); // eslint-disable-line react-hooks/exhaustive-deps

  const handleSaveSettings = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSavingSettings(true);
    try {
      const data: Partial<EventGallerySettingsData> = {
        heroTitle,
        heroSubtitle,
        heroImage: heroImage || undefined,
      };
      await api.updateEventGallerySettings(data);
      toast.success('Page settings saved');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setIsSavingSettings(false);
    }
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    setIsDeleting(true);
    try {
      await api.deleteEventGalleryItem(deleteTarget._id);
      toast.success('Event deleted');
      setDeleteTarget(null);
      loadEvents();
    } catch {
      toast.error('Failed to delete event');
    } finally {
      setIsDeleting(false);
    }
  };

  const tabs = [
    { key: 'events' as const, label: 'Events' },
    { key: 'layout' as const, label: 'Layout Preview' },
    { key: 'settings' as const, label: 'Page Settings' },
  ];

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Event Gallery</h1>
        <Link href="/event-gallery/edit?id=new">
          <Button>
            <Plus size={16} />
            New Event
          </Button>
        </Link>
      </div>

      {/* Tabs */}
      <div className="flex gap-1 border-b border-gray-200">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`px-4 py-2.5 text-sm font-medium border-b-2 transition-colors ${
              activeTab === tab.key
                ? 'border-blue-600 text-blue-600'
                : 'border-transparent text-gray-500 hover:text-gray-700'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {activeTab === 'settings' && (
        <form onSubmit={handleSaveSettings} className="space-y-5">
          <LanguageTabs activeLang={activeLang} onChange={setActiveLang} />
          <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
            <div className="px-5 py-3.5 border-b border-gray-100 bg-gray-50">
              <h2 className="text-sm font-semibold text-gray-700">Hero Section</h2>
            </div>
            <div className="p-5 space-y-4">
              <Input
                label={`Title (${activeLang.toUpperCase()})`}
                value={heroTitle[activeLang]}
                onChange={(e) => updateLS(setHeroTitle, activeLang, e.target.value)}
                required
              />
              <Textarea
                label={`Subtitle (${activeLang.toUpperCase()})`}
                value={heroSubtitle[activeLang]}
                onChange={(e) => updateLS(setHeroSubtitle, activeLang, e.target.value)}
                rows={2}
              />
              <ImageUploader label="Hero background image" value={heroImage} onChange={setHeroImage} />
            </div>
          </div>
          <div className="flex justify-end">
            <Button type="submit" isLoading={isSavingSettings}>
              <Save size={16} />
              Save settings
            </Button>
          </div>
        </form>
      )}

      {activeTab === 'layout' && (
        <LayoutPreview
          events={allEvents}
          onSaved={() => {
            loadEvents();
            loadAllEvents();
          }}
        />
      )}

      {activeTab === 'events' && (
        <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
          {isLoading ? (
            <PageSpinner />
          ) : events.length === 0 ? (
            <div className="py-16 text-center text-gray-400 text-sm">
              No events found.{' '}
              <Link href="/event-gallery/edit?id=new" className="text-blue-600 hover:underline">
                Create your first event
              </Link>
            </div>
          ) : (
            <>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="border-b border-gray-200 bg-gray-50 text-left">
                      <th className="px-4 py-3 font-medium text-gray-600 w-12"></th>
                      <th className="px-4 py-3 font-medium text-gray-600">Title</th>
                      <th className="px-4 py-3 font-medium text-gray-600 hidden md:table-cell">Event Date</th>
                      <th className="px-4 py-3 font-medium text-gray-600">Status</th>
                      <th className="px-4 py-3 font-medium text-gray-600 hidden sm:table-cell">Size</th>
                      <th className="px-4 py-3 font-medium text-gray-600 hidden sm:table-cell">
                        <span className="flex items-center gap-1"><ImageIcon size={13} /> Media</span>
                      </th>
                      <th className="px-4 py-3 font-medium text-gray-600 text-right">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-100">
                    {events.map((event) => (
                      <tr key={event._id} className="hover:bg-gray-50 transition-colors">
                        <td className="px-4 py-3">
                          {event.coverImage ? (
                            <img src={event.coverImage} alt="" className="w-10 h-10 rounded object-cover" />
                          ) : (
                            <div className="w-10 h-10 rounded bg-gray-100 flex items-center justify-center">
                              <ImageIcon size={16} className="text-gray-400" />
                            </div>
                          )}
                        </td>
                        <td className="px-4 py-3">
                          <Link
                            href={`/event-gallery/edit?id=${event._id}`}
                            className="font-medium text-gray-900 hover:text-blue-600 line-clamp-1"
                          >
                            {event.title?.en || event.title?.zh}
                          </Link>
                        </td>
                        <td className="px-4 py-3 text-gray-500 hidden md:table-cell">
                          {formatDate(event.eventDate)}
                        </td>
                        <td className="px-4 py-3">
                          <StatusBadge status={event.status} />
                        </td>
                        <td className="px-4 py-3 hidden sm:table-cell">
                          {(() => {
                            const badges: Record<string, { label: string; cls: string }> = {
                              small: { label: 'Regular', cls: 'bg-gray-100 text-gray-500 font-medium' },
                              wide:  { label: 'Wide',    cls: 'bg-sky-100 text-sky-700 font-semibold' },
                              tall:  { label: 'Tall',    cls: 'bg-violet-100 text-violet-700 font-semibold' },
                              large: { label: 'Featured', cls: 'bg-amber-100 text-amber-700 font-semibold' },
                            }
                            const b = badges[event.cardSize || 'small'] || badges.small
                            return (
                              <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[11px] ${b.cls}`}>{b.label}</span>
                            )
                          })()}
                        </td>
                        <td className="px-4 py-3 text-gray-500 hidden sm:table-cell">
                          {event.media?.length || event.photos?.length || 0}
                        </td>
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-2 justify-end">
                            <Link
                              href={`/event-gallery/edit?id=${event._id}`}
                              className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors"
                            >
                              <Pencil size={15} />
                            </Link>
                            <button
                              onClick={() => setDeleteTarget(event)}
                              className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                            >
                              <Trash2 size={15} />
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              {totalPages > 1 && (
                <div className="flex justify-center px-4 py-3 border-t border-gray-100">
                  <Pagination page={page} totalPages={totalPages} onPageChange={setPage} />
                </div>
              )}
            </>
          )}
        </div>
      )}

      <ConfirmDeleteModal
        isOpen={!!deleteTarget}
        onClose={() => setDeleteTarget(null)}
        onConfirm={handleDelete}
        itemName={deleteTarget?.title?.en || deleteTarget?.title?.zh || ''}
        isLoading={isDeleting}
      />
    </div>
  );
}