'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'

interface ProductData {
  id?: number
  slug?: string
  nameTr?: string
  nameEn?: string
  descTr?: string | null
  descEn?: string | null
  category?: string
  size?: string | null
  priceB2B?: number
  priceSelf?: number
  stock?: number
  images?: string
  isActive?: boolean
}

interface Props {
  product?: ProductData
}

const CATEGORIES = ['CUBO', 'RECTA', 'GLOBE', 'OTHER']

function slugify(str: string) {
  return str
    .toLowerCase()
    .replace(/ğ/g, 'g').replace(/ü/g, 'u').replace(/ş/g, 's')
    .replace(/ı/g, 'i').replace(/ö/g, 'o').replace(/ç/g, 'c')
    .replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')
}

export default function AdminProductForm({ product }: Props) {
  const router = useRouter()
  const isEdit = !!product?.id

  const [form, setForm] = useState({
    slug: product?.slug ?? '',
    nameTr: product?.nameTr ?? '',
    nameEn: product?.nameEn ?? '',
    descTr: product?.descTr ?? '',
    descEn: product?.descEn ?? '',
    category: product?.category ?? 'OTHER',
    size: product?.size ?? '',
    priceB2B: product?.priceB2B ?? 0,
    priceSelf: product?.priceSelf ?? 0,
    stock: product?.stock ?? 0,
    isActive: product?.isActive ?? true,
  })

  const [images, setImages] = useState<string[]>(() => {
    try { return JSON.parse(product?.images ?? '[]') } catch { return [] }
  })
  const [uploading, setUploading] = useState(false)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  function handleChange(field: keyof typeof form, value: string | number | boolean) {
    setForm((f) => ({ ...f, [field]: value }))
    if (field === 'nameTr' && !isEdit) {
      setForm((f) => ({ ...f, slug: slugify(String(value)) }))
    }
  }

  async function uploadImage(file: File) {
    setUploading(true)
    try {
      const fd = new FormData()
      fd.append('file', file)
      const res = await fetch('/api/admin/upload', { method: 'POST', body: fd })
      const data = await res.json()
      if (res.ok) setImages((imgs) => [...imgs, data.url])
      else setError(data.error ?? 'Yükleme başarısız')
    } finally {
      setUploading(false)
    }
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (!form.nameTr || !form.nameEn || !form.slug) {
      setError('Türkçe isim, İngilizce isim ve slug zorunludur.')
      return
    }
    setSaving(true)
    setError(null)

    const body = { ...form, images: JSON.stringify(images) }
    const url = isEdit ? `/api/admin/products/${product!.id}` : '/api/admin/products'
    const method = isEdit ? 'PATCH' : 'POST'

    try {
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      })
      const data = await res.json()
      if (!res.ok) { setError(data.error ?? 'Kayıt başarısız'); return }
      router.push('/admin/products')
      router.refresh()
    } catch {
      setError('Bir hata oluştu.')
    } finally {
      setSaving(false)
    }
  }

  const inputCls = 'w-full px-3 py-2.5 rounded-lg border border-sand bg-cream font-body text-sm focus:outline-none focus:border-earth transition-colors'
  const labelCls = 'block font-body text-sm text-brown mb-1.5'

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Temel bilgiler */}
      <div className="bg-white p-6 shadow-sm rounded-xl">
        <h2 className="font-display text-xl text-brown mb-5">Temel Bilgiler</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label className={labelCls}>Türkçe İsim *</label>
            <input type="text" required value={form.nameTr} onChange={e => handleChange('nameTr', e.target.value)} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>İngilizce İsim *</label>
            <input type="text" required value={form.nameEn} onChange={e => handleChange('nameEn', e.target.value)} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Slug *</label>
            <input type="text" required value={form.slug} onChange={e => handleChange('slug', e.target.value)} className={inputCls} placeholder="cubo-s" />
          </div>
          <div>
            <label className={labelCls}>Kategori *</label>
            <select value={form.category} onChange={e => handleChange('category', e.target.value)} className={inputCls}>
              {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
          <div className="sm:col-span-2">
            <label className={labelCls}>Boyut (ör: 40×45, ⌀55)</label>
            <input type="text" value={form.size} onChange={e => handleChange('size', e.target.value)} className={inputCls} placeholder="40×45" />
          </div>
          <div className="sm:col-span-2">
            <label className={labelCls}>Açıklama (TR)</label>
            <textarea rows={3} value={form.descTr} onChange={e => handleChange('descTr', e.target.value)} className={`${inputCls} resize-none`} />
          </div>
          <div className="sm:col-span-2">
            <label className={labelCls}>Açıklama (EN)</label>
            <textarea rows={3} value={form.descEn} onChange={e => handleChange('descEn', e.target.value)} className={`${inputCls} resize-none`} />
          </div>
        </div>
      </div>

      {/* Fiyat & Stok */}
      <div className="bg-white p-6 shadow-sm rounded-xl">
        <h2 className="font-display text-xl text-brown mb-5">Fiyat & Stok</h2>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-5">
          <div>
            <label className={labelCls}>B2B Fiyat (USD) *</label>
            <input type="number" step="0.01" min="0" required value={form.priceB2B} onChange={e => handleChange('priceB2B', parseFloat(e.target.value))} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Vitrin Fiyatı (USD) *</label>
            <input type="number" step="0.01" min="0" required value={form.priceSelf} onChange={e => handleChange('priceSelf', parseFloat(e.target.value))} className={inputCls} />
          </div>
          <div>
            <label className={labelCls}>Stok *</label>
            <input type="number" min="0" required value={form.stock} onChange={e => handleChange('stock', parseInt(e.target.value))} className={inputCls} />
          </div>
        </div>
      </div>

      {/* Görseller */}
      <div className="bg-white p-6 shadow-sm rounded-xl">
        <h2 className="font-display text-xl text-brown mb-5">Görseller</h2>
        <div className="flex flex-wrap gap-3 mb-4">
          {images.map((url, i) => (
            <div key={i} className="relative">
              <img src={url} alt="" className="w-20 h-20 object-cover bg-sand rounded-lg" />
              <button
                type="button"
                onClick={() => setImages(imgs => imgs.filter((_, j) => j !== i))}
                className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 text-white rounded-full text-xs flex items-center justify-center"
              >×</button>
            </div>
          ))}
        </div>
        <label className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-dashed border-earth text-earth font-body text-sm hover:bg-earth hover:text-cream transition-colors">
          {uploading ? 'Yükleniyor...' : '+ Görsel Ekle'}
          <input
            type="file"
            accept="image/*"
            className="hidden"
            disabled={uploading}
            onChange={e => { if (e.target.files?.[0]) uploadImage(e.target.files[0]) }}
          />
        </label>
        <p className="font-body text-xs text-brown/40 mt-2">Görseller /public/uploads/ klasörüne kaydedilir.</p>
      </div>

      {/* Aktif/Pasif */}
      <div className="bg-white p-6 shadow-sm rounded-xl flex items-center gap-4">
        <label className="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            checked={form.isActive}
            onChange={e => handleChange('isActive', e.target.checked)}
            className="w-4 h-4 accent-brown"
          />
          <span className="font-body text-sm text-brown">Ürün aktif (sitede görünür)</span>
        </label>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg px-4 py-3 font-body text-sm text-red-600">
          {error}
        </div>
      )}

      <div className="flex gap-3">
        <button
          type="submit"
          disabled={saving}
          className="px-8 py-2.5 rounded-lg bg-brown text-cream font-body text-sm tracking-widest uppercase hover:bg-earth transition-colors disabled:opacity-60"
        >
          {saving ? 'Kaydediliyor...' : isEdit ? 'Güncelle' : 'Ürün Oluştur'}
        </button>
        <button
          type="button"
          onClick={() => router.push('/admin/products')}
          className="px-6 py-2.5 rounded-lg border border-sand text-brown font-body text-sm hover:border-earth transition-colors"
        >
          İptal
        </button>
      </div>
    </form>
  )
}