
import { useState, useEffect } from "react";
import { useQuery, useMutation } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";

export function SMTPSettingsCard() {
    const { t } = useTranslation();
    const { toast } = useToast();

    const { data: settings } = useQuery<{
        smtp_host: string;
        smtp_port: string;
        smtp_user: string;
        smtp_pass: string;
        smtp_from: string;
        smtp_secure: boolean;
    }>({
        queryKey: ["/api/admin/settings"],
    });

    const [emailSettings, setEmailSettings] = useState({
        smtp_host: '',
        smtp_port: '',
        smtp_user: '',
        smtp_pass: '',
        smtp_from: '',
        smtp_secure: false
    });

    useEffect(() => {
        if (settings) {
            setEmailSettings({
                smtp_host: settings.smtp_host || '',
                smtp_port: settings.smtp_port || '',
                smtp_user: settings.smtp_user || '',
                smtp_pass: settings.smtp_pass || '',
                smtp_from: settings.smtp_from || '',
                smtp_secure: settings.smtp_secure || false
            });
        }
    }, [settings]);

    const updateSettingsMutation = useMutation({
        mutationFn: (data: Partial<typeof settings>) => apiRequest("POST", "/api/admin/settings", data),
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ["/api/admin/settings"] });
            toast({ title: t('settings.smtp.saveSuccess', "Settings updated") });
        },
    });

    return (
        <Card>
            <CardHeader>
                <CardTitle>{t('settings.smtp.title')}</CardTitle>
                <CardDescription>{t('settings.smtp.description')}</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label>{t('settings.smtp.host')}</Label>
                        <Input placeholder="smtp.example.com" value={emailSettings.smtp_host} onChange={e => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })} />
                    </div>
                    <div className="space-y-2">
                        <Label>{t('settings.smtp.port')}</Label>
                        <Input placeholder="587" value={emailSettings.smtp_port} onChange={e => setEmailSettings({ ...emailSettings, smtp_port: e.target.value })} />
                    </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                    <div className="space-y-2">
                        <Label>{t('settings.smtp.user')}</Label>
                        <Input placeholder="user@example.com" value={emailSettings.smtp_user} onChange={e => setEmailSettings({ ...emailSettings, smtp_user: e.target.value })} />
                    </div>
                    <div className="space-y-2">
                        <Label>{t('settings.smtp.password')}</Label>
                        <Input type="password" placeholder="••••••" value={emailSettings.smtp_pass} onChange={e => setEmailSettings({ ...emailSettings, smtp_pass: e.target.value })} />
                    </div>
                </div>
                <div className="space-y-2">
                    <Label>{t('settings.smtp.from')}</Label>
                    <Input placeholder='"TaskFlow" <noreply@taskflow.local>' value={emailSettings.smtp_from} onChange={e => setEmailSettings({ ...emailSettings, smtp_from: e.target.value })} />
                </div>
                <div className="flex items-center justify-between">
                    <Label>{t('settings.smtp.secure')}</Label>
                    <Switch checked={emailSettings.smtp_secure} onCheckedChange={(c) => setEmailSettings({ ...emailSettings, smtp_secure: c })} />
                </div>
                <Button
                    onClick={() => updateSettingsMutation.mutate(emailSettings)}
                    disabled={updateSettingsMutation.isPending}
                    className="w-full"
                >
                    {updateSettingsMutation.isPending ? t('settings.smtp.saving') : t('settings.smtp.save')}
                </Button>
            </CardContent>
        </Card>
    );
}
