'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createOrUpdateListingAction } from '@/app/actions'
import { ArrowLeft, Save } from 'lucide-react'
import { Link } from '@/i18n/routing'

interface Option {
  value: string
  label: string
}

interface FormProps {
  listing: any | null
  categories: Option[]
  neighborhoods: Option[]
}

export default function ListingForm({ listing, categories, neighborhoods }: FormProps) {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState<'tr' | 'en' | 'ru'>('tr')
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)

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

    const formData = new FormData(e.currentTarget)
    if (listing) {
      formData.append('id', listing.id)
    }

    try {
      const res = await createOrUpdateListingAction(formData)
      if (res.error) {
        setError(res.error)
      } else {
        setSuccess(true)
        setTimeout(() => {
          router.push('/admin/listings')
          router.refresh()
        }, 1500)
      }
    } catch (err) {
      setError('İşlem sırasında bir hata oluştu.')
    } finally {
      setLoading(false)
    }
  }

  const initialImages = listing?.images || []
  const img1 = initialImages[0]?.url || ''
  const img2 = initialImages[1]?.url || ''

  return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {error && (
        <div className="bg-bougainvillea/10 border border-bougainvillea/25 text-bougainvillea p-4 rounded-xl text-xs font-semibold">
          {error}
        </div>
      )}

      {success && (
        <div className="bg-turquoise/10 border border-turquoise/25 text-turquoise p-4 rounded-xl text-xs font-bold">
          Mekan başarıyla kaydedildi! Yönlendiriliyorsunuz...
        </div>
      )}

      {/* Language tabs */}
      <div className="border-b border-pine/8">
        <div className="flex gap-2">
          {(['tr', 'en', 'ru'] as const).map((lang) => {
            const label = lang === 'tr' ? '🇹🇷 Türkçe' : lang === 'en' ? '🇬🇧 English' : '🇷🇺 Русский'
            const isTabActive = activeTab === lang
            return (
              <button
                key={lang}
                type="button"
                onClick={() => setActiveTab(lang)}
                className={`py-3 px-4 font-heading font-bold text-xs border-b-2 transition lowercase ${
                  isTabActive
                    ? 'border-turquoise text-turquoise'
                    : 'border-transparent text-shutter hover:text-pine'
                }`}
              >
                {label}
              </button>
            )
          })}
        </div>
      </div>

      {/* Multilingual input fields */}
      <div className="space-y-4">
        {/* TR Tab */}
        {activeTab === 'tr' && (
          <div className="space-y-4">
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (TR) *</label>
              <input
                type="text"
                name="nameTr"
                required
                defaultValue={listing?.nameTr || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="Örn: İskele Balık Ocakbaşı"
              />
            </div>
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (TR) *</label>
              <textarea
                name="descriptionTr"
                required
                rows={4}
                defaultValue={listing?.descriptionTr || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="Türkçe tanıtım metni..."
              />
            </div>
          </div>
        )}

        {/* EN Tab */}
        {activeTab === 'en' && (
          <div className="space-y-4">
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (EN) *</label>
              <input
                type="text"
                name="nameEn"
                required
                defaultValue={listing?.nameEn || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="Örn: Iskele Fish & Grill"
              />
            </div>
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (EN) *</label>
              <textarea
                name="descriptionEn"
                required
                rows={4}
                defaultValue={listing?.descriptionEn || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="English description..."
              />
            </div>
          </div>
        )}

        {/* RU Tab */}
        {activeTab === 'ru' && (
          <div className="space-y-4">
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mekan Adı (RU) *</label>
              <input
                type="text"
                name="nameRu"
                required
                defaultValue={listing?.nameRu || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="Örn: Рыбный Гриль Искеле"
              />
            </div>
            <div className="space-y-1.5">
              <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açıklama (RU) *</label>
              <textarea
                name="descriptionRu"
                required
                rows={4}
                defaultValue={listing?.descriptionRu || ''}
                className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
                placeholder="Russian description..."
              />
            </div>
          </div>
        )}
      </div>

      <hr className="border-dashed border-pine/8" />

      {/* Global fields */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {/* Slug */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">URL Slug *</label>
          <input
            type="text"
            name="slug"
            required
            defaultValue={listing?.slug || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="iskele-balik-ocakbasi"
          />
        </div>

        {/* Categories */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Kategori *</label>
          <select
            name="categoryId"
            required
            defaultValue={listing?.categoryId || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink appearance-none"
          >
            <option value="">Kategori seçin...</option>
            {categories.map((c) => (
              <option key={c.value} value={c.value}>
                {c.label}
              </option>
            ))}
          </select>
        </div>

        {/* Neighborhoods */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Mahalle/Bölge *</label>
          <select
            name="neighborhoodId"
            required
            defaultValue={listing?.neighborhoodId || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink appearance-none"
          >
            <option value="">Mahalle seçin...</option>
            {neighborhoods.map((n) => (
              <option key={n.value} value={n.value}>
                {n.label}
              </option>
            ))}
          </select>
        </div>

        {/* Address */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Açık Adres *</label>
          <input
            type="text"
            name="address"
            required
            defaultValue={listing?.address || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
            placeholder="Yat Limanı No:12, Marmaris"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        {/* Phone */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Telefon</label>
          <input
            type="text"
            name="phone"
            defaultValue={listing?.phone || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="+90 252..."
          />
        </div>

        {/* Whatsapp */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">WhatsApp</label>
          <input
            type="text"
            name="whatsapp"
            defaultValue={listing?.whatsapp || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="+90 532..."
          />
        </div>

        {/* Website */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Web Sitesi</label>
          <input
            type="text"
            name="website"
            defaultValue={listing?.website || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="https://..."
          />
        </div>

        {/* Instagram */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Instagram</label>
          <input
            type="text"
            name="instagram"
            defaultValue={listing?.instagram || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="https://instagram.com/..."
          />
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
        {/* Price range */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Fiyat Aralığı (1-3) *</label>
          <select
            name="priceRange"
            required
            defaultValue={listing?.priceRange || 2}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
          >
            <option value="1">₺ (Ekonomik)</option>
            <option value="2">₺₺ (Orta)</option>
            <option value="3">₺₺₺ (Lüks)</option>
          </select>
        </div>

        {/* Rating */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Puan (0.0 - 5.0)</label>
          <input
            type="number"
            name="rating"
            step="0.1"
            min="0"
            max="5"
            defaultValue={listing?.rating || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="4.8"
          />
        </div>

        {/* Latitude */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Enlem (Lat)</label>
          <input
            type="number"
            name="latitude"
            step="0.0001"
            defaultValue={listing?.latitude || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="36.8524"
          />
        </div>

        {/* Longitude */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Boylam (Lng)</label>
          <input
            type="number"
            name="longitude"
            step="0.0001"
            defaultValue={listing?.longitude || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink font-mono"
            placeholder="28.2741"
          />
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        {/* Opening hours */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Çalışma Saatleri</label>
          <input
            type="text"
            name="openingHours"
            defaultValue={listing?.openingHours?.all || ''}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
            placeholder="Örn: 12:00 - 00:00"
          />
        </div>

        {/* Approved toggle */}
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Yerel Onaylı Mührü</label>
          <select
            name="isLocalApproved"
            defaultValue={listing?.isLocalApproved ? 'true' : 'false'}
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink"
          >
            <option value="false">Normal Mekan</option>
            <option value="true">Yerel Onaylı (Mühürlü)</option>
          </select>
        </div>
      </div>

      {/* Image Upload fields */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border-t border-dashed border-pine/8 pt-6">
        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Görsel 1 (Dosya Yükle)</label>
          <input
            type="file"
            name="imageFile1"
            accept="image/*"
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink file:mr-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
          />
          {img1 && (
            <div className="mt-2 text-xs flex items-center gap-2">
              <span className="text-shutter/65">Mevcut Görsel:</span>
              <a href={img1} target="_blank" rel="noopener noreferrer" className="text-turquoise hover:underline font-mono truncate max-w-xs">{img1}</a>
              <input type="hidden" name="imageUrl1" value={img1} />
            </div>
          )}
        </div>

        <div className="space-y-1.5">
          <label className="block text-xs font-mono uppercase tracking-wider text-shutter">Görsel 2 (Dosya Yükle)</label>
          <input
            type="file"
            name="imageFile2"
            accept="image/*"
            className="w-full bg-stone border border-pine/10 rounded-xl px-4 py-3 text-sm focus:ring-1 focus:ring-turquoise outline-none text-ink file:mr-3 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-pine file:text-stone hover:file:opacity-90 cursor-pointer"
          />
          {img2 && (
            <div className="mt-2 text-xs flex items-center gap-2">
              <span className="text-shutter/65">Mevcut Görsel:</span>
              <a href={img2} target="_blank" rel="noopener noreferrer" className="text-turquoise hover:underline font-mono truncate max-w-xs">{img2}</a>
              <input type="hidden" name="imageUrl2" value={img2} />
            </div>
          )}
        </div>
      </div>

      <div className="flex gap-4 pt-4 border-t border-dashed border-pine/8">
        <Link
          href="/admin/listings"
          className="inline-flex items-center gap-1.5 px-5 py-3 border border-pine/20 rounded-xl text-xs font-bold text-pine hover:bg-stone/30 transition duration-150"
        >
          <ArrowLeft className="w-4 h-4" />
          İptal
        </Link>
        
        <button
          type="submit"
          disabled={loading}
          className="inline-flex items-center gap-1.5 px-5 py-3 bg-turquoise hover:bg-turquoise/90 disabled:opacity-75 text-paper rounded-xl text-xs font-bold shadow-sm transition duration-150"
        >
          <Save className="w-4 h-4" />
          {loading ? 'Kaydediliyor...' : 'Kaydet'}
        </button>
      </div>
    </form>
  )
}