"use client";
import { Suspense, useState, useEffect, useCallback } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { Building2, RefreshCw, Copy, CheckCircle2 } from "lucide-react";
import { ToolLayout } from "@/components/ToolLayout";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";

interface TenantData {
  domain: string;
  tenantId: string | null;
  authType: string | null;
  cloudEnvironment: string;
  issuer: string;
  endpoints: Record<string, string>;
  scopes?: string[];
  error?: string;
}

function TenantLookupContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const [domain, setDomain] = useState(searchParams.get("domain") ?? "");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<TenantData | null>(null);
  const [copied, setCopied] = useState(false);

  const updateUrl = useCallback((d: string) => {
    const params = new URLSearchParams();
    if (d) params.set("domain", d);
    router.replace(`/tenant-lookup${params.toString() ? `?${params}` : ""}`, { scroll: false });
  }, [router]);

  const lookup = useCallback(async (d: string) => {
    if (!d.trim()) return;
    setLoading(true);
    setData(null);
    try {
      const res = await fetch(`/api/tenant-lookup?domain=${encodeURIComponent(d)}`);
      const json = await res.json();
      setData(json);
    } catch {
      toast.error("Request failed");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    const p = searchParams.get("domain");
    if (p) { setDomain(p); lookup(p); }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); updateUrl(domain); lookup(domain); };

  const copyTenantId = () => {
    if (!data?.tenantId) return;
    navigator.clipboard.writeText(data.tenantId);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <ToolLayout icon={Building2} title="Tenant Lookup" description="Lookup Microsoft 365 / Entra ID tenant information.">
      <form onSubmit={handleSubmit} className="flex gap-2 mb-6">
        <Input
          value={domain}
          onChange={(e) => setDomain(e.target.value)}
          placeholder="contoso.com"
          className="flex-1"
          onBlur={() => updateUrl(domain)}
        />
        <Button type="submit" disabled={loading}>
          {loading ? <RefreshCw className="h-4 w-4 animate-spin" /> : "Lookup"}
        </Button>
      </form>

      {data?.error && <div className="result-box p-4 badge-err animate-fade-up">Error: {data.error}</div>}

      {data && !data.error && (
        <div className="space-y-4 animate-fade-up">
          {/* Tenant ID */}
          {data.tenantId && (
            <div className="glass-card rounded-xl p-5">
              <p className="text-xs text-muted-foreground mb-1">Tenant ID</p>
              <div className="flex items-center gap-2">
                <p className="text-2xl font-mono font-bold flex-1 break-all">{data.tenantId}</p>
                <Button variant="ghost" size="icon" onClick={copyTenantId}>
                  {copied ? <CheckCircle2 className="h-4 w-4 text-green-400" /> : <Copy className="h-4 w-4" />}
                </Button>
              </div>
              <div className="flex flex-wrap gap-2 mt-3">
                <Badge variant="neutral">{data.cloudEnvironment}</Badge>
                {data.authType && <Badge variant="neutral">{data.authType}</Badge>}
              </div>
            </div>
          )}

          {/* Endpoints */}
          {data.endpoints && (
            <div className="glass-card rounded-xl p-4">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-3">OAuth Endpoints</p>
              <div className="space-y-2">
                {Object.entries(data.endpoints).map(([k, v]) =>
                  v ? (
                    <div key={k} className="py-1.5 border-b border-border/50 last:border-0">
                      <p className="text-xs text-muted-foreground mb-0.5 capitalize">{k}</p>
                      <p className="text-xs font-mono break-all text-foreground/80">{v}</p>
                    </div>
                  ) : null
                )}
              </div>
            </div>
          )}

          {/* Issuer */}
          {data.issuer && (
            <div className="glass-card rounded-xl p-4">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-2">Issuer</p>
              <p className="text-xs font-mono">{data.issuer}</p>
            </div>
          )}

          {/* Scopes */}
          {data.scopes && data.scopes.length > 0 && (
            <div className="glass-card rounded-xl p-4">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 mb-3">Supported Scopes</p>
              <div className="flex flex-wrap gap-1.5">
                {data.scopes.map((s) => (
                  <Badge key={s} variant="neutral" className="text-[10px] font-mono">{s}</Badge>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
    </ToolLayout>
  );
}

export default function TenantLookupPage() {
  return <Suspense><TenantLookupContent /></Suspense>;
}