'use client';
import { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import Modal from './Modal';
import CooperativeSelect from './CooperativeSelect';
import PeriodSelect from './PeriodSelect';
import { fetchCooperatives } from '@/services/client/CompaniesService';
import { fetchPeriods } from '@/services/client/PeriodsService';

const ExportRequestModal = forwardRef(({ cooperatives: externalCoops, loadingCooperatives: externalLoadingCoops, errorCooperatives: externalErrorCoops, periods: externalPeriods, loadingPeriods: externalLoadingPeriods, errorPeriods: externalErrorPeriods }, ref) => {
    const { t } = useTranslation();
    const [isOpen, setIsOpen] = useState(false);
    const [isSuccessOpen, setIsSuccessOpen] = useState(false);
    const [subtitle, setSubtitle] = useState('');
    const [userEmail, setUserEmail] = useState('');
    const [coop, setCoop] = useState('');
    const [year, setYear] = useState('');
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [error, setError] = useState('');
    const [result, setResult] = useState(null);

    // Use external data if provided, otherwise fetch internally
    const hasExternalData = externalCoops !== undefined;

    const [internalCoops, setInternalCoops] = useState([]);
    const [internalLoadingCoops, setInternalLoadingCoops] = useState(false);
    const [internalErrorCoops, setInternalErrorCoops] = useState(null);
    const [internalPeriods, setInternalPeriods] = useState([]);
    const [internalLoadingPeriods, setInternalLoadingPeriods] = useState(false);
    const [internalErrorPeriods, setInternalErrorPeriods] = useState(null);

    useEffect(() => {
        if (hasExternalData) return;
        setInternalLoadingCoops(true);
        fetchCooperatives(
            (res) => {
                if (!res.result.status || res.result.error) {
                    setInternalErrorCoops(res.result.error || t('common.errorLoadingCooperatives'));
                } else {
                    const raw = res.value || [];
                    setInternalCoops(raw.map(c => ({
                        id: c.id || c.documentId || null,
                        name: c.completeName || c.shortName || c.name || t('common.noName'),
                        shortName: c.shortName || null,
                        code: c.code || c.codigo || c.slug || null,
                    })));
                }
            },
            () => setInternalLoadingCoops(false)
        );
    }, [hasExternalData, t]);

    useEffect(() => {
        if (hasExternalData) return;
        setInternalLoadingPeriods(true);
        fetchPeriods(
            (res) => {
                if (!res.result.status || res.result.error) {
                    setInternalErrorPeriods(res.result.error || t('common.errorLoadingPeriods'));
                } else {
                    setInternalPeriods(res.value || []);
                }
            },
            () => setInternalLoadingPeriods(false)
        );
    }, [hasExternalData, t]);

    const cooperatives = hasExternalData ? externalCoops : internalCoops;
    const loadingCooperatives = hasExternalData ? externalLoadingCoops : internalLoadingCoops;
    const errorCooperatives = hasExternalData ? externalErrorCoops : internalErrorCoops;
    const periods = hasExternalData ? externalPeriods : internalPeriods;
    const loadingPeriods = hasExternalData ? externalLoadingPeriods : internalLoadingPeriods;
    const errorPeriods = hasExternalData ? externalErrorPeriods : internalErrorPeriods;

    useImperativeHandle(ref, () => ({
        open: (options) => {
            setUserEmail('');
            setCoop('');
            setYear('');
            setError('');
            setResult(null);
            setSubtitle(options?.subtitle || '');
            setIsOpen(true);
        },
    }));

    const close = () => {
        setIsOpen(false);
        setUserEmail('');
        setCoop('');
        setYear('');
        setError('');
        setResult(null);
    };

    const closeSuccess = () => {
        setIsSuccessOpen(false);
        setResult(null);
    };

    const handleSubmit = async () => {
        if (!userEmail || !coop || !year || isSubmitting) return;
        setIsSubmitting(true);
        setError('');
        try {
            const { createExportRequest } = await import('@/services/client/IndicatorsService');
            const res = await createExportRequest({
                userEmail,
                company: coop,
                period: year,
            });
            if (!res.success) {
                setError(res.error || t('manageIndicatorsValues.exportRequest.errorFallback'));
            } else {
                setResult(res.data);
                close();
                setIsSuccessOpen(true);
            }
        } catch (err) {
            console.error('Error creating document request:', err);
            setError(err.message || t('manageIndicatorsValues.exportRequest.unknownError'));
        } finally {
            setIsSubmitting(false);
        }
    };

    const isFormValid = userEmail.trim() !== '' && coop !== '' && year !== '';

    return (
        <>
            <Modal
                isOpen={isOpen}
                onClose={close}
                title={subtitle ? <>{t('manageIndicatorsValues.exportRequest.title')}<br /><small>{subtitle}</small></> : t('manageIndicatorsValues.exportRequest.title')}
                onSubmit={handleSubmit}
                submitDisabled={!isFormValid || isSubmitting}
                submitLabel={isSubmitting ? t('manageIndicatorsValues.exportRequest.submitting') : t('manageIndicatorsValues.exportRequest.submit')}
                size="lg"
            >
                <div className="container-fluid indicator-form-section">
                    <div className="row">
                        <div className="col-12">
                            <div className="mb-4">
                                <h6 className="mb-3">{t('manageIndicatorsValues.exportRequest.sectionTitle')}</h6>
                                <p className="text-muted small mb-3">{t('manageIndicatorsValues.exportRequest.sectionSubtitle')}</p>
                            </div>
                            <div className="form-group mb-4">
                                <label className="form-label"><strong>{t('manageIndicatorsValues.exportRequest.email')}</strong> <span className="text-danger">*</span></label>
                                <input
                                    type="email"
                                    className="form-control"
                                    placeholder={t('manageIndicatorsValues.exportRequest.emailPlaceholder')}
                                    value={userEmail}
                                    onChange={(e) => setUserEmail(e.target.value)}
                                />
                                <small className="form-text text-muted">
                                    {t('manageIndicatorsValues.exportRequest.emailHint')}
                                </small>
                            </div>
                            <div className="row mb-4">
                                <div className="col-md-6">
                                    <CooperativeSelect
                                        cooperatives={cooperatives}
                                        loading={loadingCooperatives}
                                        error={errorCooperatives}
                                        value={coop}
                                        onChange={(e) => setCoop(e.target.value)}
                                        label="Entidad"
                                        required
                                        strongLabel
                                    />
                                </div>
                                <div className="col-md-6">
                                    <PeriodSelect
                                        periods={periods}
                                        loading={loadingPeriods}
                                        error={errorPeriods}
                                        value={year}
                                        onChange={(e) => setYear(e.target.value)}
                                        label={t('manageIndicatorsValues.exportRequest.year')}
                                        required
                                        strongLabel
                                        getOptionValue={(period) => (typeof period === 'object' && period !== null ? period.name : String(period))}
                                    />
                                </div>
                            </div>
                            {error && (
                                <div className="alert alert-danger">
                                    <div className="d-flex align-items-center">
                                        <svg style={{width: '20px', height: '20px', marginRight: '8px'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                        <span>{error}</span>
                                    </div>
                                </div>
                            )}
                            <div className="mt-4">
                                <h6 className="mb-2">{t('manageIndicatorsValues.exportRequest.infoTitle')}</h6>
                                <ul className="text-muted small">
                                    {t('manageIndicatorsValues.exportRequest.infoItems', { returnObjects: true }).map((item, idx) => (
                                        <li key={idx}>{item}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal>
            <Modal isOpen={isSuccessOpen} onClose={closeSuccess} title={t('manageIndicatorsValues.exportRequest.successTitle')} size="md">
                <div className="text-center">
                    <div className="mb-3">
                        <svg style={{width: '64px', height: '64px', color: '#28a745'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                    </div>
                    <h5 className="mb-3">{t('manageIndicatorsValues.exportRequest.successHeading')}</h5>
                    <p className="text-muted mb-4">{t('manageIndicatorsValues.exportRequest.successMessage')}</p>
                    {result && result.requestId && (
                        <p className="text-muted small mb-4">
                            <strong>{t('manageIndicatorsValues.exportRequest.requestIdLabel')}</strong> {result.requestId}
                        </p>
                    )}
                    <div className="text-center">
                        <button type="button" className="btn manual-upload-button" onClick={closeSuccess}>{t('manageIndicatorsValues.exportRequest.close')}</button>
                    </div>
                </div>
            </Modal>
        </>
    );
});

ExportRequestModal.displayName = 'ExportRequestModal';

export default ExportRequestModal;