'use client';

import { type AvailableTenant, useAuth } from '@/components/providers';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { useToast } from '@/hooks/use-toast';
import { cn } from '@/lib/utils';
import { AlertTriangle, Building2, Check, Loader2, Search } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { useMemo, useState } from 'react';

function entornoBadge(entorno: AvailableTenant['entorno']) {
  if (entorno === 'produccion') {
    return (
      <span className="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-amber-800">
        Producción
      </span>
    );
  }
  return (
    <span className="inline-flex items-center rounded-full bg-muted px-2.5 py-1 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
      Demo
    </span>
  );
}

function TenantRow({
  tenant,
  onSelect,
  busy,
}: {
  tenant: AvailableTenant;
  onSelect: (tenant: AvailableTenant) => void;
  busy: boolean;
}) {
  return (
    <button
      type="button"
      disabled={tenant.current || busy}
      onClick={() => onSelect(tenant)}
      className={cn(
        'flex w-full items-center gap-3 rounded-2xl border px-4 py-4 text-left transition-colors',
        tenant.current
          ? 'cursor-default border-border-strong bg-foreground text-background'
          : 'border-border bg-surface hover:border-border-strong hover:bg-muted active:bg-muted',
        busy && !tenant.current && 'opacity-50',
      )}
    >
      <span
        className={cn(
          'flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border text-sm font-bold',
          tenant.current
            ? 'border-background/20 bg-background/15 text-background'
            : 'border-border bg-muted text-muted-foreground',
        )}
      >
        <Building2 className="h-5 w-5" />
      </span>
      <span className="min-w-0 flex-1">
        <span className="flex items-center gap-2">
          <span className="truncate text-sm font-bold">{tenant.nombre}</span>
          {tenant.current ? <Check className="h-4 w-4 shrink-0" /> : null}
        </span>
        <span
          className={cn(
            'mt-0.5 block truncate text-xs',
            tenant.current ? 'text-background/70' : 'text-muted-foreground',
          )}
        >
          {tenant.codigo}
        </span>
      </span>
      {entornoBadge(tenant.entorno)}
    </button>
  );
}

export function TenantSwitcher() {
  const { tenants, tenantsLoading, switchTenant } = useAuth();
  const { toast } = useToast();
  const router = useRouter();

  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');
  const [busy, setBusy] = useState(false);
  const [pendingProdTenant, setPendingProdTenant] = useState<AvailableTenant | null>(null);

  const current = tenants.find((t) => t.current) ?? null;

  const filtered = useMemo(() => {
    const term = search.trim().toLowerCase();
    if (!term) return tenants;
    return tenants.filter(
      (t) => t.nombre.toLowerCase().includes(term) || t.codigo.toLowerCase().includes(term),
    );
  }, [tenants, search]);

  const misTenants = filtered.filter((t) => t.via === 'tenant');
  const deplataforma = filtered.filter((t) => t.via === 'plataforma');

  // No tiene sentido ofrecer el switcher si esta identidad solo puede ver
  // el tenant en el que ya esta — evita ruido para el 90% de los usuarios
  // que nunca van a cambiar de cliente.
  if (!tenantsLoading && tenants.length <= 1) {
    return null;
  }

  const performSwitch = async (tenant: AvailableTenant) => {
    setBusy(true);
    try {
      await switchTenant(tenant.codigo);
      setOpen(false);
      setPendingProdTenant(null);
      setSearch('');
      toast({
        variant: 'success',
        title: 'Cliente cambiado',
        description: `Ahora estas operando sobre "${tenant.nombre}".`,
      });
      router.push('/dashboard');
    } catch (error: any) {
      toast({
        variant: 'destructive',
        title: 'No se pudo cambiar de cliente',
        description: error?.message || 'Intenta de nuevo.',
      });
    } finally {
      setBusy(false);
    }
  };

  const handleSelect = (tenant: AvailableTenant) => {
    if (tenant.current || busy) return;

    // Confirmacion reforzada solo para producción: cambiar de cliente/sitio
    // entre bases demo es rutina; entrar a datos reales de un cliente merece
    // un paso extra antes de ejecutar la consulta que sea.
    if (tenant.entorno === 'produccion') {
      setPendingProdTenant(tenant);
      return;
    }

    void performSwitch(tenant);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) {
          setSearch('');
          setPendingProdTenant(null);
        }
      }}
    >
      <Button
        type="button"
        variant="outline"
        onClick={() => setOpen(true)}
        className="h-11 min-w-0 max-w-[220px] justify-start gap-2 rounded-2xl border-border bg-surface px-3"
      >
        <Building2 className="h-4 w-4 shrink-0 text-muted-foreground" />
        <span className="hidden min-w-0 flex-1 truncate text-left text-sm font-semibold text-foreground sm:inline">
          {current?.nombre || 'Seleccionar cliente'}
        </span>
      </Button>

      <DialogContent className="sm:max-w-lg">
        {pendingProdTenant ? (
          <DialogBody>
            <div className="flex items-start gap-3 rounded-xl bg-warning-soft p-4">
              <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-amber-600" />
              <div>
                <p className="text-sm font-semibold text-amber-900">
                  Vas a cambiar a un sitio de PRODUCCIÓN
                </p>
                <p className="mt-1 text-sm text-amber-800">
                  &quot;{pendingProdTenant.nombre}&quot; ({pendingProdTenant.codigo}) tiene datos
                  reales de un cliente. Confirma que queres operar ahi.
                </p>
              </div>
            </div>

            <div className="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end [&>*]:w-full sm:[&>*]:w-auto">
              <Button
                type="button"
                variant="outline"
                size="lg"
                disabled={busy}
                onClick={() => setPendingProdTenant(null)}
              >
                Cancelar
              </Button>
              <Button
                type="button"
                size="lg"
                className="bg-warning text-warning-foreground hover:bg-warning/90"
                disabled={busy}
                onClick={() => void performSwitch(pendingProdTenant)}
              >
                {busy ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Cambiando...
                  </>
                ) : (
                  `Sí, entrar a ${pendingProdTenant.nombre}`
                )}
              </Button>
            </div>
          </DialogBody>
        ) : (
          <>
            <DialogHeader>
              <DialogTitle>Cambiar cliente y sitio</DialogTitle>
              <DialogDescription>
                Elegí a qué tenant querés entrar. El cambio reemite tu sesión, nunca es solo
                visual.
              </DialogDescription>
            </DialogHeader>

            <div className="shrink-0 border-b border-border px-5 py-4 sm:px-6">
              <div className="relative">
                <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtle-foreground" />
                <Input
                  autoFocus
                  value={search}
                  onChange={(event) => setSearch(event.target.value)}
                  placeholder="Buscar por nombre o código"
                  aria-label="Buscar cliente"
                  className="h-12 pl-9"
                />
              </div>
            </div>

            <DialogBody className="space-y-5">
              {tenantsLoading ? (
                <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
                  <Loader2 className="h-4 w-4 animate-spin" />
                  Cargando clientes...
                </div>
              ) : null}

              {!tenantsLoading && misTenants.length > 0 ? (
                <div>
                  <p className="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-subtle-foreground">
                    Tus clientes
                  </p>
                  <div className="space-y-2">
                    {misTenants.map((tenant) => (
                      <TenantRow
                        key={tenant.tenantId}
                        tenant={tenant}
                        onSelect={handleSelect}
                        busy={busy}
                      />
                    ))}
                  </div>
                </div>
              ) : null}

              {!tenantsLoading && deplataforma.length > 0 ? (
                <div>
                  <p className="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wider text-subtle-foreground">
                    Todos (acceso de plataforma)
                  </p>
                  <div className="space-y-2">
                    {deplataforma.map((tenant) => (
                      <TenantRow
                        key={tenant.tenantId}
                        tenant={tenant}
                        onSelect={handleSelect}
                        busy={busy}
                      />
                    ))}
                  </div>
                </div>
              ) : null}

              {!tenantsLoading && filtered.length === 0 ? (
                <p className="py-8 text-center text-sm text-muted-foreground">
                  Ningun cliente coincide con &quot;{search}&quot;.
                </p>
              ) : null}
            </DialogBody>
          </>
        )}
      </DialogContent>
    </Dialog>
  );
}