'use client';

import * as React from 'react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { KeyRound } from 'lucide-react';

import { listMasterAdmins } from '@/lib/api/master-admins';
import { apiClient, ApiError } from '@/lib/api/client';
import { useAuth } from '@/lib/auth/auth-context';
import { formatDateTime } from '@/lib/format';
import { toast } from '@/lib/toast';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

/**
 * Não existe endpoint de perfil/senha dedicado para o master admin no
 * backend (só `GET /auth/master/admins`, somente leitura, e o fluxo
 * genérico `forgot`/`reset` por e-mail — ver observações da Etapa 15 no
 * controle de progresso). Nome/e-mail aqui são só exibidos (resolvidos
 * filtrando a lista completa pelo `sub` do JWT), e a troca de senha
 * reaproveita `POST /auth/password/forgot`, o mesmo fluxo já usado em
 * `/esqueci-senha` — não uma troca "senha atual → nova senha" direta na
 * tela, porque essa rota não existe.
 */
export default function MasterConfiguracoesPage() {
  const { user } = useAuth();
  const { data: admins, isLoading } = useQuery({
    queryKey: ['master', 'admins'],
    queryFn: listMasterAdmins,
  });

  const me = admins?.find((admin) => admin.id === user?.sub);

  const resetMutation = useMutation({
    mutationFn: () =>
      apiClient.post('/auth/password/forgot', { email: me!.email, usuario_tipo: 'master' }),
    onSuccess: () => {
      toast.success('Se o e-mail existir, as instruções de redefinição foram enviadas.');
    },
    onError: (err) => {
      toast.error(err instanceof ApiError ? err.message : 'Não foi possível enviar o e-mail.');
    },
  });

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">Configurações</h1>
        <p className="text-sm text-muted-foreground">Dados da sua conta de administrador</p>
      </div>

      <Card className="max-w-xl">
        <CardHeader>
          <CardTitle>Meus dados</CardTitle>
          <CardDescription>Somente leitura nesta versão.</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          {isLoading ? (
            <div className="flex flex-col gap-2">
              <Skeleton className="h-5 w-48" />
              <Skeleton className="h-5 w-64" />
            </div>
          ) : me ? (
            <dl className="flex flex-col gap-3 text-sm">
              <div className="flex justify-between gap-4">
                <dt className="text-muted-foreground">Nome</dt>
                <dd className="font-medium text-foreground">{me.nome}</dd>
              </div>
              <div className="flex justify-between gap-4">
                <dt className="text-muted-foreground">E-mail</dt>
                <dd className="font-medium text-foreground">{me.email}</dd>
              </div>
              <div className="flex justify-between gap-4">
                <dt className="text-muted-foreground">Último login</dt>
                <dd className="text-foreground">{formatDateTime(me.ultimo_login)}</dd>
              </div>
            </dl>
          ) : (
            <p className="text-sm text-muted-foreground">Não foi possível identificar sua conta.</p>
          )}
        </CardContent>
      </Card>

      <Card className="max-w-xl">
        <CardHeader>
          <CardTitle>Senha</CardTitle>
          <CardDescription>
            Enviaremos um e-mail com um link para você definir uma nova senha.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Button
            variant="outline"
            loading={resetMutation.isPending}
            disabled={!me}
            onClick={() => resetMutation.mutate()}
          >
            <KeyRound /> Enviar e-mail de redefinição de senha
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}