import React, { useState, useEffect } from 'react';
import { Container, Typography, Select, MenuItem, Button, Card, CardContent, CircularProgress } from '@mui/material';
import type { SelectChangeEvent } from '@mui/material/Select';
import api from '../services/api';

interface Sign {
    id: number;
    name: string;
    icon: string;
}

const Home: React.FC = () => {
    const [signs, setSigns] = useState<Sign[]>([]);
    const [selectedSign, setSelectedSign] = useState<string>('');
    const [timeline, setTimeline] = useState<string>('daily');
    const [horoscope, setHoroscope] = useState<string>('');
    const [loading, setLoading] = useState<boolean>(false);

    useEffect(() => {
        const fetchSigns = async () => {
            try {
                const response = await api.get('/signs', {
                    headers: {
                        Authorization: `Bearer ${localStorage.getItem('token')}`
                    }
                });
                setSigns(response.data);
            } catch (error) {
                console.error('Failed to fetch signs', error);
            }
        };

        fetchSigns();
    }, []);

    const handleGetHoroscope = async () => {
        if (!selectedSign) return;
        setLoading(true);
        try {
            const response = await api.get(`/horoscope/${selectedSign}/${timeline}`, {
                headers: {
                    Authorization: `Bearer ${localStorage.getItem('token')}`
                }
            });
            setHoroscope(response.data.horoscope);
        } catch (error) {
            console.error('Failed to fetch horoscope', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <Container>
            <Typography variant="h4" component="h1" gutterBottom>
                Your Horoscopes
            </Typography>
            <Select
                value={selectedSign}
                onChange={(e: SelectChangeEvent) => setSelectedSign(e.target.value)}
                displayEmpty
                fullWidth
                margin="normal"
            >
                <MenuItem value="" disabled>
                    Select a Sign
                </MenuItem>
                {signs.map((sign) => (
                    <MenuItem key={sign.id} value={sign.name}>
                        {sign.icon} {sign.name}
                    </MenuItem>
                ))}
            </Select>
            <Select
                value={timeline}
                onChange={(e: SelectChangeEvent) => setTimeline(e.target.value)}
                fullWidth
                margin="normal"
            >
                <MenuItem value="daily">Daily</MenuItem>
                <MenuItem value="weekly">Weekly</MenuItem>
                <MenuItem value="monthly">Monthly</MenuItem>
                <MenuItem value="yearly">Yearly</MenuItem>
            </Select>
            <Button variant="contained" color="primary" fullWidth onClick={handleGetHoroscope} disabled={loading}>
                {loading ? <CircularProgress size={24} /> : 'Get Horoscope'}
            </Button>
            {horoscope && (
                <Card sx={{ marginTop: 2 }}>
                    <CardContent>
                        <Typography variant="h5" component="h2">
                            {selectedSign} - {timeline}
                        </Typography>
                        <Typography variant="body1">
                            {horoscope}
                        </Typography>
                    </CardContent>
                </Card>
            )}
        </Container>
    );
};

export default Home;