"use client"

import { useEffect, useMemo, useState } from "react"
import { useTranslations } from "next-intl"
import {
  Plus,
  Trash2,
  Pencil,
  Shield,
  Users,
  ScrollText,
  Monitor,
  RefreshCw,
  XCircle,
  LogOut,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

import { api } from "@/src/lib/api/client"
import {
  listRoles,
  createMembership,
  updateMembership,
  deleteMembership,
  type Role,
  type Membership,
  type TenantLite,
  type UserLite,
} from "@/src/lib/api/memberships"

import {
  listAuditLogs,
  listSessions,
  revokeSession,
  revokeAllSessions,
  type AuditLog,
  type SessionInfo,
} from "@/src/lib/api/security"

type Tenant = TenantLite
type User = UserLite

type Status = "invited" | "active" | "suspended"
type TabKey = "access" | "audit" | "sessions"

type FormState = {
  id?: number
  tenantId: number | ""
  userId: number | ""
  roles: number[]
  status: Status
  is_owner: boolean
}

const defaultForm: FormState = {
  tenantId: "",
  userId: "",
  roles: [],
  status: "active",
  is_owner: false,
}

export default function AdminSecurityPage() {
  const t = useTranslations("security")

  const [tab, setTab] = useState<TabKey>("access")

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

  const [roles, setRoles] = useState<Role[]>([])
  const [tenants, setTenants] = useState<Tenant[]>([])
  const [users, setUsers] = useState<User[]>([])
  const [memberships, setMemberships] = useState<Membership[]>([])

  // Audit + Sessions
  const [auditLoading, setAuditLoading] = useState(false)
  const [sessionsLoading, setSessionsLoading] = useState(false)
  const [audit, setAudit] = useState<AuditLog[]>([])
  const [sessions, setSessions] = useState<SessionInfo[]>([])

  // Filters (RBAC)
  const [query, setQuery] = useState("")
  const [filterTenantId, setFilterTenantId] = useState<number | "all">("all")
  const [filterStatus, setFilterStatus] = useState<Status | "all">("all")

  // Filters (Audit)
  const [auditQuery, setAuditQuery] = useState("")
  const [auditTenantId, setAuditTenantId] = useState<number | "all">("all")

  // UI modal
  const [open, setOpen] = useState(false)
  const [saving, setSaving] = useState(false)
  const [form, setForm] = useState<FormState>(defaultForm)

  async function loadAccess() {
    setLoading(true)
    setError(null)
    try {
      const [r, ts, us, ms] = await Promise.all([
        listRoles(),
        api.request<Tenant[]>("/tenants/"),
        api.request<User[]>("/users/"),
        api.request<Membership[]>("/memberships/"),
      ])
      setRoles(r)
      setTenants(ts)
      setUsers(us)
      setMemberships(ms)
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    } finally {
      setLoading(false)
    }
  }

  async function loadAudit() {
    setAuditLoading(true)
    setError(null)
    try {
      const logs = await listAuditLogs()
      setAudit(logs)
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    } finally {
      setAuditLoading(false)
    }
  }

  async function loadSessions() {
    setSessionsLoading(true)
    setError(null)
    try {
      const s = await listSessions()
      setSessions(s)
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    } finally {
      setSessionsLoading(false)
    }
  }

  async function loadAll() {
    await loadAccess()
    // audit/sessions chargés à la demande (tab)
  }

  useEffect(() => {
    loadAll()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    if (tab === "audit" && audit.length === 0) loadAudit()
    if (tab === "sessions" && sessions.length === 0) loadSessions()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tab])

  const roleLabelById = useMemo(() => {
    const map = new Map<number, string>()
    for (const r of roles) map.set(r.id, r.label)
    return map
  }, [roles])

  const statusLabel = (s: Status) => {
    if (s === "active") return t("active")
    if (s === "invited") return t("invited")
    return t("suspended")
  }

  const filteredMemberships = useMemo(() => {
    const q = query.trim().toLowerCase()

    return memberships.filter((m) => {
      const tenantObj = typeof m.tenant === "object" ? m.tenant : null
      const tenantId = tenantObj?.id ?? (typeof m.tenant === "number" ? m.tenant : -1)
      const okTenant = filterTenantId === "all" ? true : tenantId === filterTenantId
      const okStatus = filterStatus === "all" ? true : m.status === filterStatus

      if (!q) return okTenant && okStatus

      const userObj = typeof m.user === "object" ? m.user : null
      const tn = tenantObj?.name?.toLowerCase() ?? ""
      const un = (userObj as any)?.full_name?.toLowerCase() ?? ""
      const uu = (userObj as any)?.username?.toLowerCase() ?? ""
      const ue = (userObj as any)?.email?.toLowerCase() ?? ""

      const okSearch = tn.includes(q) || un.includes(q) || uu.includes(q) || ue.includes(q)
      return okTenant && okStatus && okSearch
    })
  }, [memberships, query, filterTenantId, filterStatus])

  const filteredAudit = useMemo(() => {
    const q = auditQuery.trim().toLowerCase()
    return audit.filter((x) => {
      const auditTenId = typeof x.tenant === "object" ? x.tenant?.id : x.tenant
      const okTenant = auditTenantId === "all" ? true : (auditTenId ?? -1) === auditTenantId
      if (!q) return okTenant

      const actor = (x.actor?.full_name || x.actor?.username || x.actor?.email || "").toLowerCase()
      const action = (x.action || "").toLowerCase()
      const target = `${x.entity_type ?? ""} ${x.entity_id ?? ""} ${x.entity_label ?? ""}`.toLowerCase()

      return okTenant && (actor.includes(q) || action.includes(q) || target.includes(q))
    })
  }, [audit, auditQuery, auditTenantId])

  function openCreate() {
    setForm(defaultForm)
    setOpen(true)
  }

  function openEdit(m: Membership) {
    setForm({
      id: m.id,
      tenantId: (m.tenant as any)?.id ?? "",
      userId: (m.user as any)?.id ?? "",
      roles: Array.isArray(m.roles) ? m.roles : [],
      status: m.status,
      is_owner: !!m.is_owner,
    })
    setOpen(true)
  }

  function closeModal() {
    if (saving) return
    setOpen(false)
  }

  function toggleRole(roleId: number) {
    setForm((prev) => {
      const has = prev.roles.includes(roleId)
      return { ...prev, roles: has ? prev.roles.filter((x) => x !== roleId) : [...prev.roles, roleId] }
    })
  }

  async function onSave() {
    setError(null)

    if (!form.tenantId || !form.userId) {
      setError(t("errors.required_tenant_user"))
      return
    }

    setSaving(true)
    try {
      if (form.id) {
        await updateMembership(form.id, {
          roles: form.roles,
          status: form.status,
          is_owner: form.is_owner,
        })
      } else {
        await createMembership({
          tenant: Number(form.tenantId),
          user: Number(form.userId),
          roles: form.roles,
          status: form.status,
          is_owner: form.is_owner,
        })
      }

      setOpen(false)
      await loadAccess()
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    } finally {
      setSaving(false)
    }
  }

  async function onDelete(id: number) {
    if (!confirm(t("confirm_delete_membership"))) return
    setError(null)
    try {
      await deleteMembership(id)
      await loadAccess()
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    }
  }

  async function onRefreshAudit() {
    await loadAudit()
  }

  async function onRefreshSessions() {
    await loadSessions()
  }

  async function onRevokeSession(sessionId: string) {
    if (!confirm(t("confirm_revoke_session"))) return
    setError(null)
    try {
      await revokeSession(sessionId)
      await loadSessions()
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    }
  }

  async function onRevokeAll() {
    if (!confirm(t("confirm_revoke_all"))) return
    setError(null)
    try {
      await revokeAllSessions()
      await loadSessions()
    } catch (e: any) {
      setError(e?.message ?? t("errors.generic"))
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-end justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold flex items-center gap-2">
            <Shield className="h-5 w-5" />
            {t("title")}
          </h1>
          <p className="text-sm text-muted-foreground">{t("subtitle")}</p>
        </div>

        {tab === "access" && (
          <Button onClick={openCreate} className="gap-2">
            <Plus className="h-4 w-4" />
            {t("create")}
          </Button>
        )}
      </div>

      {/* Tabs */}
      <div className="flex flex-wrap gap-2">
        <Button
          variant={tab === "access" ? "default" : "secondary"}
          onClick={() => setTab("access")}
          className="gap-2"
        >
          <Users className="h-4 w-4" />
          {t("tab_access")}
        </Button>

        <Button
          variant={tab === "audit" ? "default" : "secondary"}
          onClick={() => setTab("audit")}
          className="gap-2"
        >
          <ScrollText className="h-4 w-4" />
          {t("tab_audit")}
        </Button>

        <Button
          variant={tab === "sessions" ? "default" : "secondary"}
          onClick={() => setTab("sessions")}
          className="gap-2"
        >
          <Monitor className="h-4 w-4" />
          {t("tab_sessions")}
        </Button>
      </div>

      {error && (
        <div className="rounded-2xl border border-destructive/30 bg-destructive/10 p-4 text-sm">{error}</div>
      )}

      {/* ===========================
          TAB: ACCESS (RBAC)
         =========================== */}
      {tab === "access" && (
        <div className="space-y-6">
          {/* Roles */}
          <div className="rounded-2xl border bg-card p-5 shadow-sm">
            <div className="flex items-center justify-between">
              <h2 className="font-semibold">{t("roles_title")}</h2>
              <span className="text-xs text-muted-foreground">{roles.length}</span>
            </div>

            {loading ? (
              <div className="mt-4 text-sm text-muted-foreground">{t("loading")}</div>
            ) : (
              <div className="mt-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
                {roles.map((r) => (
                  <div key={r.id} className="rounded-xl border bg-background p-3 text-sm flex items-center gap-2">
                    <span className="inline-flex h-7 w-7 items-center justify-center rounded-lg border bg-card">
                      {r.id}
                    </span>
                    <span className="font-medium">{r.label || `Role ${r.id}`}</span>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Memberships */}
          <div className="rounded-2xl border bg-card p-5 shadow-sm space-y-4">
            <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-3">
              <h2 className="font-semibold flex items-center gap-2">
                <Users className="h-5 w-5" />
                {t("memberships_title")}
              </h2>

              <div className="flex flex-col md:flex-row gap-2 w-full xl:w-auto">
                <select
                  className="h-10 rounded-md border bg-background px-3 text-sm w-full md:w-56"
                  value={filterTenantId}
                  onChange={(e) => {
                    const v = e.target.value
                    setFilterTenantId(v === "all" ? "all" : Number(v))
                  }}
                >
                  <option value="all">{t("filters.all_tenants")}</option>
                  {tenants.map((x) => (
                    <option key={x.id} value={x.id}>
                      {x.name}
                    </option>
                  ))}
                </select>

                <select
                  className="h-10 rounded-md border bg-background px-3 text-sm w-full md:w-48"
                  value={filterStatus}
                  onChange={(e) => {
                    const v = e.target.value as any
                    setFilterStatus(v === "all" ? "all" : v)
                  }}
                >
                  <option value="all">{t("filters.all_status")}</option>
                  <option value="active">{t("active")}</option>
                  <option value="invited">{t("invited")}</option>
                  <option value="suspended">{t("suspended")}</option>
                </select>

                <div className="w-full md:w-72">
                  <Input
                    value={query}
                    onChange={(e) => setQuery(e.target.value)}
                    placeholder={t("filters.search_placeholder")}
                  />
                </div>
              </div>
            </div>

            {loading ? (
              <div className="text-sm text-muted-foreground">{t("loading")}</div>
            ) : (
              <div className="overflow-auto rounded-xl border">
                <table className="w-full text-sm">
                  <thead className="bg-muted/40">
                    <tr className="text-left">
                      <th className="p-3">{t("tenant")}</th>
                      <th className="p-3">{t("user")}</th>
                      <th className="p-3">{t("roles")}</th>
                      <th className="p-3">{t("status")}</th>
                      <th className="p-3">{t("owner")}</th>
                      <th className="p-3 text-right">{t("actions")}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredMemberships.map((m) => (
                      <tr key={m.id} className="border-t">
                        <td className="p-3">
                          <div className="font-medium">{(m.tenant as any)?.name ?? "-"}</div>
                          <div className="text-xs text-muted-foreground">{(m.tenant as any)?.slug ?? ""}</div>
                        </td>

                        <td className="p-3">
                          <div className="font-medium">{(m.user as any)?.full_name ?? "-"}</div>
                          <div className="text-xs text-muted-foreground">
                            {(m.user as any)?.email ?? (m.user as any)?.username ?? ""}
                          </div>
                        </td>

                        <td className="p-3">
                          <div className="flex flex-wrap gap-2">
                            {(m.roles || []).map((rid) => (
                              <span key={rid} className="rounded-full border bg-background px-2 py-0.5 text-xs">
                                {roleLabelById.get(rid) ?? `#${rid}`}
                              </span>
                            ))}
                          </div>
                        </td>

                        <td className="p-3">
                          <span className="rounded-full border bg-background px-2 py-0.5 text-xs">
                            {statusLabel(m.status)}
                          </span>
                        </td>

                        <td className="p-3">{m.is_owner ? "✅" : "—"}</td>

                        <td className="p-3">
                          <div className="flex justify-end gap-2">
                            <Button variant="secondary" size="icon" onClick={() => openEdit(m)} title={t("edit")}>
                              <Pencil className="h-4 w-4" />
                            </Button>
                            <Button
                              variant="destructive"
                              size="icon"
                              onClick={() => onDelete(m.id)}
                              title={t("delete")}
                            >
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    ))}

                    {filteredMemberships.length === 0 && (
                      <tr>
                        <td className="p-6 text-center text-muted-foreground" colSpan={6}>
                          {t("empty_memberships")}
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          {/* Modal */}
          {open && (
            <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
              <div className="absolute inset-0 bg-black/40" onClick={closeModal} />

              <div className="relative w-full max-w-xl rounded-2xl border bg-card p-5 shadow-lg">
                <div className="flex items-start justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-semibold">{form.id ? t("edit") : t("create")}</h3>
                    <p className="text-sm text-muted-foreground">{t("modal_help")}</p>
                  </div>
                  <Button variant="secondary" onClick={closeModal} disabled={saving}>
                    {t("cancel")}
                  </Button>
                </div>

                <div className="mt-4 space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div className="space-y-1">
                      <label className="text-sm font-medium">{t("tenant")}</label>
                      <select
                        className="w-full h-10 rounded-md border bg-background px-3 text-sm"
                        value={form.tenantId}
                        onChange={(e) =>
                          setForm((p) => ({ ...p, tenantId: e.target.value ? Number(e.target.value) : "" }))
                        }
                        disabled={saving || !!form.id}
                      >
                        <option value="">—</option>
                        {tenants.map((x) => (
                          <option key={x.id} value={x.id}>
                            {x.name}
                          </option>
                        ))}
                      </select>
                    </div>

                    <div className="space-y-1">
                      <label className="text-sm font-medium">{t("user")}</label>
                      <select
                        className="w-full h-10 rounded-md border bg-background px-3 text-sm"
                        value={form.userId}
                        onChange={(e) =>
                          setForm((p) => ({ ...p, userId: e.target.value ? Number(e.target.value) : "" }))
                        }
                        disabled={saving || !!form.id}
                      >
                        <option value="">—</option>
                        {users.map((u) => (
                          <option key={u.id} value={u.id}>
                            {u.full_name} ({u.username})
                          </option>
                        ))}
                      </select>
                    </div>
                  </div>

                  <div className="space-y-1">
                    <label className="text-sm font-medium">{t("status")}</label>
                    <select
                      className="w-full h-10 rounded-md border bg-background px-3 text-sm"
                      value={form.status}
                      onChange={(e) => setForm((p) => ({ ...p, status: e.target.value as Status }))}
                      disabled={saving}
                    >
                      <option value="active">{t("active")}</option>
                      <option value="invited">{t("invited")}</option>
                      <option value="suspended">{t("suspended")}</option>
                    </select>
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <label className="text-sm font-medium">{t("roles")}</label>
                      <label className="flex items-center gap-2 text-sm">
                        <input
                          type="checkbox"
                          checked={form.is_owner}
                          onChange={(e) => setForm((p) => ({ ...p, is_owner: e.target.checked }))}
                          disabled={saving}
                        />
                        {t("owner")}
                      </label>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                      {roles.map((r) => {
                        const checked = form.roles.includes(r.id)
                        return (
                          <label
                            key={r.id}
                            className="flex items-center gap-2 rounded-xl border bg-background p-3 text-sm"
                          >
                            <input
                              type="checkbox"
                              checked={checked}
                              onChange={() => toggleRole(r.id)}
                              disabled={saving}
                            />
                            <span className="font-medium">{r.label || `Role ${r.id}`}</span>
                          </label>
                        )
                      })}
                    </div>
                  </div>

                  <div className="flex justify-end gap-2 pt-2">
                    <Button variant="secondary" onClick={closeModal} disabled={saving}>
                      {t("cancel")}
                    </Button>
                    <Button onClick={onSave} disabled={saving}>
                      {t("save")}
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ===========================
          TAB: AUDIT
         =========================== */}
      {tab === "audit" && (
        <div className="rounded-2xl border bg-card p-5 shadow-sm space-y-4">
          <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-3">
            <div>
              <h2 className="font-semibold flex items-center gap-2">
                <ScrollText className="h-5 w-5" />
                {t("audit.title")}
              </h2>
              <p className="text-sm text-muted-foreground">{t("audit.subtitle")}</p>
            </div>

            <div className="flex flex-col md:flex-row gap-2 w-full xl:w-auto">
              <select
                className="h-10 rounded-md border bg-background px-3 text-sm w-full md:w-56"
                value={auditTenantId}
                onChange={(e) => {
                  const v = e.target.value
                  setAuditTenantId(v === "all" ? "all" : Number(v))
                }}
              >
                <option value="all">{t("filters.all_tenants")}</option>
                {tenants.map((x) => (
                  <option key={x.id} value={x.id}>
                    {x.name}
                  </option>
                ))}
              </select>

              <div className="w-full md:w-72">
                <Input
                  value={auditQuery}
                  onChange={(e) => setAuditQuery(e.target.value)}
                  placeholder={t("audit.search_placeholder")}
                />
              </div>

              <Button variant="secondary" onClick={onRefreshAudit} className="gap-2" disabled={auditLoading}>
                <RefreshCw className="h-4 w-4" />
                {t("refresh")}
              </Button>
            </div>
          </div>

          {auditLoading ? (
            <div className="text-sm text-muted-foreground">{t("loading")}</div>
          ) : (
            <div className="overflow-auto rounded-xl border">
              <table className="w-full text-sm">
                <thead className="bg-muted/40">
                  <tr className="text-left">
                    <th className="p-3">{t("audit.actor")}</th>
                    <th className="p-3">{t("audit.action")}</th>
                    <th className="p-3">{t("audit.target")}</th>
                    <th className="p-3">{t("audit.tenant")}</th>
                    <th className="p-3">{t("audit.time")}</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredAudit.map((x) => (
                    <tr key={x.id} className="border-t">
                      <td className="p-3">
                        <div className="font-medium">{x.actor?.full_name || x.actor?.username || "-"}</div>
                        <div className="text-xs text-muted-foreground">{x.actor?.email || ""}</div>
                      </td>
                      <td className="p-3">
                        <span className="rounded-full border bg-background px-2 py-0.5 text-xs">
                          {x.action}
                        </span>
                      </td>
                      <td className="p-3">
                        <div className="font-medium">{x.entity_type ?? "-"}</div>
                        <div className="text-xs text-muted-foreground">
                          {x.entity_label ? x.entity_label : x.entity_id ? `#${x.entity_id}` : ""}
                        </div>
                      </td>
                      <td className="p-3">{(x.tenant as any)?.name ?? "—"}</td>
                      <td className="p-3">
                        <span className="text-xs text-muted-foreground">
                          {new Date(x.created_at).toLocaleString()}
                        </span>
                      </td>
                    </tr>
                  ))}

                  {filteredAudit.length === 0 && (
                    <tr>
                      <td className="p-6 text-center text-muted-foreground" colSpan={5}>
                        {t("audit.empty")}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* ===========================
          TAB: SESSIONS
         =========================== */}
      {tab === "sessions" && (
        <div className="rounded-2xl border bg-card p-5 shadow-sm space-y-4">
          <div className="flex flex-col xl:flex-row xl:items-center justify-between gap-3">
            <div>
              <h2 className="font-semibold flex items-center gap-2">
                <Monitor className="h-5 w-5" />
                {t("sessions.title")}
              </h2>
              <p className="text-sm text-muted-foreground">{t("sessions.subtitle")}</p>
            </div>

            <div className="flex flex-wrap gap-2">
              <Button variant="secondary" onClick={onRefreshSessions} className="gap-2" disabled={sessionsLoading}>
                <RefreshCw className="h-4 w-4" />
                {t("refresh")}
              </Button>

              <Button variant="destructive" onClick={onRevokeAll} className="gap-2" disabled={sessionsLoading}>
                <LogOut className="h-4 w-4" />
                {t("sessions.revoke_all")}
              </Button>
            </div>
          </div>

          {sessionsLoading ? (
            <div className="text-sm text-muted-foreground">{t("loading")}</div>
          ) : (
            <div className="overflow-auto rounded-xl border">
              <table className="w-full text-sm">
                <thead className="bg-muted/40">
                  <tr className="text-left">
                    <th className="p-3">{t("sessions.device")}</th>
                    <th className="p-3">{t("sessions.ip")}</th>
                    <th className="p-3">{t("sessions.last_seen")}</th>
                    <th className="p-3 text-right">{t("actions")}</th>
                  </tr>
                </thead>
                <tbody>
                  {sessions.map((s) => (
                    <tr key={s.id} className="border-t">
                      <td className="p-3">
                        <div className="font-medium">{s.user_agent || "—"}</div>
                        <div className="text-xs text-muted-foreground">{s.id}</div>
                      </td>
                      <td className="p-3">{s.ip || "—"}</td>
                      <td className="p-3">
                        <span className="text-xs text-muted-foreground">
                          {s.last_seen ? new Date(s.last_seen).toLocaleString() : "—"}
                        </span>
                      </td>
                      <td className="p-3">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant="destructive"
                            size="icon"
                            onClick={() => onRevokeSession(s.id)}
                            title={t("sessions.revoke")}
                          >
                            <XCircle className="h-4 w-4" />
                          </Button>
                        </div>
                      </td>
                    </tr>
                  ))}

                  {sessions.length === 0 && (
                    <tr>
                      <td className="p-6 text-center text-muted-foreground" colSpan={4}>
                        {t("sessions.empty")}
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  )
}