'use client';

import { useEffect, useState } from 'react';
import { Save } from 'lucide-react';
import toast from 'react-hot-toast';
import api from '@/lib/api';
import { SiteSettings, 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();
}

export default function SettingsPage() {
  const { activeLang, setActiveLang } = useLanguageTabs();
  const [settings, setSettings] = useState<SiteSettings | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);

  const [siteName, setSiteName] = useState<LocalizedString>(emptyLS());
  const [siteDescription, setSiteDescription] = useState<LocalizedString>(emptyLS());
  const [logo, setLogo] = useState('');
  const [favicon, setFavicon] = useState('');
  const [facebook, setFacebook] = useState('');
  const [twitter, setTwitter] = useState('');
  const [linkedin, setLinkedin] = useState('');
  const [instagram, setInstagram] = useState('');
  const [youtube, setYoutube] = useState('');
  const [xiaohongshu, setXiaohongshu] = useState('');
  const [whatsapp, setWhatsapp] = useState('');

  const [heroTitle, setHeroTitle] = useState<LocalizedString>(emptyLS());
  const [heroSubtitle, setHeroSubtitle] = useState<LocalizedString>(emptyLS());
  const [heroCtaText, setHeroCtaText] = useState<LocalizedString>(emptyLS());
  const [heroCtaLink, setHeroCtaLink] = useState('');
  const [heroBackgroundImage, setHeroBackgroundImage] = useState('');

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

  const loadFromData = (data: SiteSettings) => {
    setSettings(data);
    setSiteName(asLS(data.siteName));
    setSiteDescription(asLS(data.siteDescription));
    setLogo(data.logo ?? '');
    setFavicon(data.favicon ?? '');
    setFacebook(data.social?.facebook ?? '');
    setTwitter(data.social?.twitter ?? '');
    setLinkedin(data.social?.linkedin ?? '');
    setInstagram(data.social?.instagram ?? '');
    setYoutube(data.social?.youtube ?? '');
    setXiaohongshu(data.social?.xiaohongshu ?? '');
    setWhatsapp(data.contact?.whatsapp ?? '');
    setHeroTitle(asLS(data.hero?.title));
    setHeroSubtitle(asLS(data.hero?.subtitle));
    setHeroCtaText(asLS(data.hero?.ctaText));
    setHeroCtaLink(data.hero?.ctaLink ?? '');
    setHeroBackgroundImage(data.hero?.backgroundImage ?? '');
  };

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

  const handleSave = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    try {
      const data: Partial<SiteSettings> = {
        siteName,
        siteDescription,
        logo: logo || undefined,
        favicon: favicon || undefined,
        contact: {
          ...settings!.contact,
          whatsapp: whatsapp || undefined,
        },
        social: {
          facebook: facebook || undefined,
          twitter: twitter || undefined,
          linkedin: linkedin || undefined,
          instagram: instagram || undefined,
          youtube: youtube || undefined,
          xiaohongshu: xiaohongshu || undefined,
        },
        hero: {
          title: heroTitle,
          subtitle: heroSubtitle,
          ctaText: heroCtaText,
          ctaLink: heroCtaLink || undefined,
          backgroundImage: heroBackgroundImage || undefined,
        },
      };
      const updated = await api.updateSettings(data);
      loadFromData(updated);
      toast.success('Settings saved');
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Failed to save settings');
    } finally {
      setIsSaving(false);
    }
  };

  if (isLoading || !settings) return <PageSpinner />;

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

      <LanguageTabs activeLang={activeLang} onChange={setActiveLang} />

      <Section title="Hero Banner">
        <Input
          label="Title"
          value={heroTitle[activeLang]}
          onChange={(e) => updateLS(setHeroTitle, activeLang, e.target.value)}
        />
        <Input
          label="Subtitle"
          value={heroSubtitle[activeLang]}
          onChange={(e) => updateLS(setHeroSubtitle, activeLang, e.target.value)}
        />
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Input
            label="CTA Button Text"
            value={heroCtaText[activeLang]}
            onChange={(e) => updateLS(setHeroCtaText, activeLang, e.target.value)}
          />
          <Input
            label="CTA Button Link"
            value={heroCtaLink}
            onChange={(e) => setHeroCtaLink(e.target.value)}
            placeholder="/golf-id"
          />
        </div>
        <ImageUploader label="Background Image" value={heroBackgroundImage} onChange={setHeroBackgroundImage} hint="Recommended: 1920×1080px" />
      </Section>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
        <Section title="General">
          <Input
            label={`Site name (${activeLang.toUpperCase()})`}
            value={siteName[activeLang]}
            onChange={(e) => updateLS(setSiteName, activeLang, e.target.value)}
            required
          />
          <Textarea
            label={`Site description (${activeLang.toUpperCase()})`}
            value={siteDescription[activeLang]}
            onChange={(e) => updateLS(setSiteDescription, activeLang, e.target.value)}
            rows={3}
          />
          <ImageUploader label="Logo" value={logo} onChange={setLogo} previewHeight="h-20" />
          <ImageUploader label="Favicon" value={favicon} onChange={setFavicon} previewHeight="h-16" />
        </Section>

        <Section title="Social Links">
          <Input label="WhatsApp Number" value={whatsapp} onChange={(e) => setWhatsapp(e.target.value)} placeholder="85265898235" hint="Country code + number, no spaces or dashes. Shown as floating chat button on site." />
          <Input label="Facebook" value={facebook} onChange={(e) => setFacebook(e.target.value)} placeholder="https://facebook.com/..." type="url" />
          <Input label="Twitter / X" value={twitter} onChange={(e) => setTwitter(e.target.value)} placeholder="https://twitter.com/..." type="url" />
          <Input label="LinkedIn" value={linkedin} onChange={(e) => setLinkedin(e.target.value)} placeholder="https://linkedin.com/..." type="url" />
          <Input label="Instagram" value={instagram} onChange={(e) => setInstagram(e.target.value)} placeholder="https://instagram.com/..." type="url" />
          <Input label="YouTube" value={youtube} onChange={(e) => setYoutube(e.target.value)} placeholder="https://youtube.com/..." type="url" />
          <Input label="Xiaohongshu" value={xiaohongshu} onChange={(e) => setXiaohongshu(e.target.value)} placeholder="https://www.xiaohongshu.com/user/profile/..." type="url" />
        </Section>
      </div>

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