tessera-ctl/apps/web/src/app/(portal)/admin/tenants/page.tsx

'use client';

import { useCallback, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useAuthStore } from '@/lib/stores/auth-store';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

interface Tenant {
  id: string;
  name: string;
  slug: string;
  isActive: boolean;
  createdAt: string;
  userCount: number;
}

interface TenantFormData {
  name: string;
  slug: string;
}

/**
 * Tenant management page -- SUPER_ADMIN only (D-10).
 */
export default function AdminTenantsPage() {
  const t = useTranslations('admin.tenants');
  const tCommon = useTranslations('common');
  const currentUser = useAuthStore((s) => s.user);

  const [tenants, setTenants] = useState<Tenant[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingTenant, setEditingTenant] = useState<Tenant | null>(null);
  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
  const [formData, setFormData] = useState<TenantFormData>({
    name: '',
    slug: '',
  });

  // Access check: only SUPER_ADMIN
  const hasAccess = currentUser?.role === 'SUPER_ADMIN';

  const fetchTenants = useCallback(async () => {
    try {
      const res = await fetch(`${API_URL}/tenants`, {
        credentials: 'include',
      });
      if (res.ok) {
        setTenants(await res.json());
      }
    } catch {
      // silently fail
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (hasAccess) {
      fetchTenants();
    } else {
      setLoading(false);
    }
  }, [hasAccess, fetchTenants]);

  const openCreate = () => {
    setEditingTenant(null);
    setFormData({ name: '', slug: '' });
    setShowForm(true);
  };

  const openEdit = (tenant: Tenant) => {
    setEditingTenant(tenant);
    setFormData({ name: tenant.name, slug: tenant.slug });
    setShowForm(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const url = editingTenant
      ? `${API_URL}/tenants/${editingTenant.id}`
      : `${API_URL}/tenants`;
    const method = editingTenant ? 'PATCH' : 'POST';

    const body: Record<string, unknown> = editingTenant
      ? { name: formData.name }
      : { name: formData.name, slug: formData.slug };

    try {
      const res = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(body),
      });

      if (res.ok) {
        setShowForm(false);
        fetchTenants();
      }
    } catch {
      // silently fail
    }
  };

  const handleToggleActive = async (tenant: Tenant) => {
    try {
      await fetch(`${API_URL}/tenants/${tenant.id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify({ isActive: !tenant.isActive }),
      });
      fetchTenants();
    } catch {
      // silently fail
    }
  };

  const handleDelete = async (id: string) => {
    try {
      const res = await fetch(`${API_URL}/tenants/${id}`, {
        method: 'DELETE',
        credentials: 'include',
      });
      if (res.ok) {
        setDeleteConfirm(null);
        fetchTenants();
      }
    } catch {
      // silently fail
    }
  };

  if (!hasAccess) {
    return (
      <div className="flex items-center justify-center min-h-[60vh]">
        <p className="text-lg text-muted-foreground">{tCommon('accessDenied')}</p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold text-foreground">{t('title')}</h1>
        <button
          type="button"
          onClick={openCreate}
          className="btn btn-primary"
        >
          {t('create')}
        </button>
      </div>

      {/* Tenants table */}
      {loading ? (
        <p className="text-muted-foreground">{tCommon('loading')}</p>
      ) : tenants.length === 0 ? (
        <p className="text-muted-foreground">{t('noTenants')}</p>
      ) : (
        <div className="overflow-x-auto rounded-md border border-border">
          <table className="w-full text-sm">
            <thead className="bg-muted/50">
              <tr>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('name')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('slug')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('status')}
                </th>
                <th className="px-4 py-3 text-left font-medium text-muted-foreground">
                  {t('userCount')}
                </th>
                <th className="px-4 py-3 text-right font-medium text-muted-foreground">
                  {t('actions')}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {tenants.map((tenant) => (
                <tr
                  key={tenant.id}
                  className="hover:bg-muted/30 transition-colors"
                >
                  <td className="px-4 py-3 font-medium text-foreground">
                    {tenant.name}
                  </td>
                  <td className="px-4 py-3 text-muted-foreground font-mono text-xs">
                    {tenant.slug}
                  </td>
                  <td className="px-4 py-3">
                    <span
                      className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${
                        tenant.isActive
                          ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
                          : 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500'
                      }`}
                    >
                      {tenant.isActive ? tCommon('active') : tCommon('inactive')}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-muted-foreground">
                    {tenant.userCount}
                  </td>
                  <td className="px-4 py-3 text-right">
                    <div className="flex items-center justify-end gap-2">
                      <button
                        type="button"
                        onClick={() => openEdit(tenant)}
                        className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
                      >
                        {tCommon('edit')}
                      </button>
                      <button
                        type="button"
                        onClick={() => handleToggleActive(tenant)}
                        className="rounded px-2 py-1 text-xs text-foreground hover:bg-muted transition-colors"
                      >
                        {tenant.isActive ? tCommon('inactive') : tCommon('active')}
                      </button>
                      <button
                        type="button"
                        onClick={() => setDeleteConfirm(tenant.id)}
                        className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
                      >
                        {tCommon('delete')}
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Create/Edit modal */}
      {showForm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-md rounded-lg bg-card dark:border dark:border-border p-6 shadow-lg">
            <h2 className="text-lg font-bold text-foreground mb-4">
              {editingTenant ? t('edit') : t('create')}
            </h2>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="space-y-2">
                <label htmlFor="tenant-name" className="text-sm font-medium text-foreground">
                  {t('name')}
                </label>
                <input
                  id="tenant-name"
                  type="text"
                  required
                  value={formData.name}
                  onChange={(e) =>
                    setFormData({ ...formData, name: e.target.value })
                  }
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                />
              </div>
              {!editingTenant && (
                <div className="space-y-2">
                  <label htmlFor="tenant-slug" className="text-sm font-medium text-foreground">
                    {t('slug')}
                  </label>
                  <input
                    id="tenant-slug"
                    type="text"
                    required
                    pattern="^[a-z0-9-]+$"
                    value={formData.slug}
                    onChange={(e) =>
                      setFormData({ ...formData, slug: e.target.value })
                    }
                    className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
                    placeholder="my-tenant"
                  />
                </div>
              )}
              <div className="flex justify-end gap-3 pt-2">
                <button
                  type="button"
                  onClick={() => setShowForm(false)}
                  className="btn btn-secondary"
                >
                  {tCommon('cancel')}
                </button>
                <button
                  type="submit"
                  className="btn btn-primary"
                >
                  {tCommon('save')}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Delete confirmation modal */}
      {deleteConfirm && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-full max-w-sm rounded-lg bg-card dark:border dark:border-border p-6 shadow-lg">
            <p className="text-sm text-foreground mb-4">
              {t('deleteConfirm')}
            </p>
            <div className="flex justify-end gap-3">
              <button
                type="button"
                onClick={() => setDeleteConfirm(null)}
                className="btn btn-secondary"
              >
                {tCommon('cancel')}
              </button>
              <button
                type="button"
                onClick={() => handleDelete(deleteConfirm)}
                className="rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground hover:opacity-90 transition-opacity"
              >
                {tCommon('delete')}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}