import {
    FormEvent,
    useCallback,
    useEffect,
    useState,
} from 'react';
import api from '../services/api';
import AppCard from '../components/ui/Card';
import AppButton from '../components/ui/Button';
import AppTextField from '../components/ui/TextField';
import Swal from 'sweetalert2';
import {
    Alert,
    Box,
    Grid,
    Stack,
    Typography,
} from '@mui/material';
import TypographyAnimated from '@/components/ui/TypographyAnimated';
import { useLocale } from '@/context/LocaleContext';

const ENDPOINT = import.meta.env.VITE_SETTINGS_ENDPOINT ?? '/api/settings';
const UPDATE_ENDPOINT = import.meta.env.VITE_SETTINGS_UPDATE_ENDPOINT ?? '/api/settings/update';

type SettingsPayload = {
    id: number;
    call_duration_min: string;
    call_duration_max: string;
    ring_duration_min: string;
    ring_duration_max: string;
    silences_duration_min: string;
    silences_duration_max: string;
    hold_duration_min: string;
    hold_duration_max: string;
    mute_duration_min: string;
    mute_duration_max: string;
    transfer_duration_min: string;
    transfer_duration_max: string;
    monolog_agent_duration_min: string;
    monolog_agent_duration_max: string;
    tt_agent_duration_min: string;
    tt_agent_duration_max: string;
};

type SettingsField = Exclude<keyof SettingsPayload, 'id'>;

const FIELD_CONFIG: Array<{ key: SettingsField; label: string }> = [
    { key: 'call_duration_min', label: 'Call Duration Min' },
    { key: 'call_duration_max', label: 'Call Duration Max' },
    { key: 'ring_duration_min', label: 'Ring Duration Min' },
    { key: 'ring_duration_max', label: 'Ring Duration Max' },
    { key: 'silences_duration_min', label: 'Silences Duration Min' },
    { key: 'silences_duration_max', label: 'Silences Duration Max' },
    { key: 'hold_duration_min', label: 'Hold Duration Min' },
    { key: 'hold_duration_max', label: 'Hold Duration Max' },
    { key: 'mute_duration_min', label: 'Mute Duration Min' },
    { key: 'mute_duration_max', label: 'Mute Duration Max' },
    { key: 'transfer_duration_min', label: 'Transfer Duration Min' },
    { key: 'transfer_duration_max', label: 'Transfer Duration Max' },
    {
        key: 'monolog_agent_duration_min',
        label: 'Monolog Agent Duration Min',
    },
    {
        key: 'monolog_agent_duration_max',
        label: 'Monolog Agent Duration Max',
    },
    { key: 'tt_agent_duration_min', label: 'TT Agent Duration Min' },
    { key: 'tt_agent_duration_max', label: 'TT Agent Duration Max' },
];

const INITIAL_FORM: Record<SettingsField, string> = {
    call_duration_min: '',
    call_duration_max: '',
    ring_duration_min: '',
    ring_duration_max: '',
    silences_duration_min: '',
    silences_duration_max: '',
    hold_duration_min: '',
    hold_duration_max: '',
    mute_duration_min: '',
    mute_duration_max: '',
    transfer_duration_min: '',
    transfer_duration_max: '',
    monolog_agent_duration_min: '',
    monolog_agent_duration_max: '',
    tt_agent_duration_min: '',
    tt_agent_duration_max: '',
};

export default function Setting() {
    const { t } = useLocale();
    const [loadError, setLoadError] = useState<string | null>(null);
    const [formValues, setFormValues] = useState<Record<SettingsField, string>>(INITIAL_FORM);

    const [saving, setSaving] = useState(false);
    const [success, setSuccess] = useState<string | null>(null);
    const [formError, setFormError] = useState<string | null>(null);
    const [fieldErrors, setFieldErrors] = useState<Record<string, string[]>>(
        {},
    );

    const fetchSettings = useCallback(async () => {
        setLoadError(null);
        try {
            const { data } = await api.post<SettingsPayload | SettingsPayload[]>(
                ENDPOINT,
            );
            const source = Array.isArray(data) ? data[0] : data;
            if (!source) {
                setFormValues(INITIAL_FORM);
                setLoadError('No se encontró configuración de alertas.');
                return;
            }

            const next = { ...INITIAL_FORM };
            FIELD_CONFIG.forEach(({ key }) => {
                const raw = source[key];
                next[key] =
                    raw === null || raw === undefined ? '' : String(raw);
            });
            setFormValues(next);
        } catch {
            setFormValues(INITIAL_FORM);
            setLoadError(t('settings', 'profile_load_error'));
        }
    }, [t]);

    useEffect(() => {
        void fetchSettings();
    }, [fetchSettings]);

    async function onSubmit(e: FormEvent) {
        e.preventDefault();
        setFormError(null);
        setFieldErrors({});
        setSuccess(null);

        const confirm = await Swal.fire({
            title: 'Confirmar actualización',
            text: 'Se actualizarán los valores de configuración de alertas.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, guardar',
            cancelButtonText: 'Cancelar',
        });

        if (!confirm.isConfirmed) {
            return;
        }

        setSaving(true);
        try {
            const fd = new FormData();
            FIELD_CONFIG.forEach(({ key }) => {
                fd.append(key, formValues[key]);
            });

            const { data } = await api.post<{
                message?: string;
                settings?: SettingsPayload;
            }>(UPDATE_ENDPOINT, fd);

            setSuccess(
                data.message ??
                    t('settings', 'profile_updated_success'),
            );

            void fetchSettings();
        } catch (err: unknown) {
            if (
                err &&
                typeof err === 'object' &&
                'response' in err &&
                err.response &&
                typeof err.response === 'object' &&
                'status' in err.response &&
                err.response.status === 422 &&
                'data' in err.response
            ) {
                const payload = err.response.data as {
                    message?: string;
                    errors?: Record<string, string[]>;
                };
                setFieldErrors(payload.errors ?? {});
                setFormError(
                    payload.message ??
                        t('settings', 'profile_save_error'),
                );
            } else {
                setFormError(t('settings', 'profile_save_error'));
            }
        } finally {
            setSaving(false);
        }
    }

    return (
        <div className="container-fluid">
            <div className=" col-lg-4 col-xxl-4">
                <AppCard>    
                <TypographyAnimated
                        variant="subtitle2"
                        prefix={t('settings', 'top_heading_prefix')}
                        rotatingWords={t('settings', 'top_heading_rotating')
                            .split('|')
                            .map((s) => s.trim())
                            .filter(Boolean)}
                        sx={{
                            color: 'text.primary',
                            fontWeight: 600,
                            textTransform: 'uppercase',
                            letterSpacing: '0.18em',
                            fontSize: '1.3rem',
                        }}
                    />
                    <Box
                            component="form"
                            id="Account-form"
                            onSubmit={onSubmit}
                            sx={{ mt: 2 }}
                        >
                            <Stack spacing={3} mt={6}>
                                {success ? (
                                    <Alert
                                        severity="success"
                                        onClose={() => setSuccess(null)}
                                    >
                                        {success}
                                    </Alert>
                                ) : null}
                                {formError ? (
                                    <Alert severity="error">{formError}</Alert>
                                ) : null}
                                {loadError ? (
                                    <Alert severity="warning">{loadError}</Alert>
                                ) : null}

                                <Grid container spacing={2} padding={2}>
                                    {FIELD_CONFIG.map((field) => (
                                        <Grid key={field.key} size={{ xs: 12, md: 6 }} mb={4}>
                                            <AppTextField
                                                fullWidth
                                                id={field.key}
                                                name={field.key}
                                                type="number"
                                                label={t('settings', field.label)}
                                                value={formValues[field.key]}
                                                onChange={(e) =>
                                                    setFormValues((prev) => ({
                                                        ...prev,
                                                        [field.key]:
                                                            e.target.value,
                                                    }))
                                                }
                                                error={Boolean(
                                                    fieldErrors[field.key],
                                                )}
                                                helperText={fieldErrors[
                                                    field.key
                                                ]?.join(' ')}
                                            />
                                        </Grid>
                                    ))}
                                    <Grid size={{ xs: 12 }}>
                                        <Stack
                                            direction="row"
                                            justifyContent="flex-end"
                                        >
                                            <AppButton
                                                type="submit"
                                                disabled={saving}
                                            >
                                                {saving
                                                    ? t('settings', 'saving')
                                                    : t(
                                                            'settings',
                                                            'submit',
                                                        )}
                                            </AppButton>
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Stack>
                        </Box>
                </AppCard>
            </div>
              
        </div>
    );
}