'use client';

import { useEffect, useState } from 'react';
import { Plus, X, Save, Star, StarOff, Link as LinkIcon } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { EventsPageData, LocalizedString } from '@/types';
import Button from '@/components/ui/Button';
import Input, { Textarea } from '@/components/ui/Input';
import ImageUploader from '@/components/ui/ImageUploader';
import { PageSpinner } from '@/components/ui/Spinner';
import LanguageTabs, { useLanguageTabs, Lang } from '@/components/ui/LanguageTabs';
import Section from '@/components/ui/Section';

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();
}

interface EventLink {
  label: LocalizedString;
  url: string;
}

interface EventItem {
  title: LocalizedString;
  description: LocalizedString;
  date: string;
  endDate: string;
  venue: LocalizedString;
  location: LocalizedString;
  image: string;
  isFeatured: boolean;
  links: EventLink[];
}

export default function EventsEditorPage() {
  const { activeLang, setActiveLang } = useLanguageTabs();
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  const [heroTitle, setHeroTitle] = useState<LocalizedString>(emptyLS());
  const [heroSubtitle, setHeroSubtitle] = useState<LocalizedString>(emptyLS());
  const [heroImage, setHeroImage] = useState('');
  const [events, setEvents] = useState<EventItem[]>([]);

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

  const loadFromData = (data: EventsPageData) => {
    setHeroTitle(asLS(data.heroTitle));
    setHeroSubtitle(asLS(data.heroSubtitle));
    setHeroImage(data.heroImage ?? '');
    setEvents(
      (data.events ?? []).map((e) => ({
        title: asLS(e.title),
        description: asLS(e.description),
        date: e.date ?? '',
        endDate: e.endDate ?? '',
        venue: asLS(e.venue),
        location: asLS(e.location),
        image: e.image ?? '',
        isFeatured: e.isFeatured ?? false,
        links: (e.links ?? []).map((l) => ({ label: asLS(l.label), url: l.url ?? '' })),
      }))
    );
  };

  useEffect(() => {
    api
      .getEventsPage()
      .then(loadFromData)
      .catch(() => toast.error('Failed to load data'))
      .finally(() => setIsLoading(false));
  }, []);

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    try {
      const payload: Partial<EventsPageData> = {
        heroTitle,
        heroSubtitle,
        heroImage: heroImage || undefined,
        events: events.map((ev) => ({
          ...ev,
          image: ev.image || undefined,
          endDate: ev.endDate || undefined,
        })),
      };
      const updated = await api.updateEventsPage(payload);
      loadFromData(updated);
      toast.success('Events page saved');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setIsSaving(false);
    }
  };

  const addEvent = () =>
    setEvents([
      ...events,
      { title: emptyLS(), description: emptyLS(), date: '', endDate: '', venue: emptyLS(), location: emptyLS(), image: '', isFeatured: false, links: [] },
    ]);

  const removeEvent = (idx: number) => setEvents(events.filter((_, i) => i !== idx));

  const updateEventField = (idx: number, field: 'title' | 'description' | 'venue' | 'location', lang: Lang, value: string) =>
    setEvents(events.map((ev, i) => (i === idx ? { ...ev, [field]: { ...ev[field], [lang]: value } } : ev)));

  const updateEventString = (idx: number, field: 'date' | 'endDate' | 'image', value: string) =>
    setEvents(events.map((ev, i) => (i === idx ? { ...ev, [field]: value } : ev)));

  const toggleFeatured = (idx: number) =>
    setEvents(events.map((ev, i) => ({ ...ev, isFeatured: i === idx ? !ev.isFeatured : false })));

  const addLink = (eventIdx: number) =>
    setEvents(events.map((ev, i) => (i === eventIdx ? { ...ev, links: [...ev.links, { label: emptyLS(), url: '' }] } : ev)));

  const removeLink = (eventIdx: number, linkIdx: number) =>
    setEvents(events.map((ev, i) => (i === eventIdx ? { ...ev, links: ev.links.filter((_, j) => j !== linkIdx) } : ev)));

  const updateLinkLabel = (eventIdx: number, linkIdx: number, lang: Lang, value: string) =>
    setEvents(
      events.map((ev, i) =>
        i === eventIdx ? { ...ev, links: ev.links.map((l, j) => (j === linkIdx ? { ...l, label: { ...l.label, [lang]: value } } : l)) } : ev
      )
    );

  const updateLinkUrl = (eventIdx: number, linkIdx: number, value: string) =>
    setEvents(
      events.map((ev, i) =>
        i === eventIdx ? { ...ev, links: ev.links.map((l, j) => (j === linkIdx ? { ...l, url: value } : l)) } : ev
      )
    );

  if (isLoading) return <PageSpinner />;

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Events</h1>
        <Button type="submit" form="events-form" isLoading={isSaving}>
          <Save size={16} />
          Save changes
        </Button>
      </div>

      <form id="events-form" onSubmit={handleSave} className="space-y-5">
        <LanguageTabs activeLang={activeLang} onChange={setActiveLang} />

        <Section title="Hero Section">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-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}
            />
          </div>
          <ImageUploader label="Hero background image" value={heroImage} onChange={setHeroImage} />
        </Section>

        <Section title="Events">
          <div className="space-y-5">
            {events.map((ev, idx) => (
              <div key={idx} className="border border-gray-200 rounded-lg p-5 relative">
                <div className="absolute top-3 right-3 flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => toggleFeatured(idx)}
                    className={`p-1.5 rounded transition-colors ${ev.isFeatured ? 'text-amber-500 bg-amber-50' : 'text-gray-400 hover:text-amber-500'}`}
                    title={ev.isFeatured ? 'Unmark as featured' : 'Mark as featured'}
                  >
                    {ev.isFeatured ? <Star size={16} fill="currentColor" /> : <StarOff size={16} />}
                  </button>
                  <button type="button" onClick={() => removeEvent(idx)} className="text-gray-400 hover:text-red-500 p-1.5">
                    <X size={16} />
                  </button>
                </div>

                {ev.isFeatured && (
                  <span className="inline-block text-xs font-semibold text-amber-700 bg-amber-100 px-2 py-0.5 rounded mb-3">Featured</span>
                )}

                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Title ({activeLang.toUpperCase()})</label>
                      <input
                        value={ev.title[activeLang]}
                        onChange={(e) => updateEventField(idx, 'title', activeLang, e.target.value)}
                        placeholder={activeLang === 'en' ? 'Event title' : '活動名稱'}
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Description ({activeLang.toUpperCase()})</label>
                      <textarea
                        value={ev.description[activeLang]}
                        onChange={(e) => updateEventField(idx, 'description', activeLang, e.target.value)}
                        placeholder={activeLang === 'en' ? 'Event description' : '活動描述'}
                        rows={3}
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                      />
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
                        <input
                          type="date"
                          value={ev.date}
                          onChange={(e) => updateEventString(idx, 'date', e.target.value)}
                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700 mb-1">End Date</label>
                        <input
                          type="date"
                          value={ev.endDate}
                          onChange={(e) => updateEventString(idx, 'endDate', e.target.value)}
                          className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                      </div>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Venue ({activeLang.toUpperCase()})</label>
                      <input
                        value={ev.venue[activeLang]}
                        onChange={(e) => updateEventField(idx, 'venue', activeLang, e.target.value)}
                        placeholder={activeLang === 'en' ? 'Venue name' : '場地名稱'}
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-700 mb-1">Location ({activeLang.toUpperCase()})</label>
                      <input
                        value={ev.location[activeLang]}
                        onChange={(e) => updateEventField(idx, 'location', activeLang, e.target.value)}
                        placeholder={activeLang === 'en' ? 'City, Country' : '城市, 國家'}
                        className="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                    </div>
                  </div>
                </div>

                <ImageUploader
                  label="Event image"
                  value={ev.image}
                  onChange={(url) => updateEventString(idx, 'image', url)}
                  previewHeight="h-32"
                />

                <div className="mt-4 pt-4 border-t border-gray-100">
                  <label className="flex items-center gap-1.5 text-sm font-medium text-gray-700 mb-2">
                    <LinkIcon size={14} />
                    Links / CTAs
                  </label>
                  <div className="space-y-2">
                    {ev.links.map((link, lIdx) => (
                      <div key={lIdx} className="flex gap-2 items-start">
                        <input
                          value={link.label[activeLang]}
                          onChange={(e) => updateLinkLabel(idx, lIdx, activeLang, e.target.value)}
                          placeholder={activeLang === 'en' ? 'Label' : '標籤'}
                          className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                        <input
                          value={link.url}
                          onChange={(e) => updateLinkUrl(idx, lIdx, e.target.value)}
                          placeholder="https://..."
                          className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                        />
                        <button type="button" onClick={() => removeLink(idx, lIdx)} className="mt-2 text-gray-400 hover:text-red-500">
                          <X size={14} />
                        </button>
                      </div>
                    ))}
                  </div>
                  <button
                    type="button"
                    onClick={() => addLink(idx)}
                    className="mt-2 text-xs text-blue-600 hover:text-blue-700 font-medium"
                  >
                    + Add link
                  </button>
                </div>
              </div>
            ))}
          </div>
          <Button type="button" variant="secondary" size="sm" onClick={addEvent}>
            <Plus size={14} />
            Add event
          </Button>
        </Section>

        <div className="flex justify-end">
          <Button type="submit" isLoading={isSaving} size="lg">
            <Save size={16} />
            Save changes
          </Button>
        </div>
      </form>
    </div>
  );
}