'use client'

import { useState, useRef } from 'react'
import { useRouter } from '@/i18n/routing'
import { saveWidgetPartnerAction } from '@/app/actions'
import { CheckCircle, XCircle, ArrowLeft, Copy, Code } from 'lucide-react'
import { Link } from '@/i18n/routing'
import { WidgetPartner } from '@prisma/client'

type Neighborhood = {
  id: string
  slug: string
  nameTr: string
}

export default function WidgetPartnerForm({
  partner,
  neighborhoods,
  locale
}: {
  partner: WidgetPartner | null
  neighborhoods: Neighborhood[]
  locale: string
}) {
  const router = useRouter()
  const [error, setError] = useState<string>('')
  const [loading, setLoading] = useState(false)
  const [copied, setCopied] = useState(false)
  const formRef = useRef<HTMLFormElement>(null)

  const isEditing = !!partner

  const [isHidden, setIsHidden] = useState(partner ? Boolean((partner as any).isHidden) : false)
  const [selectedNeighborhood, setSelectedNeighborhood] = useState(partner?.neighborhoodSlug || '')

  const embedCode = partner
    ? [
        '<!-- Marmaris Local Widget -->',
        '<div',
        '  data-marmaris-widget',
        `  data-neighborhood="${selectedNeighborhood}"`,
        '  data-limit="3"',
        '  data-lang="tr"',
        isHidden ? '  style="display:none;"' : '',
        '></div>',
        '<script src="https://marmarislocal.com/widget.js" async></script>'
      ].filter(Boolean).join('\n')
    : ''

  const handleCopy = () => {
    if (embedCode) {
      navigator.clipboard.writeText(embedCode)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    if (!formRef.current) return

    try {
      const formData = new FormData(formRef.current)
      
      const result = await saveWidgetPartnerAction(formData)
      if (result.error) {
        setError(result.error)
      } else {
        router.push('/admin/widget-partners')
        router.refresh()
      }
    } catch (err: any) {
      setError(err.message || 'Bir hata oluştu')
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="space-y-6 max-w-4xl">
      <div className="flex items-center gap-4">
        <Link href="/admin/widget-partners" className="p-2 hover:bg-stone/20 rounded-full transition-colors">
          <ArrowLeft className="w-5 h-5 text-shutter" />
        </Link>
        <div>
          <h2 className="text-3xl font-heading font-extrabold text-pine lowercase">
            {isEditing ? 'widget partneri düzenle' : 'yeni widget partneri'}
          </h2>
          <p className="text-ink/65 text-xs font-medium mt-1">
            Harici web sitesi bilgilerini girin ve embed kodunu alın.
          </p>
        </div>
      </div>

      {isEditing && (
        <div className="bg-pine/5 border border-pine/10 p-6 rounded-2xl">
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-heading font-bold text-pine flex items-center gap-2">
              <Code className="w-5 h-5 text-turquoise" />
              Widget Embed Kodu
            </h3>
            <button
              type="button"
              onClick={handleCopy}
              className="flex items-center gap-1.5 px-3 py-1.5 bg-white border border-pine/10 rounded-lg text-xs font-bold text-pine hover:border-turquoise hover:text-turquoise transition-colors"
            >
              {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
              {copied ? 'Kopyalandı' : 'Kodu Kopyala'}
            </button>
          </div>
          <p className="text-xs text-ink/70 mb-4">
            Aşağıdaki kodu kopyalayarak partnerin web sitesine yerleştirin. Bu kod, sitenizden backlink almayı sağlar.
          </p>
          <pre className="bg-pine text-white p-4 rounded-xl text-xs overflow-x-auto font-mono whitespace-pre-wrap">
            {embedCode}
          </pre>
        </div>
      )}

      <form ref={formRef} onSubmit={handleSubmit} className="bg-paper border border-pine/8 rounded-2xl p-6 shadow-sm space-y-6">
        <input type="hidden" name="id" value={partner?.id || 'new'} />

        {error && (
          <div className="p-4 bg-bougainvillea/10 text-bougainvillea rounded-xl text-sm flex items-start gap-3">
            <XCircle className="w-5 h-5 shrink-0" />
            <span>{error}</span>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="space-y-1.5">
            <label htmlFor="name" className="text-xs font-bold text-pine block">Site Adı <span className="text-bougainvillea">*</span></label>
            <input
              type="text"
              id="name"
              name="name"
              required
              defaultValue={partner?.name || ''}
              className="w-full bg-stone/30 border border-pine/10 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-turquoise focus:ring-1 focus:ring-turquoise transition-all"
              placeholder="Örn: Marmaris Haber"
            />
          </div>

          <div className="space-y-1.5">
            <label htmlFor="url" className="text-xs font-bold text-pine block">Site Linki (URL) <span className="text-bougainvillea">*</span></label>
            <input
              type="url"
              id="url"
              name="url"
              required
              defaultValue={partner?.url || ''}
              className="w-full bg-stone/30 border border-pine/10 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-turquoise focus:ring-1 focus:ring-turquoise transition-all"
              placeholder="https://marmarishaber.com"
            />
          </div>

          <div className="space-y-1.5">
            <label htmlFor="neighborhoodSlug" className="text-xs font-bold text-pine block">Hangi Bölgenin Widget'ı?</label>
            <select
              id="neighborhoodSlug"
              name="neighborhoodSlug"
              value={selectedNeighborhood}
              onChange={(e) => setSelectedNeighborhood(e.target.value)}
              className="w-full bg-stone/30 border border-pine/10 rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:border-turquoise focus:ring-1 focus:ring-turquoise transition-all"
            >
              <option value="">Tüm Marmaris (Karışık)</option>
              {neighborhoods.map(n => (
                <option key={n.id} value={n.slug}>{n.nameTr}</option>
              ))}
            </select>
            <p className="text-[10px] text-shutter mt-1">Eğer seçilirse widget sadece o bölgedeki mekanları gösterir.</p>
          </div>

          <div className="flex flex-col justify-center pt-6 space-y-4">
            <label className="flex items-center gap-3 cursor-pointer group">
              <div className="relative">
                <input 
                  type="checkbox" 
                  name="isActive" 
                  value="true" 
                  defaultChecked={partner ? partner.isActive : true}
                  className="peer sr-only" 
                />
                <div className="w-11 h-6 bg-stone-deep/20 rounded-full peer peer-checked:bg-turquoise transition-colors duration-300"></div>
                <div className="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 peer-checked:translate-x-5 shadow-sm"></div>
              </div>
              <div>
                <span className="text-sm font-bold text-pine block group-hover:text-turquoise transition-colors">Aktif Durum</span>
                <span className="text-[10px] text-shutter">Bu widget yayında mı?</span>
              </div>
            </label>

            <label className="flex items-center gap-3 cursor-pointer group">
              <div className="relative">
                <input 
                  type="checkbox" 
                  name="isHidden" 
                  value="true" 
                  checked={isHidden}
                  onChange={(e) => setIsHidden(e.target.checked)}
                  className="peer sr-only" 
                />
                <div className="w-11 h-6 bg-stone-deep/20 rounded-full peer peer-checked:bg-pine transition-colors duration-300"></div>
                <div className="absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-300 peer-checked:translate-x-5 shadow-sm"></div>
              </div>
              <div>
                <span className="text-sm font-bold text-pine block group-hover:text-pine/80 transition-colors">Gizli Widget</span>
                <span className="text-[10px] text-shutter">Indexlensin ama görünmesin</span>
              </div>
            </label>
          </div>
        </div>

        <div className="flex justify-between pt-4 border-t border-pine/8">
          {isEditing && (
            <button
              type="button"
              disabled={loading}
              onClick={async () => {
                if (confirm('Bu partneri silmek istediğinize emin misiniz?')) {
                  setLoading(true)
                  try {
                    await import('@/app/actions').then(m => m.deleteWidgetPartnerAction(partner!.id))
                    router.push('/admin/widget-partners')
                    router.refresh()
                  } catch (e: any) {
                    setError(e.message)
                    setLoading(false)
                  }
                }
              }}
              className="text-bougainvillea hover:text-bougainvillea/80 px-4 py-2 text-sm font-bold transition-colors"
            >
              Sil
            </button>
          )}
          <div className="ml-auto">
            <button
              type="submit"
              disabled={loading}
              className="bg-pine text-white px-6 py-2.5 rounded-xl font-bold text-sm hover:bg-turquoise transition-colors disabled:opacity-50 flex items-center gap-2"
            >
              {loading ? 'Kaydediliyor...' : 'Kaydet'}
              {!loading && <CheckCircle className="w-4 h-4" />}
            </button>
          </div>
        </div>
      </form>
    </div>
  )
}