'use client';

import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import toast from 'react-hot-toast';
import ImageUpload from '@/components/ui/ImageUpload';
import { getApiErrorMessage } from '@/lib/utils/apiError';

// ─── Types ────────────────────────────────────────────────────────────────
interface Language {
  code: string;
  name: string;
  name_native?: string;
  is_default?: boolean;
  is_active?: boolean;
}

interface BannerImage {
  language_code: string;
  image: string;
  alt_text?: string | null;
}

interface BannerData {
  id?: string;
  placement: string;
  link_url?: string | null;
  position: number;
  is_active: boolean;
  is_hero_banner: boolean; // New field
  images: BannerImage[];
}

interface BannerFormProps {
  mode: 'create' | 'edit';
  initialData?: BannerData | null;
  languages: Language[];
}

// ─── Constants ────────────────────────────────────────────────────────────
const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;

const PLACEMENTS = [
  { value: 'home_top', label: 'Homepage Top' },
  { value: 'home_middle', label: 'Homepage Middle' },
  { value: 'home_bottom', label: 'Homepage Bottom' },
  { value: 'sidebar', label: 'Sidebar' },
  { value: 'category_page', label: 'Category Page' },
];

// ─── Component ────────────────────────────────────────────────────────────
export default function BannerForm({
  mode,
  initialData,
  languages,
}: BannerFormProps) {
  const router = useRouter();
  const isEditing = mode === 'edit';

  // ── Active Languages ────────────────────────────────────────────────
  const activeLanguages = useMemo(() => {
    if (!languages.length) {
      return [{ code: 'en', name: 'English', is_default: true }];
    }
    return languages
      .filter((l) => l.is_active !== false)
      .sort((a, b) => {
        if (a.is_default) return -1;
        if (b.is_default) return 1;
        return (a.name || '').localeCompare(b.name || '');
      });
  }, [languages]);

  // ── Initial Images ──────────────────────────────────────────────────
  const initialImages: BannerImage[] = useMemo(() => {
    if (initialData?.images?.length) {
      return initialData.images;
    }
    return activeLanguages.map((l) => ({
      language_code: l.code,
      image: '',
      alt_text: '',
    }));
  }, [initialData, activeLanguages]);

  // ── Form State ──────────────────────────────────────────────────────
  const [formData, setFormData] = useState({
    placement: initialData?.placement || 'home_top',
    link_url: initialData?.link_url || '',
    position: initialData?.position || 0,
    is_active:
      initialData?.is_active !== undefined ? initialData.is_active : true,
    is_hero_banner:
      initialData?.is_hero_banner !== undefined ? initialData.is_hero_banner : false, // New field
  });

  const [images, setImages] = useState<BannerImage[]>(initialImages);
  const [activeLangTab, setActiveLangTab] = useState<string>(
    activeLanguages[0]?.code || 'en',
  );
  const [loading, setLoading] = useState(false);

  // ── Helpers ─────────────────────────────────────────────────────────
  const getImageForLang = (langCode: string): BannerImage => {
    return (
      images.find((i) => i.language_code === langCode) || {
        language_code: langCode,
        image: '',
        alt_text: '',
      }
    );
  };

  const updateImage = (
    langCode: string,
    field: 'image' | 'alt_text',
    value: string,
  ) => {
    setImages((prev) => {
      const exists = prev.find((i) => i.language_code === langCode);
      if (exists) {
        return prev.map((i) =>
          i.language_code === langCode ? { ...i, [field]: value } : i,
        );
      }
      return [
        ...prev,
        { language_code: langCode, image: '', alt_text: '', [field]: value },
      ];
    });
  };

  // ── Handlers ────────────────────────────────────────────────────────
  const handleHeroToggle = () => {
    setFormData((p) => ({ ...p, is_hero_banner: !p.is_hero_banner }));
  };

  const handleActiveToggle = () => {
    setFormData((p) => ({ ...p, is_active: !p.is_active }));
  };

  // ── Submit ──────────────────────────────────────────────────────────
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const validImages = images.filter((i) => i.image);
    if (!validImages.length) {
      toast.error('At least one image is required');
      return;
    }

    setLoading(true);
    try {
      const url = isEditing
        ? `/api/banners/${initialData?.id}`
        : '/api/banners';
      const method = isEditing ? 'PUT' : 'POST';
      const payload = { ...formData, images: validImages };

      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });

      const data = await res.json();

      if (!res.ok) {
        toast.error(getApiErrorMessage(data, 'Failed to save banner'));
        return;
      }

      toast.success(isEditing ? 'Banner updated' : 'Banner created');
      router.push('/admin/dashboard/banners');
      router.refresh();
    } catch {
      toast.error('Network error');
    } finally {
      setLoading(false);
    }
  };

  // ── Render ──────────────────────────────────────────────────────────
  return (
    <div
      className="p-6 md:p-8 rounded-xl"
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
        boxShadow: 'var(--shadow-card-md)',
        maxWidth: '800px',
      }}
    >
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* ── Placement & Position ────────────────────────────────── */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label
              className="block text-sm font-medium mb-1.5"
              style={LABEL_STYLE}
            >
              Placement
            </label>
            <select
              value={formData.placement}
              onChange={(e) =>
                setFormData((p) => ({ ...p, placement: e.target.value }))
              }
              className="w-full px-4 py-2.5 rounded-lg text-sm cursor-pointer"
              style={INPUT_STYLE}
            >
              {PLACEMENTS.map((p) => (
                <option key={p.value} value={p.value}>
                  {p.label}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label
              className="block text-sm font-medium mb-1.5"
              style={LABEL_STYLE}
            >
              Position
            </label>
            <input
              type="number"
              value={formData.position}
              onChange={(e) =>
                setFormData((p) => ({
                  ...p,
                  position: parseInt(e.target.value) || 0,
                }))
              }
              min="0"
              className="w-full px-4 py-2.5 rounded-lg text-sm outline-none"
              style={INPUT_STYLE}
            />
          </div>
        </div>

        {/* ── Link URL ────────────────────────────────────────────── */}
        <div>
          <label
            className="block text-sm font-medium mb-1.5"
            style={LABEL_STYLE}
          >
            Link URL (Optional)
          </label>
          <input
            type="url"
            value={formData.link_url}
            onChange={(e) =>
              setFormData((p) => ({ ...p, link_url: e.target.value }))
            }
            placeholder="https://example.com or /products/iphone"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none"
            style={INPUT_STYLE}
          />
        </div>

        {/* ── Banner Images Per Language ──────────────────────────── */}
        <div>
          <label
            className="block text-sm font-medium mb-3"
            style={LABEL_STYLE}
          >
            Banner Images (Per Language)
          </label>

          {/* Language Tabs */}
          {activeLanguages.length > 1 && (
            <div
              className="flex flex-wrap gap-1 border-b mb-3"
              style={{ borderColor: 'var(--color-border)' }}
            >
              {activeLanguages.map((lang) => (
                <button
                  key={`lang-tab-${lang.code}`}
                  type="button"
                  onClick={() => setActiveLangTab(lang.code)}
                  className={`px-3 py-2 text-sm font-medium border-b-2 whitespace-nowrap transition-all ${
                    activeLangTab === lang.code
                      ? 'border-cta text-cta'
                      : 'border-transparent text-text-secondary hover:text-text'
                  }`}
                  style={{
                    color:
                      activeLangTab === lang.code
                        ? 'var(--color-cta)'
                        : undefined,
                    borderColor:
                      activeLangTab === lang.code
                        ? 'var(--color-cta)'
                        : undefined,
                  }}
                >
                  {lang.name_native || lang.name}{' '}
                  {lang.is_default ? '⭐' : ''}
                </button>
              ))}
            </div>
          )}

          {/* Image Upload per Language */}
          {activeLanguages.map((lang) => {
            const img = getImageForLang(lang.code);
            return (
              <div
                key={`image-panel-${lang.code}`}
                className={activeLangTab === lang.code ? 'block' : 'hidden'}
              >
                <div className="space-y-4">
                  <ImageUpload
                    value={img.image || null}
                    onUpload={(publicId) =>
                      updateImage(lang.code, 'image', publicId)
                    }
                    onRemove={() => updateImage(lang.code, 'image', '')}
                    label={`Banner Image (${lang.name})`}
                    folder="banners"
                    maxSize={5}
                    aspectRatio={2.5}
                  />

                  <div>
                    <label
                      className="block text-xs font-medium mb-1"
                      style={LABEL_STYLE}
                    >
                      Alt Text ({lang.name})
                    </label>
                    <input
                      type="text"
                      value={img.alt_text || ''}
                      onChange={(e) =>
                        updateImage(lang.code, 'alt_text', e.target.value)
                      }
                      placeholder="Describe the banner image"
                      maxLength={255}
                      className="w-full px-4 py-2.5 rounded-lg text-sm outline-none"
                      style={INPUT_STYLE}
                    />
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* ── Status Toggles ────────────────────────────────────────── */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label
              className="block text-sm font-medium mb-1.5"
              style={LABEL_STYLE}
            >
              Active Status
            </label>
            <button
              type="button"
              onClick={handleActiveToggle}
              className="px-4 py-2 rounded-lg text-sm font-medium transition-all w-full"
              style={{
                background: formData.is_active
                  ? 'var(--color-success)'
                  : 'var(--color-surface-alt)',
                border: formData.is_active
                  ? 'none'
                  : '1px solid var(--color-border)',
                color: formData.is_active
                  ? 'white'
                  : 'var(--color-text-secondary)',
              }}
            >
              {formData.is_active ? '✅ Active' : '❌ Inactive'}
            </button>
          </div>

          <div>
            <label
              className="block text-sm font-medium mb-1.5"
              style={LABEL_STYLE}
            >
              Hero Banner
            </label>
            <button
              type="button"
              onClick={handleHeroToggle}
              className="px-4 py-2 rounded-lg text-sm font-medium transition-all w-full"
              style={{
                background: formData.is_hero_banner
                  ? 'var(--color-cta)'
                  : 'var(--color-surface-alt)',
                border: formData.is_hero_banner
                  ? 'none'
                  : '1px solid var(--color-border)',
                color: formData.is_hero_banner
                  ? 'white'
                  : 'var(--color-text-secondary)',
              }}
            >
              {formData.is_hero_banner ? '🌟 Hero Banner' : '📋 Normal Banner'}
            </button>
            <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
              Hero banners appear in slider/featured section
            </p>
          </div>
        </div>

        {/* ── Form Actions ──────────────────────────────────────────── */}
        <div
          className="flex gap-3 pt-4 border-t"
          style={{ borderColor: 'var(--color-border)' }}
        >
          <button
            type="submit"
            disabled={loading}
            className="px-6 py-2.5 rounded-lg text-sm font-medium text-white transition-all hover:opacity-90 disabled:opacity-50"
            style={{ background: 'var(--color-cta)' }}
          >
            {loading
              ? 'Saving...'
              : isEditing
                ? 'Update Banner'
                : 'Create Banner'}
          </button>

          <button
            type="button"
            onClick={() => router.back()}
            className="px-6 py-2.5 rounded-lg text-sm font-medium transition-all hover:opacity-80"
            style={{
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text)',
              border: '1px solid var(--color-border)',
            }}
          >
            Cancel
          </button>
        </div>
      </form>
    </div>
  );
}