'use client'
import { useState, useEffect, useRef } from 'react'
import type { CatalogProduct } from '@/types/products'
import type { MockupTemplate } from '@/types/mockup'

interface Props {
  product: CatalogProduct
  onClose: () => void
}

interface Metafield {
  namespace: string
  key: string
  value: string
  type: string
}

async function urlToBase64(url: string): Promise<string> {
  const res = await fetch(`/api/images/proxy?url=${encodeURIComponent(url)}`)
  if (!res.ok) throw new Error('Impossible de charger l\'image')
  const blob = await res.blob()
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve((reader.result as string).split(',')[1])
    reader.onerror = reject
    reader.readAsDataURL(blob)
  })
}

export function MockupModal({ product, onClose }: Props) {
  const [templates, setTemplates] = useState<MockupTemplate[]>([])
  const [families, setFamilies] = useState<string[]>([])
  const [metafields, setMetafields] = useState<Metafield[]>([])
  const [loadingMeta, setLoadingMeta] = useState(true)

  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(null)
  const [family, setFamily] = useState('')
  const [placement, setPlacement] = useState<string>('')
  const [selectedMeta, setSelectedMeta] = useState<string[]>([])
  const [cutoutB64, setCutoutB64] = useState<string | null>(null)
  const [selectedImageUrl, setSelectedImageUrl] = useState<string | null>(null)
  const [loadingImage, setLoadingImage] = useState(false)

  const [instruction, setInstruction] = useState('')
  const [generating, setGenerating] = useState(false)
  const [resultB64, setResultB64] = useState<string | null>(null)
  const [uploading, setUploading] = useState(false)
  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  const fileRef = useRef<HTMLInputElement>(null)
  const templateFileRef = useRef<HTMLInputElement>(null)
  const [uploadingTemplate, setUploadingTemplate] = useState(false)

  useEffect(() => {
    Promise.all([
      fetch('/api/mockup/templates').then(r => r.json()),
      fetch('/api/sheets/tabs').then(r => r.json()),
      fetch(`/api/mockup/product-meta/${product.shopifyId}`).then(r => r.json()),
      product.ref ? fetch(`/api/products/sheet-info?ref=${encodeURIComponent(product.ref)}`).then(r => r.ok ? r.json() : null) : Promise.resolve(null),
    ]).then(([tplData, tabsData, metaData, sheetData]) => {
      setTemplates(tplData as MockupTemplate[])
      const tabs: string[] = (tabsData.tabs ?? []).filter((t: string) =>
        !['COLLECTIONS', 'LIVRAISONS', 'ECOPART', 'RECAP'].some(x => t.toUpperCase().includes(x))
      )
      setFamilies(tabs)
      const sheetFamille = sheetData?.product?.famille
      setFamily(sheetFamille && tabs.includes(sheetFamille) ? sheetFamille : tabs[0] ?? '')
      setMetafields(metaData.metafields ?? [])
    }).finally(() => setLoadingMeta(false))
  }, [product.shopifyId, product.ref])

  const isCarrelage = family.toLowerCase().includes('carrelage')

  const filteredTemplates = templates.filter(t => {
    if (t.family !== family && t.family !== 'Tous') return false
    if (isCarrelage && placement && t.placement && t.placement !== placement) return false
    return true
  })

  const dimensionStr = selectedMeta.length > 0
    ? selectedMeta.map(key => {
        const mf = metafields.find(m => `${m.namespace}.${m.key}` === key)
        return mf ? `${mf.key}: ${mf.value}` : ''
      }).filter(Boolean).join(', ')
    : undefined

  const selectExistingImage = async (url: string) => {
    setSelectedImageUrl(url)
    setCutoutB64(null)
    setLoadingImage(true)
    setError(null)
    try {
      const b64 = await urlToBase64(url)
      setCutoutB64(b64)
    } catch {
      setError('Impossible de charger cette image')
      setSelectedImageUrl(null)
    } finally {
      setLoadingImage(false)
    }
  }

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setSelectedImageUrl(null)
    const reader = new FileReader()
    reader.onload = ev => setCutoutB64((ev.target?.result as string).split(',')[1])
    reader.readAsDataURL(file)
  }

  const uploadTemplate = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    setUploadingTemplate(true)
    const form = new FormData()
    form.append('name', file.name.replace(/\.[^.]+$/, ''))
    form.append('family', family || 'Tous')
    form.append('description', '')
    form.append('image', file)
    const res = await fetch('/api/mockup/templates', { method: 'POST', body: form })
    const tpl = await res.json() as MockupTemplate
    setTemplates(prev => [...prev, tpl])
    setSelectedTemplate(tpl.id)
    setUploadingTemplate(false)
  }

  const toggleMeta = (key: string) => {
    setSelectedMeta(prev => prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key])
  }

  const generate = async () => {
    if (!selectedTemplate || !cutoutB64) return
    setGenerating(true)
    setError(null)
    setResultB64(null)
    try {
      const res = await fetch('/api/mockup/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          templateId: selectedTemplate,
          productImageBase64: cutoutB64,
          productName: product.title,
          family: family || 'Tous',
          placement: placement || undefined,
          dimensions: dimensionStr,
          instruction: instruction || undefined,
        }),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error)
      setResultB64(data.imageBase64)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Erreur')
    } finally {
      setGenerating(false)
    }
  }

  const upload = async () => {
    if (!resultB64) return
    setUploading(true)
    try {
      const res = await fetch('/api/images/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ shopifyProductId: product.shopifyId, imageBase64: resultB64, filename: `${product.ref}-mockup.jpg` }),
      })
      const data = await res.json()
      if (!res.ok) throw new Error(data.error)
      setUploadedUrl(data.url)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Erreur upload')
    } finally {
      setUploading(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
      onClick={e => { if (e.target === e.currentTarget) onClose() }}>
      <div className="bg-slate-800 border border-slate-700 rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">

        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-slate-700 sticky top-0 bg-slate-800 z-10">
          <div>
            <h2 className="text-white font-semibold text-sm">Créer un mockup</h2>
            <p className="text-gray-400 text-xs mt-0.5">
              {product.title} <span className="font-mono text-indigo-300">{product.ref}</span>
            </p>
          </div>
          <button type="button" onClick={onClose} className="text-gray-400 hover:text-white text-lg leading-none">✕</button>
        </div>

        <div className="p-4 space-y-5">

          {/* 1. Image de base */}
          <section>
            <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide mb-2">1. Image du produit</h3>
            {product.images.length > 0 && (
              <div className="mb-2">
                <p className="text-xs text-gray-400 mb-1.5">Images existantes</p>
                <div className="flex gap-2 flex-wrap">
                  {product.images.map((url, i) => (
                    <button key={i} type="button" onClick={() => selectExistingImage(url)}
                      className={`relative rounded-lg overflow-hidden border-2 transition-all ${selectedImageUrl === url ? 'border-indigo-500' : 'border-slate-600 hover:border-slate-400'}`}>
                      <img src={url} alt={`Image ${i + 1}`} className="w-16 h-16 object-cover" />
                      {loadingImage && selectedImageUrl === url && (
                        <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
                          <span className="text-xs text-white">…</span>
                        </div>
                      )}
                    </button>
                  ))}
                </div>
              </div>
            )}
            <div>
              <p className="text-xs text-gray-400 mb-1">Ou uploader une image découpée (PNG)</p>
              <input ref={fileRef} type="file" accept="image/*" onChange={handleFileUpload} className="text-xs text-gray-300" />
            </div>
            {cutoutB64 && !loadingImage && (
              <p className="text-xs text-green-400 mt-1">✓ Image prête</p>
            )}
          </section>

          {/* 2. Famille + placement */}
          <section>
            <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide mb-2">2. Famille</h3>
            {families.length > 0 ? (
              <div className="space-y-2">
                <select value={family} onChange={e => { setFamily(e.target.value); setPlacement('') }}
                  className="w-full bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:ring-1 focus:ring-indigo-500">
                  {families.map(f => <option key={f}>{f}</option>)}
                </select>
                {isCarrelage && (
                  <div>
                    <p className="text-xs text-gray-400 mb-1.5">Placement</p>
                    <div className="flex gap-2">
                      {[{ val: 'sol', label: 'Sol' }, { val: 'mur', label: 'Mur (faïence)' }].map(({ val, label }) => (
                        <button key={val} type="button" onClick={() => setPlacement(p => p === val ? '' : val)}
                          className={`px-3 py-1.5 rounded text-xs font-medium transition-colors ${placement === val ? 'bg-indigo-600 text-white' : 'bg-slate-700 text-gray-300 hover:bg-slate-600'}`}>
                          {label}
                        </button>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            ) : (
              <p className="text-xs text-gray-500">{loadingMeta ? 'Chargement…' : 'Aucune famille disponible'}</p>
            )}
          </section>

          {/* 3. Caractéristiques (metafields) */}
          {metafields.length > 0 && (
            <section>
              <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide mb-2">3. Caractéristiques à inclure dans le prompt</h3>
              <div className="space-y-1 max-h-36 overflow-y-auto">
                {metafields.map(mf => {
                  const key = `${mf.namespace}.${mf.key}`
                  return (
                    <label key={key} className="flex items-center gap-2 cursor-pointer group">
                      <input type="checkbox" checked={selectedMeta.includes(key)} onChange={() => toggleMeta(key)}
                        className="rounded border-slate-600 bg-slate-700 text-indigo-500 focus:ring-indigo-500" />
                      <span className="text-xs text-gray-300 group-hover:text-white">
                        <span className="font-medium">{mf.key}</span>
                        <span className="text-gray-500 ml-1">{mf.value}</span>
                      </span>
                    </label>
                  )
                })}
              </div>
              {dimensionStr && (
                <p className="text-xs text-indigo-300 mt-1.5">Inclus dans le prompt : {dimensionStr}</p>
              )}
            </section>
          )}

          {/* 4. Template */}
          <section>
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-xs font-semibold text-gray-300 uppercase tracking-wide">
                {metafields.length > 0 ? '4.' : '3.'} Image de référence (template)
              </h3>
              <button type="button" onClick={() => templateFileRef.current?.click()}
                disabled={uploadingTemplate}
                className="text-xs text-indigo-400 hover:text-indigo-300 disabled:opacity-40">
                {uploadingTemplate ? 'Upload…' : '+ Uploader une nouvelle'}
              </button>
              <input ref={templateFileRef} type="file" accept="image/*" className="hidden" onChange={uploadTemplate} />
            </div>
            {filteredTemplates.length === 0 ? (
              <p className="text-xs text-gray-500">Aucun template pour cette famille. Uploadez-en un ci-dessus.</p>
            ) : (
              <div className="grid grid-cols-4 gap-2">
                {filteredTemplates.map(t => (
                  <button key={t.id} type="button" onClick={() => setSelectedTemplate(t.id)}
                    className={`relative rounded-lg overflow-hidden border-2 transition-all ${selectedTemplate === t.id ? 'border-indigo-500' : 'border-slate-600 hover:border-slate-400'}`}>
                    <img src={`/api/mockup/templates/image/${t.filename}`} alt={t.name} className="w-full h-16 object-cover" />
                    <div className="absolute bottom-0 left-0 right-0 bg-black/60 px-1 py-0.5">
                      <p className="text-xs text-white truncate">{t.name}</p>
                    </div>
                  </button>
                ))}
              </div>
            )}
          </section>

          {/* Generate */}
          <button type="button" onClick={generate}
            disabled={!selectedTemplate || !cutoutB64 || generating || loadingImage}
            className="w-full py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium disabled:opacity-40 hover:bg-indigo-500 transition-colors">
            {generating ? 'Génération en cours…' : 'Générer le mockup'}
          </button>

          {error && <p className="text-xs text-red-400">{error}</p>}

          {/* Result */}
          {resultB64 && (
            <div className="space-y-3">
              <img src={`data:image/jpeg;base64,${resultB64}`} alt="Mockup" className="w-full rounded-lg border border-slate-600" />
              <div className="flex gap-2">
                <input type="text" value={instruction} onChange={e => setInstruction(e.target.value)}
                  placeholder="Instruction pour regénérer (optionnel)…"
                  className="flex-1 bg-slate-700 border border-slate-600 rounded px-2 py-1.5 text-xs text-white focus:outline-none focus:ring-1 focus:ring-indigo-500" />
                <button type="button" onClick={generate} disabled={generating}
                  className="px-3 py-1.5 rounded bg-slate-600 text-xs text-white hover:bg-slate-500 disabled:opacity-40">
                  {generating ? '…' : '↺ Regénérer'}
                </button>
              </div>
              {uploadedUrl ? (
                <p className="text-xs text-green-400">✓ Uploadé sur Shopify</p>
              ) : (
                <button type="button" onClick={upload} disabled={uploading}
                  className="w-full py-2 rounded-lg bg-emerald-600 text-white text-sm font-medium disabled:opacity-40 hover:bg-emerald-500 transition-colors">
                  {uploading ? 'Upload…' : '↑ Uploader sur Shopify'}
                </button>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}