import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItemButton, ListItemText, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useState } from "react";
import "./pages.css";
import {useTranslation} from "react-i18next";
import OrderType from "../components/Order";

const mockOrders: OrderType[] = [
    {
        id: "1001",
        date: "2025-05-20",
        status: "active",
        items: [
            { name: "Tomatensamen", quantity: 2, price: 3.99 },
            { name: "Blumenerde", quantity: 1, price: 7.49 }
        ],
        total: 15.47,
        address: "Musterstraße 1, 12345 Musterstadt"
    },
    {
        id: "1000",
        date: "2025-05-10",
        status: "inactive",
        items: [
            { name: "Gießkanne", quantity: 1, price: 12.99 }
        ],
        total: 12.99,
        address: "Musterstraße 1, 12345 Musterstadt"
    }
];

export default function Orders() {

    const { t } = useTranslation();

    const [tab, setTab] = useState(0);
    const [selectedOrder, setSelectedOrder] = useState<OrderType | null>(null);

    const activeOrders = mockOrders.filter(o => o.status === "active");
    const inactiveOrders = mockOrders.filter(o => o.status === "inactive");

    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => setTab(newValue);

    const handleCancelOrder = (orderId: string) => {
        // Hier API-Call zum Stornieren einbauen
        alert(`${t('orderCancelled')} #${orderId}`);
        setSelectedOrder(null);
    };

    return (
        <Box className="page-background" sx={{ minHeight: "100vh", pt: 4 }}>
            <Paper elevation={3} sx={{ p: 4, maxWidth: 700, width: "100%", mx: "auto" }}>
                <Typography variant="h4" gutterBottom>
                    {t('myOrders')}
                </Typography>
                <Tabs value={tab} onChange={handleTabChange} sx={{ mb: 3 }}>
                    <Tab label={t('active')} />
                    <Tab label={t('previous')} />
                </Tabs>
                <Divider sx={{ mb: 2 }} />
                {tab === 0 ? (
                    activeOrders.length > 0 ? (
                        <List>
                            {activeOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
                                        primary={`${t('order')} #${order.id} • ${order.date}`}
                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
                        </List>
                    ) : (
                        <Typography color="text.secondary">{t('noActiveOrders')}</Typography>
                    )
                ) : (
                    inactiveOrders.length > 0 ? (
                        <List>
                            {inactiveOrders.map(order => (
                                <ListItemButton key={order.id} onClick={() => setSelectedOrder(order)}>
                                    <ListItemText
                                        primary={`${t('order')} #${order.id} • ${order.date}`}
                                        secondary={`${t('sum')}: ${order.total.toFixed(2)} € • ${order.items.length} ${t('items')}`}
                                    />
                                </ListItemButton>
                            ))}
                        </List>
                    ) : (
                        <Typography color="text.secondary">{t('noPreviousOrders')}</Typography>
                    )
                )}

                <Dialog open={!!selectedOrder} onClose={() => setSelectedOrder(null)} maxWidth="sm" fullWidth>
                    <DialogTitle>
                        {`${selectedOrder?.status === "active" ? t('activeOrder') : t('previousOrder')} #${selectedOrder?.id}`}
                    </DialogTitle>
                    <DialogContent dividers>
                        {selectedOrder && (
                            <Stack spacing={2}>
                                <Typography variant="subtitle1">{`${t('orderDate')}: ${selectedOrder.date}`}</Typography>
                                <Typography variant="subtitle1">{`${t('shippingAddress')}: ${selectedOrder.address}`}</Typography>
                                <Divider />
                                <Typography variant="subtitle2">{t('orderedItems')}:</Typography>
                                <List dense>
                                    {selectedOrder.items.map((item, idx) => (
                                        <ListItemText
                                            key={idx}
                                            primary={`${item.name} x${item.quantity}`}
                                            secondary={`${t('pricePerItem')}: ${item.price.toFixed(2)} €`}
                                        />
                                    ))}
                                </List>
                                <Divider />
                                <Typography variant="h6">{`${t('sum')}: ${selectedOrder.total.toFixed(2)} €`}</Typography>
                            </Stack>
                        )}
                    </DialogContent>
                    <DialogActions>
                        {selectedOrder?.status === "active" && (
                            <Button color="error" onClick={() => handleCancelOrder(selectedOrder.id)}>
                                {t('cancelOrder')}
                            </Button>
                        )}
                        <Button onClick={() => setSelectedOrder(null)}>{t('close')}</Button>
                    </DialogActions>
                </Dialog>
            </Paper>
        </Box>
    );
}
