"use client";

import { useState } from "react";
import { AlertTriangle } from "lucide-react";

import { Button } from "@/shared/components/ui/button";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { DialogFooter } from "@/shared/components/ui/dialog";
import { createSenderSchema } from "@/modules/senders/dtos/create-sender-schema";
import { updateSenderSchema } from "@/modules/senders/dtos/update-sender-schema";

export interface VerifiedDomainOption {
  id: string;
  domain: string;
}

export interface SenderFormValues {
  name: string;
  fromEmail: string;
  provider: "SMTP" | "SES";
  smtpHost: string;
  smtpPort: string;
  smtpUser: string;
  smtpPass: string;
  domainId: string;
}

export type SenderFormSubmitValues =
  | { name: string; fromEmail: string; provider: "SMTP"; smtpHost: string; smtpPort: number; smtpUser: string; smtpPass?: string }
  | { name: string; fromEmail: string; provider: "SES"; domainId: string };

interface SenderFormProps {
  mode: "create" | "edit";
  initialValues?: Partial<SenderFormValues>;
  verifiedDomains: VerifiedDomainOption[];
  isSubmitting: boolean;
  onCancel: () => void;
  onSubmit: (values: SenderFormSubmitValues) => Promise<void>;
}

const DEFAULT_VALUES: SenderFormValues = {
  name: "",
  fromEmail: "",
  provider: "SMTP",
  smtpHost: "smtp.mailgun.org",
  smtpPort: "587",
  smtpUser: "",
  smtpPass: "",
  domainId: "",
};

export function SenderForm({
  mode,
  initialValues,
  verifiedDomains,
  isSubmitting,
  onCancel,
  onSubmit,
}: SenderFormProps) {
  const [form, setForm] = useState<SenderFormValues>({ ...DEFAULT_VALUES, ...initialValues });
  const [errors, setErrors] = useState<Record<string, string>>({});

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setErrors({});

    const schema = mode === "create" ? createSenderSchema : updateSenderSchema;
    const payload =
      form.provider === "SMTP"
        ? {
            name: form.name,
            fromEmail: form.fromEmail,
            provider: "SMTP" as const,
            smtpHost: form.smtpHost,
            smtpPort: Number(form.smtpPort),
            smtpUser: form.smtpUser,
            ...(mode === "edit" && !form.smtpPass ? {} : { smtpPass: form.smtpPass }),
          }
        : {
            name: form.name,
            fromEmail: form.fromEmail,
            provider: "SES" as const,
            domainId: form.domainId,
          };

    const result = schema.safeParse(payload);

    if (!result.success) {
      const formattedErrors: Record<string, string> = {};
      result.error.issues.forEach((issue) => {
        if (issue.path[0]) {
          formattedErrors[issue.path[0].toString()] = issue.message;
        }
      });
      setErrors(formattedErrors);
      return;
    }

    await onSubmit(result.data);
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4 pt-2">
      <div className="field-container">
        <Label>Provedor de Envio</Label>
        <div className="flex gap-2 w-full mt-1">
          <Button
            type="button"
            variant={form.provider === "SMTP" ? "default" : "outline"}
            onClick={() => setForm({ ...form, provider: "SMTP" })}
            className="flex-1"
          >
            SMTP
          </Button>
          <Button
            type="button"
            variant={form.provider === "SES" ? "default" : "outline"}
            onClick={() => setForm({ ...form, provider: "SES" })}
            className="flex-1"
          >
            Amazon SES
          </Button>
        </div>
      </div>

      <div className="field-container">
        <Label htmlFor="sender-name">
          Nome de Exibição <span className="text-red-600">*</span>
        </Label>
        <Input
          id="sender-name"
          value={form.name}
          onChange={(e) => setForm({ ...form, name: e.target.value })}
          placeholder="Ex: Suporte Empresa"
        />
        {errors.name && (
          <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
            <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
            <span>{errors.name}</span>
          </p>
        )}
      </div>

      <div className="field-container">
        <Label htmlFor="sender-from-email">
          E-mail Remetente (From) <span className="text-red-600">*</span>
        </Label>
        <Input
          id="sender-from-email"
          type="email"
          value={form.fromEmail}
          onChange={(e) => setForm({ ...form, fromEmail: e.target.value })}
          placeholder="contato@empresa.com"
        />
        {errors.fromEmail && (
          <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
            <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
            <span>{errors.fromEmail}</span>
          </p>
        )}
      </div>

      {form.provider === "SES" ? (
        <div className="field-container">
          <Label htmlFor="sender-domain">
            Domínio Verificado <span className="text-red-600">*</span>
          </Label>
          {verifiedDomains.length === 0 ? (
            <p className="text-xs text-zinc-600 bg-zinc-50 border border-zinc-200 rounded-lg px-3.5 py-2.5 w-full">
              Nenhum domínio verificado ainda. Verifique um domínio na aba &quot;Autenticação de Domínios&quot;
              antes de criar um remetente SES.
            </p>
          ) : (
            <select
              id="sender-domain"
              value={form.domainId}
              onChange={(e) => setForm({ ...form, domainId: e.target.value })}
              className="h-10 min-h-[40px] w-full rounded-lg border border-[#D1D5DB] bg-[#F9FAFB] px-4 py-[9.5px] font-sans text-sm text-[#111827] shadow-xs outline-none focus:border-[#4338CA] focus:ring-2 focus:ring-[#4338CA]/20"
            >
              <option value="">Selecione um domínio</option>
              {verifiedDomains.map((d) => (
                <option key={d.id} value={d.id}>
                  {d.domain}
                </option>
              ))}
            </select>
          )}
          {errors.domainId && (
            <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
              <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
              <span>{errors.domainId}</span>
            </p>
          )}
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 w-full">
            <div className="sm:col-span-2 field-container">
              <Label htmlFor="sender-smtp-host">
                Host SMTP <span className="text-red-600">*</span>
              </Label>
              <Input
                id="sender-smtp-host"
                value={form.smtpHost}
                onChange={(e) => setForm({ ...form, smtpHost: e.target.value })}
                placeholder="smtp.provedor.com"
                className="font-mono text-xs"
              />
              {errors.smtpHost && (
                <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
                  <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
                  <span>{errors.smtpHost}</span>
                </p>
              )}
            </div>

            <div className="field-container">
              <Label htmlFor="sender-smtp-port">
                Porta <span className="text-red-600">*</span>
              </Label>
              <Input
                id="sender-smtp-port"
                value={form.smtpPort}
                onChange={(e) => setForm({ ...form, smtpPort: e.target.value })}
                placeholder="587"
                className="font-mono text-xs"
              />
              {errors.smtpPort && (
                <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
                  <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
                  <span>{errors.smtpPort}</span>
                </p>
              )}
            </div>
          </div>

          <div className="field-container">
            <Label htmlFor="sender-smtp-user">
              Usuário SMTP
            </Label>
            <Input
              id="sender-smtp-user"
              value={form.smtpUser}
              onChange={(e) => setForm({ ...form, smtpUser: e.target.value })}
              placeholder="postmaster@empresa.com"
              className="font-mono text-xs"
            />
            {errors.smtpUser && (
              <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
                <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
                <span>{errors.smtpUser}</span>
              </p>
            )}
          </div>

          <div className="field-container">
            <Label htmlFor="sender-smtp-pass">
              Senha SMTP {mode === "create" && <span className="text-red-600">*</span>}
            </Label>
            <Input
              id="sender-smtp-pass"
              type="password"
              value={form.smtpPass}
              onChange={(e) => setForm({ ...form, smtpPass: e.target.value })}
              placeholder={mode === "edit" ? "Deixe em branco para manter a senha atual" : "••••••••••••"}
            />
            {errors.smtpPass && (
              <p className="text-xs font-medium text-red-700 mt-1 flex items-center gap-1">
                <AlertTriangle className="w-3.5 h-3.5 shrink-0 text-red-600" aria-hidden="true" />
                <span>{errors.smtpPass}</span>
              </p>
            )}
          </div>
        </>
      )}

      <DialogFooter className="pt-4">
        <Button
          type="button"
          variant="outline"
          onClick={onCancel}
        >
          Cancelar
        </Button>
        <Button
          type="submit"
          disabled={isSubmitting}
        >
          {isSubmitting ? "Salvando..." : "Salvar Remetente"}
        </Button>
      </DialogFooter>
    </form>
  );
}