'use client'

import { useEffect, useState } from 'react'
import { useI18n } from '@/lib/i18n/client'

type Membership = {
  tenantId: string
  tenantName: string
  role: string
  isCurrent: boolean
}

export default function SwitchTenantClient() {
  const { t } = useI18n()
  const [memberships, setMemberships] = useState<Membership[]>([])
  const [loading, setLoading] = useState(true)
  const [switching, setSwitching] = useState<string | null>(null)

  useEffect(() => {
    fetch('/api/tenant/memberships')
      .then((r) => r.json())
      .then((data) => {
        setMemberships(data)
        setLoading(false)
      })
      .catch(() => setLoading(false))
  }, [])

  async function handleSwitch(tenantId: string) {
    setSwitching(tenantId)
    try {
      const res = await fetch('/api/tenant/switch', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ tenantId }),
      })
      if (res.ok) {
        window.location.href = '/inbox'
      }
    } finally {
      setSwitching(null)
    }
  }

  if (loading) {
    return (
      <div className="mx-auto max-w-lg px-4 py-12">
        <p className="text-sm text-gray-500">{t('switchTenant.loading')}</p>
      </div>
    )
  }

  if (memberships.length <= 1) {
    window.location.replace('/inbox')
    return null
  }

  return (
    <div className="mx-auto max-w-lg px-4 py-12">
      <h1 className="mb-1 text-xl font-semibold text-gray-900">{t('switchTenant.title')}</h1>
      <p className="mb-8 text-sm text-gray-500">
        {t('switchTenant.intro')}
      </p>
      <ul className="divide-y divide-gray-100 rounded-lg border border-gray-200 bg-white">
        {memberships.map((m) => (
          <li key={m.tenantId} className="flex items-center justify-between px-4 py-3">
            <div>
              <p className="text-sm font-medium text-gray-900">{m.tenantName}</p>
              <p className="text-xs text-gray-400 capitalize">{m.role.replace('_', ' ')}</p>
            </div>
            {m.isCurrent ? (
              <span className="text-xs font-medium text-emerald-600">{t('switchTenant.current')}</span>
            ) : (
              <button
                onClick={() => handleSwitch(m.tenantId)}
                disabled={switching === m.tenantId}
                className="rounded-md bg-gray-900 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-700 disabled:opacity-50"
              >
                {switching === m.tenantId ? t('switchTenant.switching') : t('switchTenant.switch')}
              </button>
            )}
          </li>
        ))}
      </ul>
    </div>
  )
}