4ventures-client-portal/src/components/TenantSwitcher.tsx

'use client';

import React, { useEffect, useState, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { ChevronDown, Eye, Building2 } from 'lucide-react';

type TenantOpt = { id: string; name: string; slug: string };

export default function TenantSwitcher({
  initialName,
  isAgency,
}: {
  initialName: string;
  isAgency: boolean;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [tenants, setTenants] = useState<TenantOpt[]>([]);
  const [activeName, setActiveName] = useState(initialName);
  const [activeId, setActiveId] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();

  useEffect(() => {
    if (!isAgency) return;
    const match = document.cookie.match(/(?:^|; )4v_view_tenant_name=([^;]*)/);
    const idMatch = document.cookie.match(/(?:^|; )4v_view_tenant_id=([^;]*)/);
    if (match?.[1]) setActiveName(decodeURIComponent(match[1]));
    if (idMatch?.[1]) setActiveId(decodeURIComponent(idMatch[1]));

    fetch('/api/admin/portfolio')
      .then((r) => r.json())
      .then((d) => {
        const list = (d.portfolio || [])
          .filter((t: { agency_followed?: boolean }) => t.agency_followed !== false)
          .map((t: { id: string; name: string; slug: string }) => ({
            id: t.id,
            name: t.name,
            slug: t.slug,
          }));
        setTenants(list);
      })
      .catch(() => {});
  }, [isAgency]);

  if (!isAgency) {
    return (
      <span className="bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200">
        {initialName}
      </span>
    );
  }

  async function select(tenant: TenantOpt | null) {
    setOpen(false);
    await fetch('/api/admin/active-tenant', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ tenantId: tenant?.id ?? null }),
    });
    setActiveId(tenant?.id ?? null);
    setActiveName(tenant?.name ?? 'Vista global agencia');
    startTransition(() => router.refresh());
  }

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200 hover:bg-brand-100 transition-colors"
      >
        <Eye className="w-3.5 h-3.5" />
        <span className="max-w-[200px] truncate">
          {activeId ? activeName : 'Vista global agencia'}
        </span>
        <ChevronDown className="w-3.5 h-3.5 opacity-70" />
      </button>
      {open && (
        <div className="absolute left-0 top-full mt-2 z-50 w-72 rounded-xl border border-gray-200 bg-white shadow-xl py-1 max-h-80 overflow-y-auto">
          <button
            type="button"
            disabled={pending}
            onClick={() => select(null)}
            className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
          >
            <Building2 className="w-3.5 h-3.5 text-amber-500" />
            Vista global agencia
          </button>
          <div className="border-t border-gray-100 my-1" />
          {tenants.length === 0 ? (
            <p className="px-3 py-2 text-xs text-gray-500">
              Sin tenants · da de alta en Agencia OS
            </p>
          ) : (
            tenants.map((t) => (
              <button
                key={t.id}
                type="button"
                disabled={pending}
                onClick={() => select(t)}
                className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 ${
                  activeId === t.id ? 'text-brand-600' : 'text-gray-800'
                }`}
              >
                <span className="font-medium">{t.name}</span>
                <span className="block text-[10px] text-gray-500">{t.slug}</span>
              </button>
            ))
          )}
        </div>
      )}
    </div>
  );
}