import { Box, Typography, Button, TextField, Paper, Divider, Stack } from "@mui/material";
import { useNavigate } from "react-router-dom";
import "./pages.css";
import { useState } from "react";
import {useTranslation} from "react-i18next";

export default function Account() {

    const { t } = useTranslation();
    const navigate = useNavigate();

    // Beispielhafte Userdaten (könnten aus Context/Backend kommen)
    const [user, setUser] = useState({
        name: "Max Mustermann",
        email: "max.mustermann@email.de",
        phone: "+49 123 456789",
        address: "Musterstraße 1, 12345 Musterstadt"
    });

    const [edit, setEdit] = useState(false);
    const [form, setForm] = useState(user);

    const handleEdit = () => setEdit(true);
    const handleCancel = () => {
        setForm(user);
        setEdit(false);
    };
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setForm({ ...form, [e.target.name]: e.target.value });
    };
    const handleSave = () => {
        setUser(form);
        setEdit(false);
    };
    const handleDelete = () => {
        // Hier ggf. Dialog oder API-Call zum Löschen
        alert(t('accountDeleted'));
        navigate("/");
    };

    return (
        <Box className="page-background" sx={{ minHeight: "100vh", justifyContent: "flex-start", pt: 4 }}>
            <Paper elevation={3} sx={{ p: 4, maxWidth: 500, width: "100%", mx: "auto" }}>
                <Typography variant="h4" gutterBottom>
                    {t('myAccount')}
                </Typography>
                <Divider sx={{ mb: 3 }} />
                <Stack spacing={2}>
                    <TextField
                        label={t('name')}
                        name="name"
                        value={edit ? form.name : user.name}
                        onChange={handleChange}
                        disabled={!edit}
                        fullWidth
                    />
                    <TextField
                        label={t('email')}
                        name="email"
                        value={edit ? form.email : user.email}
                        onChange={handleChange}
                        disabled={!edit}
                        fullWidth
                    />
                    <TextField
                        label={t('phone')}
                        name="phone"
                        value={edit ? form.phone : user.phone}
                        onChange={handleChange}
                        disabled={!edit}
                        fullWidth
                    />
                    <TextField
                        label={t('address')}
                        name="address"
                        value={edit ? form.address : user.address}
                        onChange={handleChange}
                        disabled={!edit}
                        fullWidth
                    />
                </Stack>
                <Box sx={{ display: "flex", gap: 2, mt: 4 }}>
                    {edit ? (
                        <>
                            <Button variant="contained" color="primary" onClick={handleSave}>
                                {t('save')}
                            </Button>
                            <Button variant="outlined" color="secondary" onClick={handleCancel}>
                                {t('cancel')}
                            </Button>
                        </>
                    ) : (
                        <Button variant="contained" color="primary" onClick={handleEdit}>
                            {t('edit')}
                        </Button>
                    )}
                    <Button
                        variant="outlined"
                        color="error"
                        onClick={handleDelete}
                        sx={{ marginLeft: "auto" }}
                    >
                        {t('deleteAccount')}
                    </Button>
                </Box>
            </Paper>
        </Box>
    );
}