import { mockDb } from '@/lib/mockDb'
import { createOrUpdateNeighborhoodAction } from '@/app/actions'
import { Link } from '@/i18n/routing'
import { ArrowLeft } from 'lucide-react'
import { redirect } from 'next/navigation'

export default async function NeighborhoodFormPage({ params }: { params: Promise<{ id: string, locale: string }> }) {
  const resolvedParams = await params
  const isNew = resolvedParams.id === 'new'
  let neighborhood = null

  if (!isNew) {
    neighborhood = await mockDb.getNeighborhoodById(resolvedParams.id)
    if (!neighborhood) {
      redirect(`/${resolvedParams.locale}/admin/neighborhoods`)
    }
  }

  return (
    <div className="max-w-2xl mx-auto space-y-6">
      <div className="flex items-center gap-4">
        <Link href="/admin/neighborhoods" className="p-2 hover:bg-stone-deep rounded-full transition-colors text-shutter hover:text-ink">
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <div>
          <h2 className="text-2xl font-heading font-extrabold text-pine lowercase">
            {isNew ? 'yeni mahalle' : 'mahalleyi düzenle'}
          </h2>
        </div>
      </div>

      <div className="bg-paper p-6 rounded-2xl shadow-sm border border-pine/8">
        <form action={createOrUpdateNeighborhoodAction as any} className="space-y-5">
          <input type="hidden" name="id" value={resolvedParams.id} />
          
          <div>
            <label className="block text-xs font-bold text-pine uppercase tracking-wider mb-1.5">Slug (URL)</label>
            <input 
              type="text" 
              name="slug" 
              defaultValue={neighborhood?.slug || ''} 
              required 
              className="w-full bg-stone-deep/30 border border-pine/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-turquoise/50"
              placeholder="orn: tepe-mahallesi"
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-pine uppercase tracking-wider mb-1.5">Adı (TR)</label>
            <input 
              type="text" 
              name="nameTr" 
              defaultValue={neighborhood?.nameTr || ''} 
              required 
              className="w-full bg-stone-deep/30 border border-pine/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-turquoise/50"
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-pine uppercase tracking-wider mb-1.5">Adı (EN)</label>
            <input 
              type="text" 
              name="nameEn" 
              defaultValue={neighborhood?.nameEn || ''} 
              required 
              className="w-full bg-stone-deep/30 border border-pine/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-turquoise/50"
            />
          </div>

          <div>
            <label className="block text-xs font-bold text-pine uppercase tracking-wider mb-1.5">Adı (RU)</label>
            <input 
              type="text" 
              name="nameRu" 
              defaultValue={neighborhood?.nameRu || ''} 
              required 
              className="w-full bg-stone-deep/30 border border-pine/10 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-turquoise/50"
            />
          </div>

          <div className="pt-4 flex justify-end gap-3">
            <Link 
              href="/admin/neighborhoods"
              className="px-6 py-3 text-sm font-bold text-shutter hover:text-ink transition-colors"
            >
              İptal
            </Link>
            <button 
              type="submit"
              className="px-6 py-3 bg-pine hover:bg-pine/90 text-paper text-sm font-bold rounded-xl transition-colors shadow-sm"
            >
              Kaydet
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}