'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import {
  ArrowLeft,
  Plus,
  Loader2,
  Package,
  Tag,
  Layers,
  Image as ImageIcon,
  Save,
  Sparkles,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useCategories, useCreateProduct } from '@/hooks';
import type {
  CreateProductPayload,
  ProductStatus,
  VariantPayload,
  ProductCategory,
} from '@/lib/services/product.service';

// ── Helpers ────────────────────────────────────────────────────────────
const EMPTY_VARIANT = (): VariantPayload => ({
  name: '',
  sku: '',
  price: 0,
  stock: 0,
  weight: undefined,
  price_distributor: undefined,
  attributes: { unit: '', packaging: '' },
});

function generateSkuSuffix(index: number) {
  return `-V${String(index + 1).padStart(2, '0')}`;
}

import {
  Section,
  Field,
  DarkInput,
  DarkTextarea,
} from '@/components/ui/form-elements';
import { CategoryPicker } from '../components/CategoryPicker';
import { VariantRow } from '../components/VariantRow';

// ── Main Page ──────────────────────────────────────────────────────────
interface FormErrors {
  name?: string;
  sku?: string;
  category_id?: string;
  base_price?: string;
  variants?: string;
}

export default function AddProductPage() {
  const router = useRouter();
  const createProduct = useCreateProduct();
  const { data: categories = [], isLoading: isCategoriesLoading } =
    useCategories();

  const [name, setName] = useState('');
  const [sku, setSku] = useState('');
  const [description, setDescription] = useState('');
  const [shortDescription, setShortDescription] = useState('');
  const [basePrice, setBasePrice] = useState<number | ''>('');
  const [status, setStatus] = useState<ProductStatus>('active');
  const [isFeatured, setIsFeatured] = useState(false);
  const [category, setCategory] = useState<ProductCategory | null>(null);
  const [variants, setVariants] = useState<VariantPayload[]>([EMPTY_VARIANT()]);
  const [primaryImageUrl, setPrimaryImageUrl] = useState('');
  const [seoTitle, setSeoTitle] = useState('');
  const [seoDescription, setSeoDescription] = useState('');
  const [errors, setErrors] = useState<FormErrors>({});

  const updateVariant = (i: number, updated: VariantPayload) =>
    setVariants((prev) => prev.map((v, j) => (j === i ? updated : v)));
  const removeVariant = (i: number) =>
    setVariants((prev) => prev.filter((_, j) => j !== i));
  const addVariant = () => setVariants((prev) => [...prev, EMPTY_VARIANT()]);

  const validate = (): boolean => {
    const newErrors: FormErrors = {};
    if (!name.trim()) newErrors.name = 'Nama produk wajib diisi.';
    if (!sku.trim()) newErrors.sku = 'SKU wajib diisi.';
    if (!category) newErrors.category_id = 'Pilih kategori terlebih dahulu.';
    if (basePrice === '' || Number(basePrice) < 0)
      newErrors.base_price = 'Harga dasar wajib diisi.';
    if (variants.some((v) => !v.name || !v.sku))
      newErrors.variants = 'Setiap varian harus memiliki nama dan SKU.';
    if (variants.length === 0)
      newErrors.variants = 'Minimal 1 varian diperlukan.';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = () => {
    if (!validate()) return;
    const payload: CreateProductPayload = {
      category_id: category!.id,
      name: name.trim(),
      sku: sku.trim().toUpperCase(),
      description: description || null,
      short_description: shortDescription || null,
      base_price: Number(basePrice),
      status,
      is_featured: isFeatured,
      variants,
      primary_image_url: primaryImageUrl || undefined,
      meta: {
        seo_title: seoTitle || null,
        seo_description: seoDescription || null,
      },
    };

    createProduct.mutate(payload, {
      onSuccess: () => {
        router.push('/dashboard/admin/products');
      },
    });
  };

  return (
    <div className="min-h-screen bg-transparent text-gray-900 relative overflow-hidden pb-32 sm:pb-24">
      {/* Background Glow Blobs */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />
      <div className="absolute bottom-1/4 left-0 w-[400px] h-[400px] bg-yellow-400/10 rounded-full blur-[120px] pointer-events-none z-0" />

      <div className="relative z-10 max-w-4xl mx-auto space-y-8 pt-6 px-4 sm:px-6">
        {/* ── Topbar ── */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          className="flex flex-col sm:flex-row sm:items-center justify-between gap-6"
        >
          <div className="flex items-start gap-4">
            <button
              onClick={() => router.back()}
              className="p-3 rounded-xl bg-white/60 backdrop-blur-md border border-gray-200 text-gray-500 hover:text-gray-900 hover:bg-white shadow-sm transition-all mt-1 shrink-0"
            >
              <ArrowLeft className="w-5 h-5" />
            </button>
            <div>
              <h1 className="text-3xl font-black text-gray-900 tracking-tight leading-none mb-2">
                Tambah Produk
              </h1>
              <p className="text-sm font-medium text-gray-500 tracking-wide">
                Lengkapi data produk baru untuk ditambahkan ke katalog.
              </p>
            </div>
          </div>

          <div className="hidden sm:flex items-center gap-3">
            <button
              onClick={() => router.back()}
              className="px-6 py-3.5 rounded-xl text-sm font-bold text-gray-600 border border-gray-200 bg-white/60 hover:bg-white hover:text-gray-900 shadow-sm transition-all"
            >
              Batal
            </button>
            <button
              onClick={handleSubmit}
              disabled={createProduct.isPending}
              className="flex items-center gap-2 px-8 py-3.5 rounded-xl bg-[#FFD738] hover:bg-[#FFD738]/90 text-[#1C1D1F] text-sm font-bold tracking-wide transition-all shadow-lg shadow-[#FFD738]/20 disabled:opacity-60"
            >
              {createProduct.isPending ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Save className="w-4 h-4" />
              )}
              Simpan Produk
            </button>
          </div>
        </motion.div>

        <div className="space-y-6">
          {/* 1 – Basic info */}
          <Section
            icon={Package}
            title="Informasi Utama"
            subtitle="Detail dasar produk Anda"
            delay={0.05}
          >
            <div className="space-y-6">
              <div className="grid sm:grid-cols-2 gap-6">
                <Field label="Nama Produk" required error={errors.name}>
                  <DarkInput
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Contoh: Garam Himalaya Premium 500g"
                    maxLength={255}
                  />
                </Field>
                <Field
                  label="SKU Induk"
                  required
                  hint="Kode unik referensi"
                  error={errors.sku}
                >
                  <DarkInput
                    value={sku}
                    onChange={(e) => setSku(e.target.value.toUpperCase())}
                    placeholder="Contoh: GRM-HML-001"
                    maxLength={50}
                  />
                </Field>
              </div>
              <Field
                label="Deskripsi Lengkap"
                hint="Ditampilkan di halaman detail produk"
              >
                <DarkTextarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="Jelaskan spesifikasi, keunggulan, dan cara penyimpanan produk..."
                  rows={6}
                />
              </Field>
              <Field
                label="Deskripsi Singkat"
                hint="Opsional - Ditampilkan di kartu produk (Maks 500 karakter)"
              >
                <DarkTextarea
                  value={shortDescription}
                  onChange={(e) => setShortDescription(e.target.value)}
                  placeholder="Ringkasan singkat yang menarik minat pembeli..."
                  maxLength={500}
                  rows={3}
                />
                <p className="text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-2">
                  {shortDescription.length} / 500
                </p>
              </Field>
            </div>
          </Section>

          {/* 2 – Category & pricing */}
          <Section icon={Tag} title="Kategori & Status" delay={0.08}>
            <div className="grid sm:grid-cols-2 gap-6">
              <Field
                label="Kategori Produk"
                required
                error={errors.category_id}
              >
                <CategoryPicker
                  categories={categories}
                  selected={category}
                  onSelect={setCategory}
                  isLoading={isCategoriesLoading}
                />
              </Field>
              <Field
                label="Harga Dasar (Rp)"
                required
                hint="Harga awal sebelum dibedakan varian"
                error={errors.base_price}
              >
                <DarkInput
                  type="number"
                  min={0}
                  value={basePrice}
                  onChange={(e) =>
                    setBasePrice(e.target.value ? Number(e.target.value) : '')
                  }
                  placeholder="0"
                />
              </Field>
              <Field label="Status Publikasi">
                <div className="flex gap-3 bg-gray-50 p-1.5 rounded-xl border border-gray-200 shadow-sm">
                  {(['active', 'inactive'] as ProductStatus[]).map((s) => (
                    <button
                      key={s}
                      type="button"
                      onClick={() => setStatus(s)}
                      className={cn(
                        'flex-1 py-2.5 rounded-lg text-xs font-bold uppercase tracking-wider transition-all',
                        status === s
                          ? s === 'active'
                            ? 'bg-emerald-50 text-emerald-700 shadow-sm border border-emerald-100'
                            : 'bg-white text-gray-900 shadow-sm border border-gray-200'
                          : 'text-gray-500 hover:text-gray-700'
                      )}
                    >
                      {s === 'active' ? 'Aktif' : 'Nonaktif'}
                    </button>
                  ))}
                </div>
              </Field>
              <Field label="Sorotan">
                <button
                  type="button"
                  onClick={() => setIsFeatured((v) => !v)}
                  className={cn(
                    'w-full py-3 rounded-xl text-sm font-bold tracking-wide transition-all border flex items-center justify-center gap-2 shadow-sm',
                    isFeatured
                      ? 'bg-yellow-50 border-yellow-200 text-yellow-700'
                      : 'bg-white/40 border-gray-200 text-gray-500 hover:border-gray-300 hover:text-gray-700'
                  )}
                >
                  {isFeatured ? (
                    <Sparkles className="w-4 h-4 fill-current" />
                  ) : (
                    <Sparkles className="w-4 h-4" />
                  )}
                  {isFeatured
                    ? 'Produk Unggulan (Featured)'
                    : 'Jadikan Unggulan'}
                </button>
              </Field>
            </div>
          </Section>

          {/* 3 – Variants */}
          <Section
            icon={Layers}
            title="Manajemen Varian"
            subtitle="Minimal 1 varian diperlukan (Ukuran, Berat, dll)"
            delay={0.11}
          >
            <div className="space-y-4">
              {errors.variants && (
                <div className="bg-rose-500/10 border border-rose-500/20 px-4 py-3 rounded-xl flex items-center gap-3 mb-4">
                  <div className="w-1.5 h-1.5 rounded-full bg-rose-500 animate-pulse" />
                  <p className="text-xs font-bold text-rose-400 tracking-wide">
                    {errors.variants}
                  </p>
                </div>
              )}

              <div className="space-y-3">
                {variants.map((variant, i) => (
                  <VariantRow
                    key={i}
                    variant={variant}
                    index={i}
                    onChange={(updated) => updateVariant(i, updated)}
                    onRemove={() => removeVariant(i)}
                    canRemove={variants.length > 1}
                  />
                ))}
              </div>

              <button
                type="button"
                onClick={addVariant}
                className="w-full flex items-center justify-center gap-2 py-4 rounded-2xl border-2 border-dashed border-gray-300 text-sm font-bold text-gray-500 hover:border-yellow-400 hover:text-yellow-600 hover:bg-yellow-50 transition-all mt-4"
              >
                <Plus className="w-5 h-5" /> Tambah Varian Baru
              </button>
            </div>
          </Section>

          {/* 4 – Images */}
          <Section
            icon={ImageIcon}
            title="Gambar Produk"
            subtitle="Masukkan URL gambar produk (contoh: /images/products/product-250g.avif)."
            delay={0.14}
          >
            <Field
              label="URL Gambar Utama"
              hint="Path gambar di frontend public folder"
            >
              <DarkInput
                value={primaryImageUrl}
                onChange={(e) => setPrimaryImageUrl(e.target.value)}
                placeholder="/images/products/product-250g.avif"
              />
            </Field>
          </Section>

          {/* 5 – SEO */}
          {/* <Section
            icon={Info}
            title="Optimasi SEO"
            subtitle="Opsional — Membantu produk Anda ditemukan di mesin pencari Google."
            delay={0.17}
          >
            <div className="space-y-6">
              <Field label="SEO Title" hint="Maks. 70 karakter">
                <DarkInput
                  value={seoTitle}
                  onChange={(e) => setSeoTitle(e.target.value)}
                  maxLength={70}
                  placeholder="Garam Himalaya Asli | Garam Cap Kapal"
                />
                <p className="text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-2">
                  {seoTitle.length} / 70
                </p>
              </Field>
              <Field label="SEO Description" hint="Maks. 160 karakter">
                <DarkTextarea
                  value={seoDescription}
                  onChange={(e) => setSeoDescription(e.target.value)}
                  maxLength={160}
                  rows={3}
                  placeholder="Beli garam himalaya asli kualitas premium..."
                />
                <p className="text-right text-[10px] font-bold text-gray-500 uppercase tracking-widest mt-2">
                  {seoDescription.length} / 160
                </p>
              </Field>
            </div>
          </Section> */}
        </div>
      </div>

      {/* Sticky footer on mobile */}
      <div className="fixed bottom-0 left-0 right-0 sm:hidden bg-white/90 backdrop-blur-xl border-t border-gray-200 px-4 py-4 z-40 shadow-[0_-10px_40px_rgba(0,0,0,0.05)]">
        <div className="flex gap-3">
          <button
            type="button"
            onClick={() => router.back()}
            className="flex-1 py-3.5 text-xs font-bold text-gray-600 bg-white border border-gray-200 rounded-xl transition-colors shadow-sm"
          >
            Batal
          </button>
          <button
            type="button"
            onClick={handleSubmit}
            disabled={createProduct.isPending}
            className="flex-2 py-3.5 text-xs font-bold text-[#1C1D1F] bg-[#FFD738] rounded-xl flex items-center justify-center gap-2 disabled:opacity-60 shadow-lg shadow-[#FFD738]/20"
          >
            {createProduct.isPending ? (
              <Loader2 className="w-4 h-4 animate-spin" />
            ) : (
              <Save className="w-4 h-4" />
            )}
            Simpan Produk
          </button>
        </div>
      </div>
    </div>
  );
}