'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Copy, ExternalLink, Loader2, LockKeyhole, Plus, UserRound } from 'lucide-react';
import { AdminShell } from '@/components/id/admin-shell';
import { OAuthClientDetailDialog } from '@/components/id/oauth-client-detail-dialog';
import { useAuth } from '@/components/id/auth-provider';
import { useToast } from '@/components/id/toast-provider';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { OAuthClient, OAuthScope, apiFetch } from '@/lib/api';
import { getAdminLandingPath } from '@/lib/admin-access';
import { buildAuthorizeUrl, buildOAuthEndpoints, resolveFrontendBase, resolveOAuthApiBase } from '@/lib/oauth-url';

export default function AdminOAuthPage() {
  const router = useRouter();
  const { token, user } = useAuth();
  const { showToast } = useToast();
  const [clients, setClients] = useState<OAuthClient[]>([]);
  const [scopes, setScopes] = useState<OAuthScope[]>([]);
  const [loading, setLoading] = useState(true);
  const [creating, setCreating] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [selectedClient, setSelectedClient] = useState<OAuthClient | null>(null);
  const [secretDialog, setSecretDialog] = useState<{ clientId: string; clientSecret: string } | null>(null);
  const [oauthApiBase, setOauthApiBase] = useState('http://localhost:3002/idp-api');
  const [frontendBase, setFrontendBase] = useState('http://localhost:3002');
  const [projectName, setProjectName] = useState('MVK ID');
  const [form, setForm] = useState({ name: '', redirectUris: '', type: 'CONFIDENTIAL', selectedScopes: ['openid', 'profile', 'email'] as string[] });

  const oauthEndpoints = useMemo(() => buildOAuthEndpoints(oauthApiBase, frontendBase), [oauthApiBase, frontendBase]);

  const loadPublicSettings = useCallback(async () => {
    try {
      const response = await apiFetch<{ settings: Array<{ key: string; value: string }> }>('/settings/public');
      const settings = Object.fromEntries((response.settings ?? []).map((item) => [item.key, item.value]));
      setOauthApiBase(resolveOAuthApiBase(settings));
      setFrontendBase(resolveFrontendBase(settings));
      if (settings.PROJECT_NAME?.trim()) {
        setProjectName(settings.PROJECT_NAME.trim());
      }
    } catch {
      // оставляем fallback
    }
  }, []);

  const loadData = useCallback(async () => {
    if (!token || !user?.canViewOAuth) return;
    setLoading(true);
    try {
      const clientsResponse = await apiFetch<{ clients: OAuthClient[] }>('/admin/rbac/oauth-clients', {}, token);
      setClients(clientsResponse.clients ?? []);
      if (user.canManageOAuth) {
        const scopesResponse = await apiFetch<{ scopes: OAuthScope[] }>('/admin/rbac/oauth-scopes', {}, token);
        setScopes(scopesResponse.scopes ?? []);
      }
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось загрузить OAuth-приложения');
    } finally {
      setLoading(false);
    }
  }, [showToast, token, user?.canManageOAuth, user?.canViewOAuth]);

  useEffect(() => {
    void loadPublicSettings();
  }, [loadPublicSettings]);

  useEffect(() => {
    if (!user) return;
    if (!user.canViewOAuth && !user.canManageOAuth) {
      router.replace(getAdminLandingPath(user));
      return;
    }
    void loadData();
  }, [loadData, router, user]);

  async function handleCreate() {
    if (!token) return;
    const redirectUris = form.redirectUris
      .split('\n')
      .map((item) => item.trim())
      .filter(Boolean);
    if (!form.name.trim() || !redirectUris.length || !form.selectedScopes.length) {
      showToast('Заполните название, redirect URI и scopes');
      return;
    }

    setCreating(true);
    try {
      const created = await apiFetch<OAuthClient>('/admin/rbac/oauth-clients', {
        method: 'POST',
        body: JSON.stringify({
          name: form.name.trim(),
          redirectUris,
          scopes: form.selectedScopes,
          type: form.type
        })
      }, token);
      showToast('OAuth-приложение создано');
      setDialogOpen(false);
      setForm({ name: '', redirectUris: '', type: 'CONFIDENTIAL', selectedScopes: ['openid', 'profile', 'email'] });
      if (created.clientSecret) {
        setSecretDialog({ clientId: created.clientId, clientSecret: created.clientSecret });
      }
      await loadData();
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось создать приложение');
    } finally {
      setCreating(false);
    }
  }

  async function handleSaveRedirectUris(client: OAuthClient, redirectUris: string[]) {
    if (!token) return;
    if (!redirectUris.length) {
      showToast('Укажите хотя бы один redirect URI');
      return;
    }
    try {
      const updated = await apiFetch<OAuthClient>(`/admin/rbac/oauth-clients/${client.clientId}`, {
        method: 'PATCH',
        body: JSON.stringify({ redirectUris })
      }, token);
      showToast('Redirect URI обновлены');
      setSelectedClient((current) =>
        current?.clientId === client.clientId
          ? { ...current, redirectUris: updated.redirectUris ?? redirectUris }
          : current
      );
      await loadData();
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось сохранить redirect URI');
    }
  }

  async function handleRotateSecret(clientId: string) {
    if (!token) return;
    try {
      const response = await apiFetch<{ clientId: string; clientSecret: string }>(`/admin/rbac/oauth-clients/${clientId}/rotate-secret`, { method: 'POST' }, token);
      setSecretDialog(response);
      showToast('Новый client secret сгенерирован');
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось перевыпустить secret');
    }
  }

  async function handleToggleActive(client: OAuthClient) {
    if (!token) return;
    try {
      await apiFetch(`/admin/rbac/oauth-clients/${client.clientId}`, {
        method: 'PATCH',
        body: JSON.stringify({ isActive: !client.isActive })
      }, token);
      showToast(client.isActive ? 'Приложение отключено' : 'Приложение включено');
      setSelectedClient((current) => (current?.id === client.id ? { ...client, isActive: !client.isActive } : current));
      await loadData();
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось обновить приложение');
    }
  }

  async function handleDeleteClient(client: OAuthClient) {
    if (!token) return;
    if (!window.confirm(`Удалить приложение «${client.name}»? Это действие необратимо.`)) return;
    try {
      await apiFetch(`/admin/rbac/oauth-clients/${client.clientId}`, { method: 'DELETE' }, token);
      showToast('Приложение удалено');
      setSelectedClient(null);
      await loadData();
    } catch (error) {
      showToast(error instanceof Error ? error.message : 'Не удалось удалить приложение');
    }
  }

  function copyText(value: string, label: string) {
    void navigator.clipboard.writeText(value);
    showToast(`${label} скопирован`);
  }

  return (
    <AdminShell active="/admin/oauth">
      <div className="mb-6 flex items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-medium">OAuth-приложения</h2>
          <p className="text-sm text-[#667085]">
            Issuer: <code className="rounded bg-[#f4f5f8] px-1.5 py-0.5 text-xs">{oauthEndpoints.issuer}</code>
            {' · '}
            Frontend: <code className="rounded bg-[#f4f5f8] px-1.5 py-0.5 text-xs">{frontendBase}</code>
            {' · '}
            <a href={oauthEndpoints.openIdConfigurationUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-[#1d4ed8] hover:underline">
              OpenID Configuration
              <ExternalLink className="h-3.5 w-3.5" />
            </a>
          </p>
          <p className="mt-1 text-xs text-[#667085]">
            One Tap Login настраивается в{' '}
            <a href="/admin/settings" className="text-[#1d4ed8] hover:underline">
              системных настройках
            </a>{' '}
            (PUBLIC_API_URL, PUBLIC_FRONTEND_URL, ONE_TAP_ENABLED).
          </p>
        </div>
        <Button onClick={() => setDialogOpen(true)} disabled={!user?.canManageOAuth}>
          <Plus className="h-4 w-4" />
          Новое приложение
        </Button>
      </div>

      {loading ? (
        <div className="flex items-center justify-center gap-2 py-16 text-[#667085]">
          <Loader2 className="h-5 w-5 animate-spin" />
          Загрузка...
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2">
          {clients.map((client) => {
            const authorizePreview = buildAuthorizeUrl(oauthEndpoints.issuer, {
              clientId: client.clientId,
              redirectUri: client.redirectUris[0] ?? 'https://app.example.com/oauth/callback',
              scope: client.scopes.join(' ')
            });

            return (
              <Card
                key={client.id}
                className={`cursor-pointer transition hover:shadow-md ${client.isActive ? '' : 'opacity-70'}`}
                onClick={() => setSelectedClient(client)}
              >
                <CardHeader>
                  <LockKeyhole className="h-6 w-6" />
                  <CardTitle>{client.name}</CardTitle>
                  <CardDescription>
                    {client.type === 'PUBLIC' ? 'Публичное приложение' : 'Confidential приложение'}
                    {client.createdByDisplayName ? (
                      <span className="mt-1 flex items-center gap-1.5 text-xs text-[#667085]">
                        <UserRound className="h-3.5 w-3.5" />
                        Создал: {client.createdByDisplayName}
                      </span>
                    ) : null}
                  </CardDescription>
                </CardHeader>
                <CardContent className="space-y-3">
                  <div className="rounded-2xl bg-[#f4f5f8] p-4 text-sm">
                    <div className="mb-1 font-medium">Authorization URL</div>
                    <code className="line-clamp-2 break-all text-xs text-[#667085]">{authorizePreview}</code>
                  </div>
                  <p className="text-xs text-[#667085]">Нажмите на карточку — все endpoints и данные для интеграции</p>
                </CardContent>
              </Card>
            );
          })}
          {!clients.length ? <p className="text-[#667085]">OAuth-приложения ещё не созданы</p> : null}
        </div>
      )}

      <OAuthClientDetailDialog
        client={selectedClient}
        endpoints={oauthEndpoints}
        frontendBase={frontendBase}
        projectName={projectName}
        open={Boolean(selectedClient)}
        onOpenChange={(open) => !open && setSelectedClient(null)}
        onCopy={copyText}
        onRotateSecret={(clientId) => void handleRotateSecret(clientId)}
        onToggleActive={(client) => void handleToggleActive(client)}
        onDelete={(client) => void handleDeleteClient(client)}
        onSaveRedirectUris={handleSaveRedirectUris}
      />

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>Новое OAuth-приложение</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
            <div>
              <label className="mb-2 block text-sm font-medium">Название</label>
              <Input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} placeholder="Lendry Docs" />
            </div>
            <div>
              <label className="mb-2 block text-sm font-medium">Тип клиента</label>
              <select
                value={form.type}
                onChange={(event) => setForm((current) => ({ ...current, type: event.target.value }))}
                className="h-11 w-full rounded-xl border border-[#eceef4] bg-white px-3 text-sm"
              >
                <option value="CONFIDENTIAL">Confidential (с client secret)</option>
                <option value="PUBLIC">Public (без secret)</option>
              </select>
            </div>
            <div>
              <label className="mb-2 block text-sm font-medium">Redirect URI (по одному на строку)</label>
              <textarea
                value={form.redirectUris}
                onChange={(event) => setForm((current) => ({ ...current, redirectUris: event.target.value }))}
                placeholder="https://app.example.com/oauth/callback"
                className="min-h-[96px] w-full rounded-xl border border-[#eceef4] bg-white px-3 py-2 text-sm"
              />
            </div>
            <div>
              <label className="mb-2 block text-sm font-medium">Scopes</label>
              <div className="space-y-2">
                {scopes.map((scope) => (
                  <label key={scope.id} className="flex items-center gap-2 rounded-xl bg-[#f4f5f8] px-3 py-2 text-sm">
                    <input
                      type="checkbox"
                      checked={form.selectedScopes.includes(scope.slug)}
                      onChange={(event) =>
                        setForm((current) => ({
                          ...current,
                          selectedScopes: event.target.checked
                            ? [...current.selectedScopes, scope.slug]
                            : current.selectedScopes.filter((item) => item !== scope.slug)
                        }))
                      }
                    />
                    <span className="font-medium">{scope.name}</span>
                    <span className="text-[#667085]">({scope.slug})</span>
                  </label>
                ))}
              </div>
            </div>
            <Button className="w-full" disabled={creating} onClick={() => void handleCreate()}>
              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Создать приложение'}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      <Dialog open={Boolean(secretDialog)} onOpenChange={(open) => !open && setSecretDialog(null)}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Client Secret</DialogTitle>
          </DialogHeader>
          <p className="text-sm text-[#667085]">Сохраните secret сейчас — он больше не будет показан полностью.</p>
          <div className="rounded-2xl bg-[#f4f5f8] p-4">
            <p className="mb-1 text-xs text-[#667085]">Client ID</p>
            <code className="break-all text-sm">{secretDialog?.clientId}</code>
            <p className="mb-1 mt-4 text-xs text-[#667085]">Client Secret</p>
            <code className="break-all text-sm">{secretDialog?.clientSecret}</code>
          </div>
          <Button className="w-full" onClick={() => secretDialog && copyText(secretDialog.clientSecret, 'Client Secret')}>
            <Copy className="h-4 w-4" />
            Скопировать secret
          </Button>
        </DialogContent>
      </Dialog>
    </AdminShell>
  );
}