"use client";

import { useState, type FormEvent } from "react";
import type { EmailSettings } from "@/types/settings";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

export function EmailSettingsForm({ initial }: { initial: EmailSettings }) {
  const [host, setHost] = useState(initial.smtp_host ?? "");
  const [port, setPort] = useState(initial.smtp_port ?? "");
  const [username, setUsername] = useState(initial.smtp_username ?? "");
  const [password, setPassword] = useState(initial.smtp_password ?? "");
  const [passwordTouched, setPasswordTouched] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { toast } = useToast();

  async function handleSubmit(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setMessage(null);
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch("/api/admin/settings/email", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        smtp_host: host || null,
        smtp_port: port ? Number(port) : null,
        smtp_username: username || null,
        // Only sent when the admin actually edited it — the field is
        // pre-filled with a masked display value (e.g. "•••1234"), and
        // resubmitting that untouched would overwrite the real secret.
        ...(passwordTouched ? { smtp_password: password || null } : {}),
      }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const errorMessage = body?.message ?? "Failed to save email configuration.";
      setError(errorMessage);
      toast(errorMessage, "error");
      return;
    }

    const successMessage = body?.message ?? "Saved.";
    setMessage(successMessage);
    toast(successMessage, "success");
  }

  return (
    <form onSubmit={handleSubmit} className="mt-3 flex flex-col gap-3">
      <p className="text-xs text-kolabora-neutral-dark/70">
        Saved as configuration reference only — the actual email transport is still set via{" "}
        <code>MAIL_MAILER</code> in the backend&apos;s <code>.env</code>.
      </p>
      <label className="flex flex-col gap-1 text-sm font-medium">
        SMTP Host
        <Input value={host} onChange={(e) => setHost(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        SMTP Port
        <Input type="number" value={port} onChange={(e) => setPort(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        SMTP Username
        <Input value={username} onChange={(e) => setUsername(e.target.value)} />
      </label>
      <label className="flex flex-col gap-1 text-sm font-medium">
        SMTP Password
        <Input
          type="password"
          value={password}
          onChange={(e) => {
            setPassword(e.target.value);
            setPasswordTouched(true);
          }}
        />
        <span className="text-xs font-normal text-kolabora-neutral-dark/70">
          The value above is masked (only the last 4 characters are real). Type the full value again
          to change it — leaving it untouched keeps the existing password.
        </span>
      </label>
      {message && <p className="text-sm text-green-600">{message}</p>}
      {error && <p className="text-sm text-red-600">{error}</p>}
      <Button type="submit" loading={isSubmitting} className="mt-1 self-start">
        Save
      </Button>
    </form>
  );
}