import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import CpasBadge, { getTier } from './CpasBadge';
import NegateModal from './NegateModal';

const s = {
    overlay:    { position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 1000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end' },
    panel:      { background: 'white', width: '680px', maxWidth: '95vw', height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 24px rgba(0,0,0,0.18)', display: 'flex', flexDirection: 'column' },
    header:     { background: 'linear-gradient(135deg, #2c3e50, #34495e)', color: 'white', padding: '24px 28px', position: 'sticky', top: 0, zIndex: 10 },
    closeBtn:   { float: 'right', background: 'none', border: 'none', color: 'white', fontSize: '22px', cursor: 'pointer', lineHeight: 1, marginTop: '-2px' },
    body:       { padding: '24px 28px', flex: 1 },
    scoreRow:   { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '24px' },
    scoreCard:  { flex: '1', minWidth: '100px', background: '#f8f9fa', borderRadius: '8px', padding: '14px', textAlign: 'center', border: '1px solid #dee2e6' },
    scoreNum:   { fontSize: '26px', fontWeight: 800 },
    scoreLbl:   { fontSize: '11px', color: '#888', marginTop: '3px' },
    sectionHd:  { fontSize: '13px', fontWeight: 700, color: '#34495e', textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '10px', marginTop: '24px' },
    table:      { width: '100%', borderCollapse: 'collapse', fontSize: '12px' },
    th:         { background: '#f1f3f5', padding: '8px 10px', textAlign: 'left', color: '#555', fontWeight: 600, fontSize: '11px', textTransform: 'uppercase' },
    td:         { padding: '9px 10px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'top' },
    negatedRow: { background: '#f8f8f8', color: '#aaa' },
    actionBtn:  (color) => ({ background: 'none', border: `1px solid ${color}`, color, borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', marginRight: '4px', fontWeight: 600 }),
    resTag:     { display: 'inline-block', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 700, background: '#d4edda', color: '#155724', border: '1px solid #c3e6cb' },
    pdfBtn:     { background: 'none', border: '1px solid #667eea', color: '#667eea', borderRadius: '4px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', fontWeight: 600 },
    deleteConfirm: { background: '#f8d7da', border: '1px solid #f5c6cb', borderRadius: '6px', padding: '12px', marginTop: '8px', fontSize: '12px' },
};

export default function EmployeeModal({ employeeId, onClose }) {
    const [employee,   setEmployee]   = useState(null);
    const [score,      setScore]      = useState(null);
    const [violations, setViolations] = useState([]);
    const [loading,    setLoading]    = useState(true);
    const [negating,   setNegating]   = useState(null);
    const [confirmDel, setConfirmDel] = useState(null);

    const load = useCallback(() => {
        setLoading(true);
        Promise.all([
            axios.get('/api/employees'),
            axios.get(`/api/employees/${employeeId}/score`),
            axios.get(`/api/violations/employee/${employeeId}?limit=100`),
        ]).then(([empRes, scoreRes, violRes]) => {
            const emp = empRes.data.find(e => e.id === employeeId);
            setEmployee(emp || null);
            setScore(scoreRes.data);
            setViolations(violRes.data);
        }).finally(() => setLoading(false));
    }, [employeeId]);

    useEffect(() => { load(); }, [load]);

    const handleDownloadPdf = async (violId, empName, date) => {
        const response = await axios.get(`/api/violations/${violId}/pdf`, { responseType: 'blob' });
        const url  = window.URL.createObjectURL(new Blob([response.data], { type: 'application/pdf' }));
        const link = document.createElement('a');
        link.href  = url;
        link.download = `CPAS_${(empName||'').replace(/[^a-z0-9]/gi,'_')}_${date}.pdf`;
        document.body.appendChild(link);
        link.click();
        link.remove();
        window.URL.revokeObjectURL(url);
    };

    const handleHardDelete = async (id) => {
        await axios.delete(`/api/violations/${id}`);
        setConfirmDel(null);
        load(); // ← refetch employee list, score, and violations
    };

    const handleRestore = async (id) => {
        await axios.patch(`/api/violations/${id}/restore`);
        load(); // ← refetch employee list, score, and violations
    };

    const handleNegate = async ({ resolution_type, details, resolved_by }) => {
        await axios.patch(`/api/violations/${negating.id}/negate`, { resolution_type, details, resolved_by });
        setNegating(null);
        load(); // ← CRITICAL FIX: refetch score immediately after negation
    };

    const tier    = score ? getTier(score.active_points) : null;
    const active  = violations.filter(v => !v.negated);
    const negated = violations.filter(v => v.negated);

    return (
        <div style={s.overlay} onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
            <div style={s.panel}>

                {/* ── Header ──────────────────────────────────── */}
                <div style={s.header}>
                    <button style={s.closeBtn} onClick={onClose}>✕</button>
                    <div style={{ fontSize: '20px', fontWeight: 700 }}>
                        {loading ? 'Loading…' : (employee?.name || 'Employee Profile')}
                    </div>
                    {employee && (
                        <div style={{ fontSize: '12px', opacity: 0.75, marginTop: '4px' }}>
                            {[employee.department, employee.supervisor ? `Supervisor: ${employee.supervisor}` : null].filter(Boolean).join(' · ')}
                        </div>
                    )}
                </div>

                <div style={s.body}>
                    {loading ? (
                        <p style={{ color: '#aaa', textAlign: 'center', paddingTop: '40px' }}>Loading…</p>
                    ) : (<>

                        {/* ── Score cards ───────────────────────── */}
                        <div style={s.scoreRow}>
                            <div style={{ ...s.scoreCard, borderTop: `3px solid ${tier?.color}` }}>
                                <div style={{ ...s.scoreNum, color: tier?.color }}>{score?.active_points ?? 0}</div>
                                <div style={s.scoreLbl}>Active Points</div>
                            </div>
                            <div style={s.scoreCard}>
                                <div style={s.scoreNum}>{score?.violation_count ?? 0}</div>
                                <div style={s.scoreLbl}>90-Day Violations</div>
                            </div>
                            <div style={s.scoreCard}>
                                <div style={s.scoreNum}>{active.length}</div>
                                <div style={s.scoreLbl}>Total On Record</div>
                            </div>
                            <div style={s.scoreCard}>
                                <div style={{ ...s.scoreNum, color: '#888' }}>{negated.length}</div>
                                <div style={s.scoreLbl}>Negated</div>
                            </div>
                        </div>

                        {tier && (
                            <div style={{ background: '#f8f9fa', borderRadius: '6px', padding: '10px 14px', marginBottom: '16px', fontSize: '13px', border: `1px solid ${tier.color}33` }}>
                                <strong style={{ color: tier.color }}>{tier.label}</strong>
                                <span style={{ color: '#888', marginLeft: '10px', fontSize: '12px' }}>Rolling 90-day window · Points expire automatically</span>
                            </div>
                        )}

                        {/* ── Active violations ─────────────────── */}
                        <div style={s.sectionHd}>Active Violations</div>
                        {active.length === 0 ? (
                            <p style={{ color: '#aaa', fontSize: '13px', fontStyle: 'italic' }}>No active violations on record.</p>
                        ) : (
                            <table style={s.table}>
                                <thead>
                                    <tr>
                                        <th style={s.th}>Date</th>
                                        <th style={s.th}>Violation</th>
                                        <th style={s.th}>Pts</th>
                                        <th style={s.th}>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {active.map(v => (
                                        <tr key={v.id}>
                                            <td style={s.td}>{v.incident_date}</td>
                                            <td style={s.td}>
                                                <div style={{ fontWeight: 600 }}>{v.violation_name}</div>
                                                <div style={{ color: '#888', fontSize: '11px' }}>{v.category}</div>
                                                {v.details && <div style={{ color: '#666', fontSize: '11px', marginTop: '3px', fontStyle: 'italic' }}>{v.details}</div>}
                                            </td>
                                            <td style={{ ...s.td, fontWeight: 700, color: '#c0392b' }}>{v.points}</td>
                                            <td style={s.td}>
                                                <button style={s.actionBtn('#856404')} onClick={() => setNegating(v)}>⊘ Negate</button>
                                                <button style={s.pdfBtn} onClick={() => handleDownloadPdf(v.id, employee?.name, v.incident_date)}>PDF</button>
                                                <br />
                                                {confirmDel === v.id ? (
                                                    <div style={s.deleteConfirm}>
                                                        <strong>Permanently delete?</strong> This cannot be undone.
                                                        <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
                                                            <button style={s.actionBtn('#c0392b')} onClick={() => handleHardDelete(v.id)}>Confirm Delete</button>
                                                            <button style={s.actionBtn('#666')} onClick={() => setConfirmDel(null)}>Cancel</button>
                                                        </div>
                                                    </div>
                                                ) : (
                                                    <button style={{ ...s.actionBtn('#c0392b'), marginTop: '4px' }} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        )}

                        {/* ── Negated violations ────────────────── */}
                        {negated.length > 0 && (<>
                            <div style={s.sectionHd}>Negated / Resolved Violations</div>
                            <table style={s.table}>
                                <thead>
                                    <tr>
                                        <th style={s.th}>Date</th>
                                        <th style={s.th}>Violation</th>
                                        <th style={s.th}>Pts</th>
                                        <th style={s.th}>Resolution</th>
                                        <th style={s.th}>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {negated.map(v => (
                                        <tr key={v.id} style={s.negatedRow}>
                                            <td style={s.td}>{v.incident_date}</td>
                                            <td style={s.td}>
                                                <div style={{ textDecoration: 'line-through' }}>{v.violation_name}</div>
                                                <div style={{ fontSize: '11px', color: '#aaa' }}>{v.category}</div>
                                            </td>
                                            <td style={{ ...s.td, textDecoration: 'line-through', color: '#aaa' }}>{v.points}</td>
                                            <td style={s.td}>
                                                <span style={s.resTag}>{v.resolution_type}</span>
                                                {v.resolution_details && <div style={{ fontSize: '11px', marginTop: '3px', color: '#666' }}>{v.resolution_details}</div>}
                                                {v.resolved_by && <div style={{ fontSize: '10px', color: '#aaa' }}>by {v.resolved_by}</div>}
                                            </td>
                                            <td style={s.td}>
                                                <button style={s.actionBtn('#28a745')} onClick={() => handleRestore(v.id)}>↩ Restore</button>
                                                {confirmDel === v.id ? (
                                                    <div style={s.deleteConfirm}>
                                                        <strong>Permanently delete?</strong>
                                                        <div style={{ marginTop: '8px', display: 'flex', gap: '8px' }}>
                                                            <button style={s.actionBtn('#c0392b')} onClick={() => handleHardDelete(v.id)}>Confirm</button>
                                                            <button style={s.actionBtn('#666')} onClick={() => setConfirmDel(null)}>Cancel</button>
                                                        </div>
                                                    </div>
                                                ) : (
                                                    <button style={s.actionBtn('#c0392b')} onClick={() => setConfirmDel(v.id)}>✕ Delete</button>
                                                )}
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </>)}

                    </>)}
                </div>
            </div>

            {/* ── Negate sub-modal ────────────────────────────────── */}
            {negating && (
                <NegateModal
                    violation={negating}
                    onConfirm={handleNegate}
                    onCancel={() => setNegating(null)}
                />
            )}
        </div>
    );
}