sass-mohfarawati/components/root/smtp-settings-form.tsx

"use client";

import { KeyRound, Mail, Send, Server } from "lucide-react";
import { useState } from "react";

import { AppCard } from "@/components/ui/app-card";
import { Button } from "@/components/ui/button";
import { CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { MailSettingsFormValues } from "@/lib/mail-settings";

type SMTPSettingsFormProps = {
  action: (formData: FormData) => Promise<void>;
  initialSettings: MailSettingsFormValues;
};

export function SMTPSettingsForm({
  action,
  initialSettings,
}: SMTPSettingsFormProps) {
  const [smtpSecure, setSmtpSecure] = useState(initialSettings.smtp.secure);

  return (
    <form id="smtp-settings-form" action={action} className="space-y-6">
      <div className="grid gap-6 xl:grid-cols-2">
        <AppCard>
          <CardHeader>
            <CardTitle>SMTP Connection</CardTitle>
            <CardDescription>Server und Login.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-5 p-4 md:grid-cols-2">
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="smtpHost">SMTP Host</Label>
              <div className="relative">
                <Server className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="smtpHost"
                  name="smtpHost"
                  defaultValue={initialSettings.smtp.host}
                  autoComplete="off"
                  className="pl-9"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="smtpPort">SMTP Port</Label>
              <Input
                id="smtpPort"
                name="smtpPort"
                type="number"
                min="1"
                defaultValue={initialSettings.smtp.port}
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="smtpUsername">SMTP Username</Label>
              <div className="relative">
                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="smtpUsername"
                  name="smtpUsername"
                  defaultValue={initialSettings.smtp.username}
                  autoComplete="off"
                  className="pl-9"
                />
              </div>
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="smtpPassword">SMTP Password</Label>
              <div className="relative">
                <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="smtpPassword"
                  name="smtpPassword"
                  type="password"
                  defaultValue={initialSettings.smtp.password}
                  placeholder={initialSettings.smtp.hasPassword ? "Saved password will be kept" : "SMTP password"}
                  autoComplete="new-password"
                  className="pl-9"
                />
              </div>
            </div>

            <div className="md:col-span-2">
              <label
                htmlFor="smtpSecure"
                className="flex cursor-pointer items-start gap-3 rounded-nested border border-input bg-card px-4 py-4 transition-colors hover:bg-accent/20"
              >
                <Checkbox
                  id="smtpSecure"
                  name="smtpSecure"
                  checked={smtpSecure}
                  onCheckedChange={(checked) => setSmtpSecure(checked === true)}
                  className="mt-0.5"
                />
                <span className="space-y-1">
                  <span className="block text-sm font-medium text-foreground">Use secure SMTP</span>
                  <span className="block text-xs text-muted-foreground">
                    {smtpSecure ? "ON: meist Port 465." : "OFF: meist Port 587."}
                  </span>
                </span>
              </label>
            </div>
          </CardContent>
        </AppCard>

        <AppCard>
          <CardHeader>
            <CardTitle>Sender And Recipients</CardTitle>
            <CardDescription>Absender und Ziele.</CardDescription>
          </CardHeader>
          <CardContent className="grid gap-5 p-4 md:grid-cols-2">
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="mailFromEmail">From Email</Label>
              <div className="relative">
                <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="mailFromEmail"
                  name="mailFromEmail"
                  type="email"
                  defaultValue={initialSettings.sender.email}
                  autoComplete="off"
                  className="pl-9"
                />
              </div>
            </div>

            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="mailFromName">From Name</Label>
              <Input
                id="mailFromName"
                name="mailFromName"
                defaultValue={initialSettings.sender.name}
                autoComplete="off"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="mailContactRecipient">Contact Recipient Email</Label>
              <div className="relative">
                <Send className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="mailContactRecipient"
                  name="mailContactRecipient"
                  type="email"
                  defaultValue={initialSettings.recipients.contact}
                  autoComplete="off"
                  className="pl-9"
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="mailTestRecipient">Test Recipient Email</Label>
              <div className="relative">
                <Send className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  id="mailTestRecipient"
                  name="mailTestRecipient"
                  type="email"
                  defaultValue={initialSettings.recipients.test}
                  autoComplete="off"
                  className="pl-9"
                />
              </div>
            </div>
          </CardContent>
        </AppCard>
      </div>
      <div className="flex justify-end">
        <Button type="submit">Save SMTP</Button>
      </div>
    </form>
  );
}