import { useState, useEffect } from 'react'
import {
  Input, Select, Button, Drawer, Form, InputNumber, message,
  Empty, Modal, Popconfirm, Spin, Pagination,
} from 'antd'
import {
  PlusOutlined, SearchOutlined, ReloadOutlined, PauseCircleOutlined,
  CloseOutlined, CalendarOutlined,
} from '@ant-design/icons'
import {
  createTenant, getPlans, getTenants, resumeTenant, suspendTenant, updateTenant,
  type Plan, type Tenant,
} from '@/services/api'

const statusMeta: Record<string, { text: string; bg: string; color: string; dot: string }> = {
  normal: { text: '正常', bg: '#f0fdf4', color: '#16a34a', dot: '#16a34a' },
  expiring: { text: '即将到期', bg: '#fffbeb', color: '#d97706', dot: '#d97706' },
  suspended: { text: '已暂停', bg: '#f1f5f9', color: '#64748b', dot: '#94a3b8' },
  expired: { text: '已过期', bg: '#fef2f2', color: '#dc2626', dot: '#dc2626' },
}

const statusFilters = [
  { key: undefined as string | undefined, label: '全部' },
  { key: 'normal', label: '正常' },
  { key: 'expiring', label: '即将到期' },
  { key: 'suspended', label: '已暂停' },
  { key: 'expired', label: '已过期' },
]

const avatarPalettes = [
  { bg: '#dbeafe', color: '#1d4ed8' },
  { bg: '#fef3c7', color: '#92400e' },
  { bg: '#d1fae5', color: '#047857' },
  { bg: '#ede9fe', color: '#6d28d9' },
  { bg: '#ffedd5', color: '#c2410c' },
  { bg: '#fce7f3', color: '#be185d' },
]

function avatarPalette(name: string) {
  let h = 0
  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h)
  return avatarPalettes[Math.abs(h) % avatarPalettes.length]
}

function maskPhone(phone?: string) {
  if (!phone) return '—'
  const d = phone.replace(/\D/g, '')
  if (d.length === 11) return `${d.slice(0, 3)}****${d.slice(7)}`
  return phone
}

function fmtDate(iso?: string) {
  if (!iso) return '—'
  return new Date(iso).toLocaleDateString('zh-CN')
}

function planBadgeStyle(name: string) {
  if (name.includes('企业')) return { bg: '#dbeafe', color: '#2563eb' }
  if (name.includes('专业')) return { bg: '#f3e8ff', color: '#7c3aed' }
  if (name.includes('基础')) return { bg: '#f0fdf4', color: '#16a34a' }
  return { bg: '#f1f5f9', color: '#64748b' }
}

const StatusPill = ({ status }: { status: string }) => {
  const s = statusMeta[status] || statusMeta.normal
  return (
    <span
      className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[11px] font-medium whitespace-nowrap"
      style={{ backgroundColor: s.bg, color: s.color }}
    >
      <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: s.dot }} />
      {s.text}
    </span>
  )
}

const Tenants = () => {
  const [tenants, setTenants] = useState<Tenant[]>([])
  const [plans, setPlans] = useState<Plan[]>([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [search, setSearch] = useState('')
  const [searchInput, setSearchInput] = useState('')
  const [statusFilter, setStatusFilter] = useState<string>()
  const [drawerOpen, setDrawerOpen] = useState(false)
  const [detailOpen, setDetailOpen] = useState(false)
  const [selectedTenant, setSelectedTenant] = useState<Tenant | null>(null)
  const [saving, setSaving] = useState(false)
  const [renewMonths, setRenewMonths] = useState(12)
  const [createdCreds, setCreatedCreds] = useState<{ username: string; password: string; name: string } | null>(null)
  const [createForm] = Form.useForm()
  const [editForm] = Form.useForm()

  useEffect(() => { loadTenants() }, [page, pageSize, search, statusFilter])
  useEffect(() => {
    getPlans()
      .then(res => setPlans(Array.isArray(res.data) ? res.data.filter(p => p.status === 'active') : []))
      .catch(() => setPlans([]))
  }, [])

  const loadTenants = async () => {
    setLoading(true)
    try {
      const res = await getTenants({ search, status: statusFilter, page, pageSize })
      setTenants(res.list)
      setTotal(res.total)
    } catch {
      setTenants([])
    } finally {
      setLoading(false)
    }
  }

  const planName = (planId: number | null) => {
    if (!planId) return '—'
    return plans.find(p => p.id === planId)?.name || `#${planId}`
  }

  const openCreate = () => {
    createForm.resetFields()
    createForm.setFieldsValue({ duration_months: 12, seat_count: 5 })
    setDrawerOpen(true)
  }

  const openDetail = (record: Tenant, editFocus = false) => {
    setSelectedTenant(record)
    editForm.setFieldsValue({
      edit_contact_name: record.contact_name,
      edit_contact_phone: record.contact_phone,
      edit_contact_email: record.contact_email,
      edit_seat_count: record.seat_count,
      edit_plan_id: record.plan_id,
    })
    setRenewMonths(12)
    setDetailOpen(true)
    if (editFocus) {
      // detail drawer shows edit form always
    }
  }

  const handleCreate = async (values: {
    name: string; contact_name: string; contact_phone: string; contact_email?: string
    plan_id?: number; seat_count?: number; duration_months?: number
  }) => {
    setSaving(true)
    try {
      const res = await createTenant({
        name: values.name.trim(),
        contact_name: values.contact_name.trim(),
        contact_phone: values.contact_phone.trim(),
        contact_email: values.contact_email?.trim() || '',
        plan_id: values.plan_id,
        seat_count: values.seat_count,
        duration_months: values.duration_months || 12,
      })
      message.success('租户开通成功')
      setDrawerOpen(false)
      createForm.resetFields()
      setCreatedCreds({
        username: res.data.admin_username,
        password: res.data.admin_password,
        name: res.data.tenant.name,
      })
      setPage(1)
      await loadTenants()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '开通失败')
    } finally {
      setSaving(false)
    }
  }

  const handleSuspend = async (id: number) => {
    try {
      await suspendTenant(id)
      message.success('已暂停')
      if (selectedTenant?.id === id) {
        setSelectedTenant({ ...selectedTenant, status: 'suspended' })
      }
      await loadTenants()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '暂停失败')
    }
  }

  const handleResume = async (id: number) => {
    try {
      await resumeTenant(id)
      message.success('已恢复')
      if (selectedTenant?.id === id) {
        setSelectedTenant({ ...selectedTenant, status: 'normal' })
      }
      await loadTenants()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '恢复失败')
    }
  }

  const handleUpdateSeats = async () => {
    if (!selectedTenant) return
    setSaving(true)
    try {
      const values = await editForm.validateFields()
      const res = await updateTenant(selectedTenant.id, {
        contact_name: values.edit_contact_name,
        contact_phone: values.edit_contact_phone,
        contact_email: values.edit_contact_email,
        seat_count: values.edit_seat_count,
        plan_id: values.edit_plan_id,
      })
      message.success('已更新')
      setSelectedTenant(res.data)
      await loadTenants()
    } catch (e) {
      if (e instanceof Error && e.message) message.error(e.message)
    } finally {
      setSaving(false)
    }
  }

  const handleRenew = async () => {
    if (!selectedTenant || renewMonths < 1) return
    setSaving(true)
    try {
      const base = selectedTenant.expire_at && new Date(selectedTenant.expire_at) > new Date()
        ? new Date(selectedTenant.expire_at)
        : new Date()
      base.setMonth(base.getMonth() + renewMonths)
      const res = await updateTenant(selectedTenant.id, {
        expire_at: base.toISOString(),
        status: selectedTenant.status === 'expired' || selectedTenant.status === 'expiring' ? 'normal' : selectedTenant.status,
      })
      message.success(`已续费 ${renewMonths} 个月`)
      setSelectedTenant(res.data)
      await loadTenants()
    } catch (e) {
      message.error(e instanceof Error ? e.message : '续费失败')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="h-full flex flex-col min-h-0 bg-slate-50/60 overflow-hidden">
      {/* 顶栏 56px */}
      <header
        className="shrink-0 px-6 flex items-center justify-between border-b border-slate-200/80 bg-white"
        style={{ height: 'var(--header-height)' }}
      >
        <div className="min-w-0">
          <h1 className="text-sm font-bold text-slate-900 m-0 truncate">租户管理</h1>
          <p className="text-[11px] text-slate-400 m-0 leading-tight">全平台企业租户全生命周期管理与授权配额</p>
        </div>
      </header>

      {/* 工具栏 */}
      <div className="shrink-0 px-6 py-3.5 bg-white border-b border-slate-100">
        <div className="flex items-center justify-between gap-3 flex-wrap">
          <div className="flex items-center gap-3 flex-1 min-w-[280px] flex-wrap">
            <div className="flex items-center gap-2 px-3 h-8.5 rounded-xl max-w-sm w-full bg-slate-100/80 border border-slate-200/70 focus-within:bg-white focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-50 transition-all">
              <SearchOutlined className="text-slate-400 text-xs shrink-0" />
              <input
                type="text"
                placeholder="搜索租户名称、联系人、手机号..."
                value={searchInput}
                onChange={e => setSearchInput(e.target.value)}
                onKeyDown={e => {
                  if (e.key === 'Enter') {
                    setSearch(searchInput.trim())
                    setPage(1)
                  }
                }}
                className="flex-1 min-w-0 bg-transparent border-0 outline-none text-xs text-slate-800 placeholder:text-slate-400"
              />
            </div>
            <div className="flex items-center gap-0.5 p-0.5 rounded-xl bg-slate-100 border border-slate-200/60">
              {statusFilters.map(f => {
                const active = statusFilter === f.key || (!statusFilter && f.key === undefined)
                return (
                  <button
                    key={f.label}
                    type="button"
                    onClick={() => { setStatusFilter(f.key); setPage(1) }}
                    className={`px-3 py-1 text-xs rounded-lg border-0 cursor-pointer transition-all ${
                      active
                        ? 'bg-white text-blue-600 font-semibold shadow-xs'
                        : 'bg-transparent text-slate-500 hover:text-slate-800'
                    }`}
                  >
                    {f.label}
                  </button>
                )
              })}
            </div>
          </div>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            className="!h-8 !px-3.5 !text-xs !font-semibold !bg-gradient-to-r !from-blue-600 !to-blue-500 !rounded-lg shadow-sm shadow-blue-500/20"
            onClick={openCreate}
          >
            开通新租户
          </Button>
        </div>
      </div>

      {/* 表格 */}
      <div className="flex-1 min-h-0 overflow-auto px-6 py-5">
        <div className="rounded-2xl border border-slate-200/80 bg-white shadow-xs overflow-hidden">
          {loading ? (
            <div className="py-20 flex justify-center"><Spin size="large" /></div>
          ) : tenants.length === 0 ? (
            <Empty className="py-16" description="暂无租户" />
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full" style={{ minWidth: 960 }}>
                <thead>
                  <tr className="bg-slate-50/80 border-b border-slate-100">
                    {['公司名称', '联系人', '手机号', '套餐类型', '坐席', '开通日期', '到期日期', '状态', '操作'].map((h, i) => (
                      <th
                        key={h}
                        className={`px-4 py-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400 whitespace-nowrap ${
                          i === 4 || i === 8 ? 'text-center' : 'text-left'
                        }`}
                      >
                        {h}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {tenants.map(record => {
                    const pal = avatarPalette(record.name)
                    const pname = planName(record.plan_id)
                    const pstyle = planBadgeStyle(pname)
                    return (
                      <tr
                        key={record.id}
                        className="border-t border-slate-100 hover:bg-slate-50/80 cursor-pointer transition-colors"
                        onClick={() => openDetail(record)}
                      >
                        <td className="px-4 py-3">
                          <div className="flex items-center gap-2.5 min-w-0">
                            <div
                              className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold shrink-0 shadow-2xs"
                              style={{ backgroundColor: pal.bg, color: pal.color }}
                            >
                              {record.name.slice(0, 1)}
                            </div>
                            <div className="min-w-0">
                              <div className="text-xs font-semibold text-slate-800 truncate">{record.name}</div>
                              <div className="text-[10px] text-slate-400 truncate">
                                ID: T{String(record.id).padStart(4, '0')}
                              </div>
                            </div>
                          </div>
                        </td>
                        <td className="px-4 py-3 text-xs text-slate-700 whitespace-nowrap">
                          {record.contact_name || '—'}
                        </td>
                        <td className="px-4 py-3 text-xs text-slate-600 whitespace-nowrap font-mono">
                          {maskPhone(record.contact_phone)}
                        </td>
                        <td className="px-4 py-3">
                          <span
                            className="inline-flex px-2 py-0.5 rounded-md text-[11px] font-medium whitespace-nowrap"
                            style={{ backgroundColor: pstyle.bg, color: pstyle.color }}
                          >
                            {pname}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-xs text-center text-slate-800 font-bold tabular-nums">
                          {record.seat_count}
                        </td>
                        <td className="px-4 py-3 text-xs text-slate-400 whitespace-nowrap">
                          {fmtDate(record.created_at)}
                        </td>
                        <td className="px-4 py-3 text-xs text-slate-700 font-medium whitespace-nowrap">
                          {fmtDate(record.expire_at)}
                        </td>
                        <td className="px-4 py-3">
                          <StatusPill status={record.status} />
                        </td>
                        <td className="px-4 py-3" onClick={e => e.stopPropagation()}>
                          <div className="flex items-center justify-center gap-1 text-xs">
                            <button
                              type="button"
                              className="px-2 py-1 rounded-md font-semibold text-blue-600 hover:bg-blue-50 border-0 bg-transparent cursor-pointer transition-colors"
                              onClick={() => openDetail(record)}
                            >
                              查看
                            </button>
                            <button
                              type="button"
                              className="px-1.5 py-1 rounded text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
                              onClick={() => openDetail(record, true)}
                            >
                              编辑
                            </button>
                            <span className="text-neutral-200">|</span>
                            <button
                              type="button"
                              className="px-1.5 py-1 rounded text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
                              onClick={() => openDetail(record)}
                            >
                              续费
                            </button>
                            {record.status !== 'suspended' ? (
                              <>
                                <span className="text-neutral-200">|</span>
                                <Popconfirm title="确认暂停该租户？" onConfirm={() => handleSuspend(record.id)}>
                                  <button
                                    type="button"
                                    className="px-1.5 py-1 rounded text-neutral-500 hover:bg-neutral-100 border-0 bg-transparent cursor-pointer"
                                  >
                                    暂停
                                  </button>
                                </Popconfirm>
                              </>
                            ) : (
                              <>
                                <span className="text-neutral-200">|</span>
                                <button
                                  type="button"
                                  className="px-1.5 py-1 rounded text-[#2563eb] hover:bg-blue-50 border-0 bg-transparent cursor-pointer"
                                  onClick={() => handleResume(record.id)}
                                >
                                  恢复
                                </button>
                              </>
                            )}
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>

        {total > 0 && (
          <div className="flex items-center justify-between mt-4">
            <span className="text-sm text-neutral-500">
              共 <span className="font-medium text-neutral-700">{total}</span> 个租户
            </span>
            <Pagination
              current={page}
              total={total}
              pageSize={pageSize}
              showSizeChanger
              pageSizeOptions={[10, 20, 50]}
              size="small"
              onChange={(p, ps) => {
                setPage(p)
                if (ps !== pageSize) {
                  setPageSize(ps)
                  setPage(1)
                }
              }}
            />
          </div>
        )}
      </div>

      {/* 开通抽屉 */}
      <Drawer
        title={null}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        width={440}
        closable={false}
        styles={{ body: { padding: 0 }, header: { display: 'none' } }}
      >
        <div className="h-full flex flex-col">
          <div className="h-14 px-5 flex items-center justify-between border-b border-neutral-200 shrink-0">
            <span className="font-semibold text-neutral-900">开通新账号</span>
            <button
              type="button"
              className="w-8 h-8 rounded-md flex items-center justify-center text-neutral-400 hover:bg-neutral-100 border-0 bg-transparent cursor-pointer"
              onClick={() => setDrawerOpen(false)}
            >
              <CloseOutlined className="text-xs" />
            </button>
          </div>
          <div className="flex-1 overflow-y-auto px-5 py-4">
            <Form form={createForm} layout="vertical" onFinish={handleCreate}>
              <Form.Item name="name" label="公司名称" rules={[{ required: true }, { min: 2, max: 100 }]}>
                <Input placeholder="公司全称" />
              </Form.Item>
              <Form.Item name="contact_name" label="联系人" rules={[{ required: true }]}>
                <Input />
              </Form.Item>
              <Form.Item name="contact_phone" label="手机号" rules={[{ required: true }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]}>
                <Input />
              </Form.Item>
              <Form.Item name="contact_email" label="邮箱" rules={[{ type: 'email', message: '邮箱格式不正确' }]}>
                <Input />
              </Form.Item>
              <Form.Item name="plan_id" label="套餐">
                <Select
                  allowClear
                  placeholder="选择套餐"
                  options={plans.map(p => ({ value: p.id, label: `${p.name} · ¥${p.price_monthly}/月` }))}
                />
              </Form.Item>
              <Form.Item name="seat_count" label="坐席数量">
                <InputNumber min={1} max={500} className="!w-full" />
              </Form.Item>
              <Form.Item name="duration_months" label="开通时长（月）">
                <InputNumber min={1} max={36} className="!w-full" />
              </Form.Item>
              <Button type="primary" htmlType="submit" block loading={saving} className="!h-9">
                确认开通
              </Button>
            </Form>
          </div>
        </div>
      </Drawer>

      {/* 详情/编辑/续费 */}
      <Drawer
        title={null}
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        width={420}
        closable={false}
        styles={{ body: { padding: 0 }, header: { display: 'none' } }}
      >
        {selectedTenant && (
          <div className="h-full flex flex-col">
            <div className="h-14 px-5 flex items-center justify-between border-b border-neutral-200 shrink-0">
              <span className="font-semibold text-neutral-900">租户详情</span>
              <button
                type="button"
                className="w-8 h-8 rounded-md flex items-center justify-center text-neutral-400 hover:bg-neutral-100 border-0 bg-transparent cursor-pointer"
                onClick={() => setDetailOpen(false)}
              >
                <CloseOutlined className="text-xs" />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto px-5 py-4 space-y-5">
              <div className="flex items-center gap-3">
                {(() => {
                  const pal = avatarPalette(selectedTenant.name)
                  return (
                    <div
                      className="w-12 h-12 rounded-lg flex items-center justify-center text-lg font-bold shrink-0"
                      style={{ backgroundColor: pal.bg, color: pal.color }}
                    >
                      {selectedTenant.name.slice(0, 1)}
                    </div>
                  )
                })()}
                <div className="min-w-0">
                  <div className="text-base font-semibold text-neutral-900 truncate">{selectedTenant.name}</div>
                  <div className="mt-1 flex items-center gap-2">
                    <StatusPill status={selectedTenant.status} />
                    <span className="text-xs text-neutral-400">T{String(selectedTenant.id).padStart(4, '0')}</span>
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-3 text-sm">
                <div className="rounded-lg bg-neutral-50 border border-neutral-100 p-3">
                  <div className="text-[11px] text-neutral-400 mb-0.5">套餐</div>
                  <div className="font-medium text-neutral-800">{planName(selectedTenant.plan_id)}</div>
                </div>
                <div className="rounded-lg bg-neutral-50 border border-neutral-100 p-3">
                  <div className="text-[11px] text-neutral-400 mb-0.5">坐席</div>
                  <div className="font-medium text-neutral-800">{selectedTenant.seat_count}</div>
                </div>
                <div className="rounded-lg bg-neutral-50 border border-neutral-100 p-3">
                  <div className="text-[11px] text-neutral-400 mb-0.5">开通</div>
                  <div className="font-medium text-neutral-800">{fmtDate(selectedTenant.created_at)}</div>
                </div>
                <div className="rounded-lg bg-neutral-50 border border-neutral-100 p-3">
                  <div className="text-[11px] text-neutral-400 mb-0.5">到期</div>
                  <div className="font-medium text-neutral-800">{fmtDate(selectedTenant.expire_at)}</div>
                </div>
              </div>

              <div>
                <div className="text-xs font-semibold text-neutral-500 mb-2">联系与配置</div>
                <Form form={editForm} layout="vertical" size="small">
                  <Form.Item name="edit_contact_name" label="联系人"><Input /></Form.Item>
                  <Form.Item name="edit_contact_phone" label="手机号"><Input /></Form.Item>
                  <Form.Item name="edit_contact_email" label="邮箱"><Input /></Form.Item>
                  <Form.Item name="edit_plan_id" label="套餐">
                    <Select
                      allowClear
                      options={plans.map(p => ({ value: p.id, label: `${p.name} · ¥${p.price_monthly}/月` }))}
                    />
                  </Form.Item>
                  <Form.Item name="edit_seat_count" label="坐席数">
                    <InputNumber min={1} className="!w-full" />
                  </Form.Item>
                </Form>
                <Button type="primary" block loading={saving} onClick={handleUpdateSeats} className="!h-9">
                  保存修改
                </Button>
              </div>

              <div className="border-t border-neutral-100 pt-4">
                <div className="text-xs font-semibold text-neutral-500 mb-2 flex items-center gap-1">
                  <CalendarOutlined /> 续费
                </div>
                <div className="flex items-center gap-2">
                  <Select
                    value={renewMonths}
                    onChange={setRenewMonths}
                    className="!flex-1"
                    options={[
                      { value: 1, label: '1 个月' },
                      { value: 3, label: '3 个月' },
                      { value: 6, label: '6 个月' },
                      { value: 12, label: '12 个月' },
                      { value: 24, label: '24 个月' },
                    ]}
                  />
                  <Button loading={saving} onClick={handleRenew}>续费</Button>
                </div>
              </div>

              <div className="flex gap-2 pt-1">
                {selectedTenant.status !== 'suspended' ? (
                  <Popconfirm title="确认暂停该租户？" onConfirm={() => handleSuspend(selectedTenant.id)}>
                    <Button danger block icon={<PauseCircleOutlined />}>暂停租户</Button>
                  </Popconfirm>
                ) : (
                  <Button block icon={<ReloadOutlined />} onClick={() => handleResume(selectedTenant.id)}>
                    恢复租户
                  </Button>
                )}
              </div>
            </div>
          </div>
        )}
      </Drawer>

      <Modal
        title="开通成功"
        open={Boolean(createdCreds)}
        onCancel={() => setCreatedCreds(null)}
        onOk={() => setCreatedCreds(null)}
        okText="知道了"
        cancelButtonProps={{ style: { display: 'none' } }}
      >
        {createdCreds && (
          <div className="space-y-2 text-sm">
            <p className="m-0">
              租户 <strong>{createdCreds.name}</strong> 已开通，请妥善保存登录信息：
            </p>
            <div className="bg-neutral-50 border border-neutral-200 rounded-lg p-3 space-y-1">
              <div>管理员账号：<code className="text-[#2563eb]">{createdCreds.username}</code></div>
              <div>初始密码：<code className="text-[#2563eb]">{createdCreds.password}</code></div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  )
}

export default Tenants