import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';
import { useForm } from '@inertiajs/react';
import { Save } from 'lucide-react';
import { Field, FormCard, Section } from './shared';
import type { MailSettings } from './types';

export default function MailTab({ settings }: { settings: MailSettings }) {
    const { data, setData, put, processing, errors } = useForm({ ...settings });

    return (
        <form
            onSubmit={(e) => {
                e.preventDefault();
                put('/admin/settings/mail');
            }}
        >
            <FormCard>
                <Section title="Sender">
                    <Field
                        label="From name"
                        hint="Display name on outbound emails"
                        error={errors.from_name}
                        required
                    >
                        <Input
                            value={data.from_name}
                            onChange={(e) =>
                                setData('from_name', e.target.value)
                            }
                            placeholder="Upepo Finance"
                            className={cn(
                                errors.from_name && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="From address"
                        error={errors.from_address}
                        required
                    >
                        <Input
                            type="email"
                            value={data.from_address}
                            onChange={(e) =>
                                setData('from_address', e.target.value)
                            }
                            placeholder="noreply@example.com"
                            className={cn(
                                errors.from_address && 'border-destructive',
                            )}
                        />
                    </Field>
                    <Field
                        label="Reply-to"
                        hint="Leave blank to use the from address"
                        error={errors.reply_to}
                    >
                        <Input
                            type="email"
                            value={data.reply_to}
                            onChange={(e) =>
                                setData('reply_to', e.target.value)
                            }
                            placeholder="support@example.com"
                            className={cn(
                                errors.reply_to && 'border-destructive',
                            )}
                        />
                    </Field>
                </Section>

                <div className="border-border rounded-lg border p-4 text-sm">
                    <p className="text-foreground font-medium">
                        SMTP / transport
                    </p>
                    <p className="text-muted-foreground mt-1 text-xs">
                        Mail transport, host, port, and credentials are
                        configured via environment variables (
                        <code className="bg-muted rounded px-1 py-0.5 font-mono text-[11px]">
                            MAIL_*
                        </code>
                        ) and cannot be changed here.
                    </p>
                </div>

                <div className="flex justify-end">
                    <Button
                        type="submit"
                        disabled={processing}
                        size="sm"
                        className="gap-2"
                    >
                        <Save className="h-3.5 w-3.5" />
                        Save mail settings
                    </Button>
                </div>
            </FormCard>
        </form>
    );
}