import React, { useEffect, useState } from 'react';
import { CondoService } from '../services/mockDb';
import { Ticket, TicketStatus, TicketPriority, TicketCategory, TicketAttachment } from '../types';
import { MessageSquareWarning, Plus, Search, Filter, Paperclip, X, CheckCircle2, Clock, XCircle, FileIcon, Image as ImageIcon, Film } from 'lucide-react';

export const TicketsPage: React.FC = () => {
    const user = CondoService.getCurrentUser();
    const isAdmin = user?.role === 'admin' || user?.role === 'poweruser';

    const [tickets, setTickets] = useState<Ticket[]>([]);
    const [loading, setLoading] = useState(true);
    const [filterStatus, setFilterStatus] = useState<string>('ALL');
    const [showModal, setShowModal] = useState(false);
    const [viewTicket, setViewTicket] = useState<Ticket | null>(null);
    const [submitting, setSubmitting] = useState(false);

    // Form State
    const [formTitle, setFormTitle] = useState('');
    const [formDesc, setFormDesc] = useState('');
    const [formCategory, setFormCategory] = useState<TicketCategory>(TicketCategory.OTHER);
    const [formPriority, setFormPriority] = useState<TicketPriority>(TicketPriority.MEDIUM);
    const [attachments, setAttachments] = useState<{fileName: string, fileType: string, data: string}[]>([]);
    
    // File Reading helper
    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            const newAttachments = [];
            for (let i = 0; i < e.target.files.length; i++) {
                const file = e.target.files[i];
                // Check size (e.g. 5MB limit per file for demo safety)
                if (file.size > 5 * 1024 * 1024) {
                    alert(`Il file ${file.name} è troppo grande (max 5MB)`);
                    continue;
                }
                
                const base64 = await new Promise<string>((resolve, reject) => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => resolve(reader.result as string);
                    reader.onerror = error => reject(error);
                });
                
                newAttachments.push({
                    fileName: file.name,
                    fileType: file.type,
                    data: base64
                });
            }
            setAttachments([...attachments, ...newAttachments]);
        }
    };

    const removeAttachment = (index: number) => {
        const newAtt = [...attachments];
        newAtt.splice(index, 1);
        setAttachments(newAtt);
    };

    const loadTickets = async () => {
        setLoading(true);
        try {
            const list = await CondoService.getTickets();
            setTickets(list);
        } catch (e) {
            console.error(e);
        } finally {
            setLoading(false);
        }
    };

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

    const handleCreateSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setSubmitting(true);
        try {
            await CondoService.createTicket({
                title: formTitle,
                description: formDesc,
                category: formCategory,
                priority: formPriority,
                attachments: attachments
            });
            setShowModal(false);
            // Reset form
            setFormTitle('');
            setFormDesc('');
            setAttachments([]);
            loadTickets();
        } catch (e) {
            alert("Errore creazione ticket");
            console.error(e);
        } finally {
            setSubmitting(false);
        }
    };

    const handleStatusUpdate = async (status: TicketStatus) => {
        if (!viewTicket) return;
        try {
            await CondoService.updateTicket(viewTicket.id, {
                status: status,
                priority: viewTicket.priority
            });
            // Update local state
            const updated = { ...viewTicket, status };
            setViewTicket(updated);
            setTickets(tickets.map(t => t.id === updated.id ? updated : t));
        } catch (e) { console.error(e); }
    };
    
    const handleDeleteTicket = async (id: string) => {
        if (!confirm("Eliminare definitivamente questa segnalazione?")) return;
        try {
            await CondoService.deleteTicket(id);
            setTickets(tickets.filter(t => t.id !== id));
            setViewTicket(null);
        } catch (e) { alert("Impossibile eliminare."); }
    };

    const filteredTickets = tickets.filter(t => filterStatus === 'ALL' || t.status === filterStatus);

    // Helpers for Badge Colors
    const getStatusColor = (s: TicketStatus) => {
        switch(s) {
            case TicketStatus.OPEN: return 'bg-blue-100 text-blue-700';
            case TicketStatus.IN_PROGRESS: return 'bg-yellow-100 text-yellow-700';
            case TicketStatus.RESOLVED: return 'bg-green-100 text-green-700';
            case TicketStatus.CLOSED: return 'bg-slate-200 text-slate-600';
        }
    };
    
    const getPriorityColor = (p: TicketPriority) => {
        switch(p) {
            case TicketPriority.LOW: return 'bg-slate-100 text-slate-600';
            case TicketPriority.MEDIUM: return 'bg-blue-50 text-blue-600';
            case TicketPriority.HIGH: return 'bg-orange-100 text-orange-600';
            case TicketPriority.URGENT: return 'bg-red-100 text-red-600';
        }
    };

    const getCategoryLabel = (c: TicketCategory) => {
        switch(c) {
            case TicketCategory.MAINTENANCE: return 'Manutenzione';
            case TicketCategory.ADMINISTRATIVE: return 'Amministrazione';
            case TicketCategory.CLEANING: return 'Pulizie';
            case TicketCategory.NOISE: return 'Disturbo';
            default: return 'Altro';
        }
    };

    const openAttachment = async (ticketId: string, attId: string) => {
        try {
            const file = await CondoService.getTicketAttachment(ticketId, attId);
            // Open base64 in new tab
            const win = window.open();
            if (win) {
                // Determine display method
                if (file.fileType.startsWith('image/')) {
                    win.document.write(`<img src="${file.data}" style="max-width:100%"/>`);
                } else if (file.fileType === 'application/pdf') {
                    win.document.write(`<iframe src="${file.data}" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>`);
                } else {
                    // Download link fallback
                     win.document.write(`<a href="${file.data}" download="${file.fileName}">Clicca qui per scaricare ${file.fileName}</a>`);
                }
            }
        } catch (e) { alert("Errore apertura file"); }
    };

    return (
        <div className="space-y-6 pb-20">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h2 className="text-2xl font-bold text-slate-800">Segnalazioni</h2>
                    <p className="text-slate-500">Gestisci guasti e richieste</p>
                </div>
                <button 
                    onClick={() => setShowModal(true)} 
                    className="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 hover:bg-blue-700 transition-colors"
                >
                    <Plus className="w-5 h-5"/> Nuova Segnalazione
                </button>
            </div>

            {/* Filters */}
            <div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar">
                {['ALL', 'OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'].map(status => (
                    <button
                        key={status}
                        onClick={() => setFilterStatus(status)}
                        className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap ${filterStatus === status ? 'bg-slate-800 text-white' : 'bg-white border border-slate-200 text-slate-600 hover:bg-slate-50'}`}
                    >
                        {status === 'ALL' ? 'Tutti' : status === 'OPEN' ? 'Aperti' : status === 'IN_PROGRESS' ? 'In Corso' : status === 'RESOLVED' ? 'Risolti' : 'Chiusi'}
                    </button>
                ))}
            </div>

            {/* List */}
            {loading ? (
                <div className="text-center p-12 text-slate-400">Caricamento...</div>
            ) : filteredTickets.length === 0 ? (
                <div className="text-center p-12 bg-white rounded-xl border border-dashed border-slate-300">
                    <MessageSquareWarning className="w-12 h-12 text-slate-300 mx-auto mb-3"/>
                    <p className="text-slate-500">Nessuna segnalazione trovata.</p>
                </div>
            ) : (
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    {filteredTickets.map(ticket => (
                        <div key={ticket.id} onClick={() => setViewTicket(ticket)} className="bg-white p-5 rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer relative group">
                            <div className="flex justify-between items-start mb-3">
                                <span className={`text-[10px] font-bold px-2 py-1 rounded uppercase ${getStatusColor(ticket.status)}`}>
                                    {ticket.status.replace('_', ' ')}
                                </span>
                                <span className={`text-[10px] font-bold px-2 py-1 rounded uppercase ${getPriorityColor(ticket.priority)}`}>
                                    {ticket.priority}
                                </span>
                            </div>
                            <h3 className="font-bold text-slate-800 mb-1 line-clamp-1">{ticket.title}</h3>
                            <p className="text-xs text-slate-400 mb-3">{new Date(ticket.createdAt).toLocaleDateString()} • {getCategoryLabel(ticket.category)}</p>
                            <p className="text-sm text-slate-600 line-clamp-3 mb-4">{ticket.description}</p>
                            
                            <div className="flex items-center justify-between border-t border-slate-100 pt-3">
                                <div className="flex items-center gap-2 text-xs text-slate-500">
                                    <div className="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center font-bold text-slate-600">
                                        {ticket.userName ? ticket.userName.charAt(0) : '?'}
                                    </div>
                                    <span className="truncate max-w-[100px]">{ticket.userName || 'Utente'}</span>
                                </div>
                                {ticket.attachments && ticket.attachments.length > 0 && (
                                    <div className="flex items-center gap-1 text-xs text-blue-600 font-medium">
                                        <Paperclip className="w-3 h-3"/> {ticket.attachments.length}
                                    </div>
                                )}
                            </div>
                        </div>
                    ))}
                </div>
            )}

            {/* CREATE MODAL */}
            {showModal && (
                <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6 animate-in fade-in zoom-in duration-200 max-h-[90vh] overflow-y-auto">
                        <div className="flex justify-between items-center mb-6">
                             <h3 className="font-bold text-lg text-slate-800">Nuova Segnalazione</h3>
                             <button onClick={() => setShowModal(false)}><X className="w-6 h-6 text-slate-400"/></button>
                        </div>
                        <form onSubmit={handleCreateSubmit} className="space-y-4">
                            <div>
                                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Oggetto</label>
                                <input className="w-full border p-2.5 rounded-lg text-slate-700" value={formTitle} onChange={e => setFormTitle(e.target.value)} required placeholder="Es. Luce scale rotta" />
                            </div>
                            
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Categoria</label>
                                    <select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={formCategory} onChange={e => setFormCategory(e.target.value as any)}>
                                        <option value={TicketCategory.MAINTENANCE}>Manutenzione</option>
                                        <option value={TicketCategory.ADMINISTRATIVE}>Amministrazione</option>
                                        <option value={TicketCategory.CLEANING}>Pulizie</option>
                                        <option value={TicketCategory.NOISE}>Rumori</option>
                                        <option value={TicketCategory.OTHER}>Altro</option>
                                    </select>
                                </div>
                                <div>
                                    <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Priorità</label>
                                    <select className="w-full border p-2.5 rounded-lg text-slate-700 bg-white" value={formPriority} onChange={e => setFormPriority(e.target.value as any)}>
                                        <option value={TicketPriority.LOW}>Bassa</option>
                                        <option value={TicketPriority.MEDIUM}>Media</option>
                                        <option value={TicketPriority.HIGH}>Alta</option>
                                        <option value={TicketPriority.URGENT}>Urgente</option>
                                    </select>
                                </div>
                            </div>

                            <div>
                                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Descrizione</label>
                                <textarea className="w-full border p-2.5 rounded-lg text-slate-700 h-24" value={formDesc} onChange={e => setFormDesc(e.target.value)} required placeholder="Dettagli del problema..." />
                            </div>

                            <div>
                                <label className="block text-xs font-bold text-slate-500 uppercase mb-1">Allegati (Foto, Video, PDF)</label>
                                <div className="border-2 border-dashed border-slate-300 rounded-lg p-4 text-center hover:bg-slate-50 transition-colors relative">
                                    <input type="file" multiple onChange={handleFileChange} className="absolute inset-0 opacity-0 cursor-pointer" accept="image/*,video/*,application/pdf" />
                                    <div className="flex flex-col items-center gap-1">
                                        <Paperclip className="w-6 h-6 text-slate-400"/>
                                        <span className="text-sm text-slate-500">Clicca o trascina file qui</span>
                                        <span className="text-[10px] text-slate-400">Max 5MB per file</span>
                                    </div>
                                </div>
                                {attachments.length > 0 && (
                                    <div className="mt-3 space-y-2">
                                        {attachments.map((att, idx) => (
                                            <div key={idx} className="flex items-center justify-between bg-slate-50 p-2 rounded border border-slate-200">
                                                <div className="flex items-center gap-2 truncate">
                                                    {att.fileType.includes('image') ? <ImageIcon className="w-4 h-4 text-blue-500"/> : att.fileType.includes('video') ? <Film className="w-4 h-4 text-purple-500"/> : <FileIcon className="w-4 h-4 text-slate-500"/>}
                                                    <span className="text-xs truncate max-w-[200px]">{att.fileName}</span>
                                                </div>
                                                <button type="button" onClick={() => removeAttachment(idx)} className="text-red-500 hover:bg-red-50 p-1 rounded"><X className="w-4 h-4"/></button>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>

                            <div className="pt-2">
                                <button type="submit" disabled={submitting} className="w-full bg-blue-600 text-white py-3 rounded-lg font-bold hover:bg-blue-700 transition-colors flex justify-center items-center gap-2">
                                    {submitting ? 'Invio in corso...' : 'Invia Segnalazione'}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* VIEW DETAILS MODAL */}
            {viewTicket && (
                 <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 backdrop-blur-sm">
                    <div className="bg-white rounded-xl shadow-xl w-full max-w-2xl p-6 animate-in fade-in zoom-in duration-200 max-h-[90vh] overflow-y-auto">
                        <div className="flex justify-between items-start mb-4">
                            <div>
                                <h3 className="font-bold text-xl text-slate-800">{viewTicket.title}</h3>
                                <p className="text-sm text-slate-500">{new Date(viewTicket.createdAt).toLocaleString()} • {getCategoryLabel(viewTicket.category)}</p>
                            </div>
                            <button onClick={() => setViewTicket(null)}><X className="w-6 h-6 text-slate-400 hover:text-slate-600"/></button>
                        </div>

                        <div className="flex gap-2 mb-6">
                             <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getStatusColor(viewTicket.status)}`}>
                                 {viewTicket.status.replace('_', ' ')}
                             </div>
                             <div className={`px-3 py-1 rounded-lg text-sm font-bold uppercase ${getPriorityColor(viewTicket.priority)}`}>
                                 {viewTicket.priority}
                             </div>
                        </div>

                        <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 mb-6 text-slate-700 whitespace-pre-wrap leading-relaxed">
                            {viewTicket.description}
                        </div>

                        {/* Attachments */}
                        {viewTicket.attachments && viewTicket.attachments.length > 0 && (
                            <div className="mb-6">
                                <h4 className="font-bold text-sm text-slate-800 mb-2 flex items-center gap-2"><Paperclip className="w-4 h-4"/> Allegati</h4>
                                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                                    {viewTicket.attachments.map(att => (
                                        <button 
                                            key={att.id} 
                                            onClick={() => openAttachment(viewTicket.id, att.id)}
                                            className="flex flex-col items-center justify-center p-3 bg-white border border-slate-200 rounded-lg hover:border-blue-400 hover:shadow-sm transition-all text-center"
                                        >
                                            {att.fileType.includes('image') ? <ImageIcon className="w-6 h-6 text-blue-500 mb-1"/> : att.fileType.includes('video') ? <Film className="w-6 h-6 text-purple-500 mb-1"/> : <FileIcon className="w-6 h-6 text-slate-500 mb-1"/>}
                                            <span className="text-[10px] text-slate-600 truncate w-full">{att.fileName}</span>
                                        </button>
                                    ))}
                                </div>
                            </div>
                        )}

                        {/* Admin Actions */}
                        {isAdmin && (
                            <div className="border-t border-slate-100 pt-4">
                                <h4 className="font-bold text-sm text-slate-500 uppercase mb-3">Gestione Admin</h4>
                                <div className="flex flex-wrap gap-2">
                                    {viewTicket.status !== TicketStatus.IN_PROGRESS && (
                                        <button onClick={() => handleStatusUpdate(TicketStatus.IN_PROGRESS)} className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg font-bold text-sm hover:bg-yellow-200">Prendi in Carico</button>
                                    )}
                                    {viewTicket.status !== TicketStatus.RESOLVED && (
                                        <button onClick={() => handleStatusUpdate(TicketStatus.RESOLVED)} className="px-4 py-2 bg-green-100 text-green-700 rounded-lg font-bold text-sm hover:bg-green-200">Segna Risolto</button>
                                    )}
                                    {viewTicket.status !== TicketStatus.CLOSED && (
                                        <button onClick={() => handleStatusUpdate(TicketStatus.CLOSED)} className="px-4 py-2 bg-slate-200 text-slate-700 rounded-lg font-bold text-sm hover:bg-slate-300">Chiudi</button>
                                    )}
                                    <button onClick={() => handleDeleteTicket(viewTicket.id)} className="ml-auto px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina</button>
                                </div>
                            </div>
                        )}
                         {!isAdmin && viewTicket.status === TicketStatus.OPEN && (
                            <div className="border-t border-slate-100 pt-4 flex justify-end">
                                 <button onClick={() => handleDeleteTicket(viewTicket.id)} className="px-4 py-2 text-red-600 font-medium text-sm hover:bg-red-50 rounded-lg">Elimina Segnalazione</button>
                            </div>
                         )}
                    </div>
                 </div>
            )}
        </div>
    );
};