SeConectai_Vendas/frontend/app/master/tenants/novo/page.tsx

'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Copy } from 'lucide-react';

import { createTenant, type CreateTenantResult } from '@/lib/api/tenants';
import { listPlanos } from '@/lib/api/planos';
import { createTenantSchema, type CreateTenantFormValues } from '@/lib/validators/tenants';
import { ApiError } from '@/lib/api/client';
import { toast } from '@/lib/toast';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { FormField } from '@/components/ui/form-field';
import { Input } from '@/components/ui/input';
import { ResponsiveDialog } from '@/components/ui/responsive-dialog';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';

export default function NovoTenantPage() {
  const router = useRouter();
  const [created, setCreated] = React.useState<CreateTenantResult | null>(null);

  const { data: planos } = useQuery({
    queryKey: ['master', 'planos', { ativo: true }],
    queryFn: () => listPlanos({ ativo: true }),
  });

  const form = useForm<CreateTenantFormValues>({
    resolver: zodResolver(createTenantSchema),
    defaultValues: {
      razao_social: '',
      nome_fantasia: '',
      documento: '',
      email_contato: '',
      telefone: '',
      plano_id: '',
      admin_nome: '',
      admin_email: '',
      admin_senha: '',
    },
  });

  const mutation = useMutation({
    mutationFn: (values: CreateTenantFormValues) =>
      createTenant({
        razao_social: values.razao_social,
        nome_fantasia: values.nome_fantasia || undefined,
        documento: values.documento || undefined,
        email_contato: values.email_contato,
        telefone: values.telefone || undefined,
        plano_id: values.plano_id,
        dia_vencimento_mensalidade: values.dia_vencimento_mensalidade,
        admin: {
          nome: values.admin_nome,
          email: values.admin_email,
          senha: values.admin_senha || undefined,
        },
      }),
    onSuccess: (result) => setCreated(result),
    onError: (err) => {
      toast.error(err instanceof ApiError ? err.message : 'Não foi possível criar o tenant.');
    },
  });

  async function copySenha() {
    if (!created) return;
    try {
      await navigator.clipboard.writeText(created.admin.senha_provisoria);
      toast.success('Senha copiada.');
    } catch {
      toast.error('Não foi possível copiar automaticamente — selecione e copie manualmente.');
    }
  }

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">Novo tenant</h1>
        <p className="text-sm text-muted-foreground">Cadastro de um novo cliente da plataforma</p>
      </div>

      <form
        className="flex max-w-2xl flex-col gap-6"
        onSubmit={form.handleSubmit((values) => mutation.mutate(values))}
      >
        <Card>
          <CardHeader>
            <CardTitle>Dados cadastrais</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <FormField label="Razão social" error={form.formState.errors.razao_social?.message} required>
                <Input {...form.register('razao_social')} />
              </FormField>
              <FormField label="Nome fantasia" error={form.formState.errors.nome_fantasia?.message}>
                <Input {...form.register('nome_fantasia')} />
              </FormField>
            </div>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <FormField label="Documento (CNPJ/CPF)" error={form.formState.errors.documento?.message}>
                <Input {...form.register('documento')} />
              </FormField>
              <FormField label="Telefone" error={form.formState.errors.telefone?.message}>
                <Input {...form.register('telefone')} />
              </FormField>
            </div>
            <FormField
              label="E-mail de contato"
              error={form.formState.errors.email_contato?.message}
              required
            >
              <Input type="email" {...form.register('email_contato')} />
            </FormField>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <FormField
                label="Plano"
                id="plano_id"
                error={form.formState.errors.plano_id?.message}
                required
              >
                <Select
                  value={form.watch('plano_id')}
                  onValueChange={(value) => form.setValue('plano_id', value, { shouldValidate: true })}
                >
                  <SelectTrigger id="plano_id" className="w-full">
                    <SelectValue placeholder="Selecione um plano" />
                  </SelectTrigger>
                  <SelectContent>
                    {(planos ?? []).map((plano) => (
                      <SelectItem key={plano.id} value={plano.id}>
                        {plano.nome}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormField>
              <FormField
                label="Dia de vencimento da mensalidade"
                helpText="1 a 28 — vazio usa o padrão do sistema"
                error={form.formState.errors.dia_vencimento_mensalidade?.message}
              >
                <Input
                  type="number"
                  min="1"
                  max="28"
                  {...form.register('dia_vencimento_mensalidade', {
                    setValueAs: (v) => (v === '' ? undefined : Number(v)),
                  })}
                />
              </FormField>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Primeiro usuário (administrador do tenant)</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <FormField label="Nome" error={form.formState.errors.admin_nome?.message} required>
                <Input {...form.register('admin_nome')} />
              </FormField>
              <FormField label="E-mail" error={form.formState.errors.admin_email?.message} required>
                <Input type="email" {...form.register('admin_email')} />
              </FormField>
            </div>
            <FormField
              label="Senha provisória"
              helpText="Deixe em branco para o sistema gerar uma senha automaticamente"
              error={form.formState.errors.admin_senha?.message}
            >
              <Input type="text" autoComplete="off" {...form.register('admin_senha')} />
            </FormField>
          </CardContent>
        </Card>

        <div className="flex items-center gap-3">
          <Button type="submit" loading={mutation.isPending}>
            Criar tenant
          </Button>
          <Button type="button" variant="outline" onClick={() => router.push('/master/tenants')}>
            Cancelar
          </Button>
        </div>
      </form>

      <ResponsiveDialog
        open={created !== null}
        onOpenChange={(open) => {
          if (!open && created) router.push(`/master/tenants/${created.tenant.id}`);
        }}
        title="Tenant criado com sucesso"
        description="Copie e repasse a senha provisória ao cliente agora — ela não será mostrada novamente."
        footer={
          <Button
            className="w-full"
            onClick={() => created && router.push(`/master/tenants/${created.tenant.id}`)}
          >
            Concluir
          </Button>
        }
      >
        {created && (
          <div className="flex flex-col gap-4 px-4 pb-4 sm:px-0 sm:pb-0">
            <div>
              <p className="text-sm text-muted-foreground">Administrador</p>
              <p className="font-medium text-foreground">
                {created.admin.nome} · {created.admin.email}
              </p>
            </div>
            <Separator />
            <div className="flex flex-col gap-2">
              <p className="text-sm font-medium text-foreground">Senha provisória</p>
              <div className="flex items-center gap-2 rounded-lg border border-warning/30 bg-warning/10 p-3">
                <code className="flex-1 font-mono text-base font-semibold text-foreground select-all">
                  {created.admin.senha_provisoria}
                </code>
                <Button type="button" variant="ghost" size="icon-sm" onClick={copySenha} aria-label="Copiar senha">
                  <Copy className="size-4" />
                </Button>
              </div>
              <p className="text-xs text-warning">
                Atenção: esta senha não fica salva em texto puro em nenhum lugar e não será exibida
                novamente. Copie e repasse ao cliente agora.
              </p>
            </div>
          </div>
        )}
      </ResponsiveDialog>
    </div>
  );
}