import React, { useEffect, useState, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate } from 'react-router-dom';

import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Tag } from 'primereact/tag';
import { Toast } from 'primereact/toast';
import { Skeleton } from 'primereact/skeleton';

import RendicontazioneService from '../service/rendicontazioneService';

const STATUS_TAGS = {
    NOT_STARTED: { severity: 'info', label: 'Da avviare' },
    DRAFT: { severity: 'warning', label: 'In compilazione' },
    SUBMITTED: { severity: 'info', label: 'Inviata' },
    UNDER_REVIEW: { severity: 'info', label: 'In valutazione' },
    APPROVED: { severity: 'success', label: 'Approvata' },
    REJECTED: { severity: 'danger', label: 'Respinta' },
    AWAITING_AMENDMENT: { severity: 'warning', label: 'Soccorso istruttorio' }
};

const RendicontazioniMie = () => {
    const navigate = useNavigate();
    const toast = useRef(null);
    const [rows, setRows] = useState([]);
    const [loading, setLoading] = useState(true);

    const load = () => {
        setLoading(true);
        RendicontazioneService.listMine(
            (resp) => {
                const practices = (resp?.data?.practices || []).map(p => ({ ...p, isReady: false }));
                const ready = (resp?.data?.ready_to_start || []).map(r => ({ ...r, isReady: true }));
                setRows([...practices, ...ready]);
                setLoading(false);
            },
            (err) => {
                toast.current?.show({ severity: 'error', summary: __('Errore', 'gepafin'), detail: err?.detail });
                setLoading(false);
            }
        );
    };

    useEffect(() => { load(); /* eslint-disable-next-line */ }, []);

    const handleStart = (applicationId) => {
        RendicontazioneService.startPractice(applicationId,
            (resp) => {
                toast.current?.show({ severity: 'success', summary: __('Rendicontazione avviata', 'gepafin') });
                navigate(`/rendicontazioni/${resp.data.id}`);
            },
            (err) => toast.current?.show({ severity: 'error', summary: __('Avvio fallito', 'gepafin'), detail: err?.detail })
        );
    };

    const callTpl = (row) => (
        <div>
            <strong>{row.call_name || `Bando #${row.call_id}`}</strong>
            <div><small className="text-color-secondary">{row.company_name}</small></div>
        </div>
    );

    const erogatoTpl = (row) => {
        const v = Number(row.amount_erogato || 0);
        return <strong>€ {v.toLocaleString('it-IT', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</strong>;
    };

    const statusTpl = (row) => {
        const key = row.isReady ? 'NOT_STARTED' : (row.status || 'DRAFT');
        const conf = STATUS_TAGS[key] || { severity: 'secondary', label: key };
        return <Tag value={conf.label} severity={conf.severity} />;
    };

    const progressTpl = (row) => {
        if (row.isReady) return <span className="text-color-secondary">—</span>;
        return (
            <span className="text-color-secondary" style={{ fontSize: '0.9em' }}>
                {row.invoice_count || 0} {__('fatture','gepafin')} · {row.ula_count || 0} {__('dipendenti','gepafin')} · {row.document_count || 0} {__('doc','gepafin')}
            </span>
        );
    };

    const actionsTpl = (row) => {
        if (row.isReady) {
            return <Button icon="pi pi-play" label={__('Avvia rendicontazione', 'gepafin')}
                size="small" severity="success" onClick={() => handleStart(row.application_id)} />;
        }
        const isEditable = row.status === 'DRAFT';
        return <Button icon={isEditable ? 'pi pi-pencil' : 'pi pi-eye'}
            label={isEditable ? __('Continua', 'gepafin') : __('Apri', 'gepafin')}
            size="small" outlined={!isEditable}
            onClick={() => navigate(`/rendicontazioni/${row.id}`)} />;
    };

    return (
        <div className="appPage">
            <Toast ref={toast} />

            <div className="appPage__pageHeader">
                <h1>{__('Le mie rendicontazioni', 'gepafin')}</h1>
                <p>{__('Per ogni pratica finanziata puoi avviare la rendicontazione delle spese e il calcolo della remissione del debito.', 'gepafin')}</p>
            </div>

            <div className="appPage__spacer"></div>

            <div className="appPageSection">
                {loading && <Skeleton width="100%" height="10rem" />}
                {!loading && rows.length === 0 && (
                    <div style={{ padding: '2rem', textAlign: 'center', width: '100%' }}>
                        <i className="pi pi-inbox" style={{ fontSize: '2.5rem', color: 'var(--text-color-secondary)', display: 'block', marginBottom: '0.75rem' }} />
                        <p>{__('Non ci sono rendicontazioni da avviare al momento.', 'gepafin')}</p>
                        <small className="text-color-secondary">
                            {__('Le rendicontazioni diventano disponibili dopo la firma del contratto e quando l\'ente ha pubblicato lo schema di rendicontazione per il bando.', 'gepafin')}
                        </small>
                    </div>
                )}
                {!loading && rows.length > 0 && (
                    <DataTable value={rows} dataKey="id" stripedRows responsiveLayout="scroll" style={{ width: '100%' }}>
                        <Column header={__('Bando', 'gepafin')} body={callTpl} />
                        <Column header={__('Importo erogato', 'gepafin')} body={erogatoTpl} style={{ width: '180px' }} />
                        <Column header={__('Stato', 'gepafin')} body={statusTpl} style={{ width: '180px' }} />
                        <Column header={__('Avanzamento', 'gepafin')} body={progressTpl} />
                        <Column header={__('Azione', 'gepafin')} body={actionsTpl} style={{ width: '220px' }} />
                    </DataTable>
                )}
            </div>
        </div>
    );
};

export default RendicontazioniMie;