"use client"

import { useEffect, useState } from "react"
import { useParams } from "next/navigation"
import { Loader2, AlertTriangle } from "lucide-react"

import { getTenant, type Tenant } from "@/src/lib/api/tenants"
import { TenantForm } from "../../_components/TenantForm"

export default function EditTenantPage() {
  const { id } = useParams<{ id: string }>()

  const [tenant,  setTenant]  = useState<Tenant | null>(null)
  const [loading, setLoading] = useState(true)
  const [error,   setError]   = useState<string | null>(null)

  useEffect(() => {
    getTenant(Number(id))
      .then(setTenant)
      .catch((e) => setError(e?.message ?? "Erreur lors du chargement"))
      .finally(() => setLoading(false))
  }, [id])

  if (loading) {
    return (
      <div className="flex items-center justify-center gap-2 py-24 text-sm text-slate-400">
        <Loader2 className="h-5 w-5 animate-spin" />
        Chargement du tenant…
      </div>
    )
  }

  if (error || !tenant) {
    return (
      <div className="flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 px-5 py-4 text-sm text-red-700">
        <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
        {error ?? "Tenant introuvable"}
      </div>
    )
  }

  return <TenantForm existing={tenant} />
}