'use client';

import { useEffect, useState } from 'react';
import { Plus, X, Save } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { MembershipOffersData, 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 OfferCategory {
  title: LocalizedString;
  description: LocalizedString;
  bulletPoints: LocalizedString[];
  image: string;
}

export default function MembershipOffersEditorPage() {
  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 [bannerImage, setBannerImage] = useState('');
  const [termsAndConditions, setTermsAndConditions] = useState<LocalizedString>(emptyLS());
  const [ctaTitle, setCtaTitle] = useState<LocalizedString>(emptyLS());
  const [ctaHotline, setCtaHotline] = useState('');
  const [ctaButtonText, setCtaButtonText] = useState<LocalizedString>(emptyLS());
  const [ctaButtonLink, setCtaButtonLink] = useState('');
  const [offerCategories, setOfferCategories] = useState<OfferCategory[]>([]);

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

  const loadFromData = (data: MembershipOffersData) => {
    setHeroTitle(asLS(data.heroTitle));
    setHeroSubtitle(asLS(data.heroSubtitle));
    setHeroImage(data.heroImage ?? '');
    setBannerImage(data.bannerImage ?? '');
    setTermsAndConditions(asLS(data.termsAndConditions));
    setCtaTitle(asLS(data.ctaTitle));
    setCtaHotline(data.ctaHotline ?? '');
    setCtaButtonText(asLS(data.ctaButtonText));
    setCtaButtonLink(data.ctaButtonLink ?? '');
    setOfferCategories(
      (data.offerCategories ?? []).map((c) => ({
        title: asLS(c.title),
        description: asLS(c.description),
        bulletPoints: (c.bulletPoints ?? []).map((bp) => asLS(bp)),
        image: c.image ?? '',
      }))
    );
  };

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

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    try {
      const data: Partial<MembershipOffersData> = {
        heroTitle,
        heroSubtitle,
        heroImage: heroImage || undefined,
        bannerImage: bannerImage || undefined,
        termsAndConditions,
        ctaTitle,
        ctaHotline: ctaHotline || undefined,
        ctaButtonText,
        ctaButtonLink: ctaButtonLink || undefined,
        offerCategories,
      };
      const updated = await api.updateMembershipOffers(data);
      loadFromData(updated);
      toast.success('Membership Offers page saved');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save');
    } finally {
      setIsSaving(false);
    }
  };

  const addCategory = () =>
    setOfferCategories([...offerCategories, { title: emptyLS(), description: emptyLS(), bulletPoints: [], image: '' }]);
  const removeCategory = (idx: number) => setOfferCategories(offerCategories.filter((_, i) => i !== idx));

  const updateCategoryField = (idx: number, field: 'title' | 'description', lang: Lang, value: string) =>
    setOfferCategories(
      offerCategories.map((c, i) =>
        i === idx ? { ...c, [field]: { ...c[field], [lang]: value } } : c
      )
    );

  const updateCategoryImage = (idx: number, image: string) =>
    setOfferCategories(offerCategories.map((c, i) => (i === idx ? { ...c, image } : c)));

  const addBulletPoint = (catIdx: number) =>
    setOfferCategories(
      offerCategories.map((c, i) =>
        i === catIdx ? { ...c, bulletPoints: [...c.bulletPoints, emptyLS()] } : c
      )
    );

  const removeBulletPoint = (catIdx: number, bpIdx: number) =>
    setOfferCategories(
      offerCategories.map((c, i) =>
        i === catIdx ? { ...c, bulletPoints: c.bulletPoints.filter((_, j) => j !== bpIdx) } : c
      )
    );

  const updateBulletPoint = (catIdx: number, bpIdx: number, lang: Lang, value: string) =>
    setOfferCategories(
      offerCategories.map((c, i) =>
        i === catIdx
          ? {
              ...c,
              bulletPoints: c.bulletPoints.map((bp, j) =>
                j === bpIdx ? { ...bp, [lang]: value } : bp
              ),
            }
          : c
      )
    );

  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">Membership Offers</h1>
        <Button type="submit" form="membership-offers-form" isLoading={isSaving}>
          <Save size={16} />
          Save changes
        </Button>
      </div>

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

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          <Section title="Hero Section">
            <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} />
          </Section>

          <Section title="Banner & CTA">
            <ImageUploader label="Featured offers banner" value={bannerImage} onChange={setBannerImage} />
            <hr className="border-gray-200" />
            <Input
              label={`CTA title (${activeLang.toUpperCase()})`}
              value={ctaTitle[activeLang]}
              onChange={(e) => updateLS(setCtaTitle, activeLang, e.target.value)}
            />
            <Input label="Hotline" value={ctaHotline} onChange={(e) => setCtaHotline(e.target.value)} />
            <Input
              label={`CTA button text (${activeLang.toUpperCase()})`}
              value={ctaButtonText[activeLang]}
              onChange={(e) => updateLS(setCtaButtonText, activeLang, e.target.value)}
            />
            <Input
              label="CTA link"
              value={ctaButtonLink}
              onChange={(e) => setCtaButtonLink(e.target.value)}
              placeholder="https://golfcard.com.hk/register"
            />
          </Section>
        </div>

        <Section title={`Terms & Conditions (${activeLang.toUpperCase()})`}>
          <Textarea
            label={`T&C text (${activeLang.toUpperCase()})`}
            value={termsAndConditions[activeLang]}
            onChange={(e) => updateLS(setTermsAndConditions, activeLang, e.target.value)}
            rows={4}
          />
        </Section>

        {/* Offer Categories */}
        <Section title="Offer Categories">
          <div className="space-y-6">
            {offerCategories.map((cat, catIdx) => (
              <div key={catIdx} className="border border-gray-200 rounded-lg p-4 relative">
                <button
                  type="button"
                  onClick={() => removeCategory(catIdx)}
                  className="absolute top-2 right-2 text-gray-400 hover:text-red-500"
                >
                  <X size={16} />
                </button>
                <div className="flex items-center gap-2 mb-3">
                  <span className="w-7 h-7 rounded-full bg-green-600 text-white text-sm font-bold flex items-center justify-center">
                    {catIdx + 1}
                  </span>
                  <span className="text-sm font-medium text-gray-600">Category {catIdx + 1}</span>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
                  <div>
                    <ImageUploader
                      label="Image"
                      value={cat.image}
                      onChange={(url) => updateCategoryImage(catIdx, url)}
                      previewHeight="h-24"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="block text-sm font-medium text-gray-700">
                      Title ({activeLang.toUpperCase()})
                    </label>
                    <input
                      value={cat.title[activeLang]}
                      onChange={(e) => updateCategoryField(catIdx, 'title', activeLang, e.target.value)}
                      placeholder={activeLang === 'en' ? 'Category 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 className="space-y-2">
                    <label className="block text-sm font-medium text-gray-700">
                      Description ({activeLang.toUpperCase()})
                    </label>
                    <textarea
                      value={cat.description[activeLang]}
                      onChange={(e) => updateCategoryField(catIdx, 'description', activeLang, e.target.value)}
                      placeholder={activeLang === 'en' ? 'Category description' : '類別描述'}
                      rows={2}
                      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>

                {/* Bullet Points */}
                <div className="ml-2 border-l-2 border-gray-200 pl-4 space-y-2">
                  <label className="block text-xs font-semibold text-gray-500 uppercase tracking-wide">
                    Bullet points ({activeLang.toUpperCase()})
                  </label>
                  {cat.bulletPoints.map((bp, bpIdx) => (
                    <div key={bpIdx} className="flex items-center gap-2">
                      <span className="text-gray-400 text-sm">•</span>
                      <input
                        value={bp[activeLang]}
                        onChange={(e) => updateBulletPoint(catIdx, bpIdx, activeLang, e.target.value)}
                        placeholder={activeLang === 'en' ? 'Bullet point' : '要點'}
                        className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                      />
                      <button
                        type="button"
                        onClick={() => removeBulletPoint(catIdx, bpIdx)}
                        className="text-gray-400 hover:text-red-500"
                      >
                        <X size={14} />
                      </button>
                    </div>
                  ))}
                  <button
                    type="button"
                    onClick={() => addBulletPoint(catIdx)}
                    className="text-xs text-blue-600 hover:text-blue-700 font-medium flex items-center gap-1"
                  >
                    <Plus size={12} />
                    Add bullet point
                  </button>
                </div>
              </div>
            ))}
          </div>
          <Button type="button" variant="secondary" size="sm" onClick={addCategory}>
            <Plus size={14} />
            Add category
          </Button>
        </Section>

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