import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import {
    Plus,
    Search,
    Trash2,
    Pencil,
    FilePlus2,
    MoreVertical,
    CirclePlus,
    PenLine,
    PenSquareIcon,
    DownloadCloud,
    Folder,
    Flag,
    Eye,
    Edit,
    Users,
    FileText,
    Mail,
    Building2,
    CheckCircle,
    XCircle,
    Clock,
    TrendingUp,
    TrendingDown,
    AlertCircle,
} from 'lucide-react';
import ButtonUI from '../../components/UI/ButtonUI';
import Table, { Column } from '../../components/UI/Table';
import Pagination from '../../components/UI/Pagination';
import NewEnquiryModal from '../../modal/Enquiries&Quotations/NewEnquiryModal';
import EditEnquiryModal from '../../modal/Enquiries&Quotations/EditEnquiryModal';
import AddRequirementModal from '../../modal/Enquiries&Quotations/AddRequirementModal';
import type { Enquiry, EnquiryStatus } from '../../types/enquiry';
import { useToast, ToastContainer } from '../../components/UI/Toast';
import ConfirmationModal from '../../modal/ConfirmationModal';

const Enquiries = () => {
    const navigate = useNavigate();
    const toast = useToast();
    const [searchTerm, setSearchTerm] = useState('');
    const [filterStatus, setFilterStatus] = useState<string>('All');
    const [currentPage, setCurrentPage] = useState(1);
    const [showEntries, setShowEntries] = useState(10);
    const [showNewEnquiryModal, setShowNewEnquiryModal] = useState(false);
    const [showEditEnquiryModal, setShowEditEnquiryModal] = useState(false);
    const [editingEnquiry, setEditingEnquiry] = useState<Enquiry | null>(null);
    const [openMenu, setOpenMenu] = useState<string | null>(null);
    const [showRequirementModal, setShowRequirementModal] = useState(false);
    const [selectedRequirementEnquiry, setSelectedRequirementEnquiry] = useState<Enquiry | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [enquiryToDelete, setEnquiryToDelete] = useState<Enquiry | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    const statusOptions: EnquiryStatus[] = ['New', 'Qualified', 'Quoted', 'Negotiation', 'Converted', 'Lost'];

    const handleDeleteEnquiry = (enquiry: Enquiry) => {
        setEnquiryToDelete(enquiry);
        setShowDeleteModal(true);
        setOpenMenu(null);
    };

    const handleConfirmDelete = () => {
        if (!enquiryToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setEnquiries((prev) => prev.filter((enquiry) => enquiry.id !== enquiryToDelete.id));
            setShowDeleteModal(false);
            setEnquiryToDelete(null);
            setIsDeleting(false);
            toast.success(`Enquiry "${enquiryToDelete.id}" deleted successfully!`);
        }, 1000);
    };

    const handleEditEnquiry = (enquiry: Enquiry) => {
        setEditingEnquiry(enquiry);
        setShowEditEnquiryModal(true);
        setOpenMenu(null);
    };

    const handleUpdateEnquiry = (updatedEnquiry: Enquiry) => {
        setEnquiries((prev) => prev.map((enquiry) => (enquiry.id === updatedEnquiry.id ? updatedEnquiry : enquiry)));
        setShowEditEnquiryModal(false);
        setEditingEnquiry(null);
        toast.success('Enquiry updated successfully!');
    };

    const handleStatusChange = (enquiryId: string, newStatus: EnquiryStatus) => {
        setEnquiries((prev) =>
            prev.map((enquiry) =>
                enquiry.id === enquiryId
                    ? {
                          ...enquiry,
                          status: newStatus,
                      }
                    : enquiry,
            ),
        );
        toast.info(`Status updated to ${newStatus}`);
    };

    const [enquiries, setEnquiries] = useState<Enquiry[]>([
        {
            id: 'ENQ/2026-27/0031',
            date: '18-07-2026',
            client: 'Fatima College',
            contact: 'Sr. Agnes Mary',
            course: 'Soft Skills & Aptitude',
            students: 120,
            source: 'Repeat client',
            status: 'New',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0030',
            date: '16-07-2026',
            client: 'PSNA College of Engg',
            contact: 'Dr. Ramesh Babu',
            course: 'Java Enterprise',
            students: 180,
            source: 'College visit',
            status: 'Qualified',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0024',
            date: '20-05-2026',
            client: 'Trinity Info Systems',
            contact: 'Ms. Priya Rajan',
            course: 'Cloud & DevOps',
            students: 12,
            source: 'LinkedIn',
            status: 'Lost',
            type: 'Corporate',
        },
        {
            id: 'ENQ/2026-27/0029',
            date: '12-07-2026',
            client: 'K.L.N. College of Engg',
            contact: 'Prof. Meenakshi S',
            course: 'Data Science & ML',
            students: 140,
            source: 'Referral',
            status: 'Quoted',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0028',
            date: '08-07-2026',
            client: 'Velammal Engineering College',
            contact: 'Mr. Saravanan P',
            course: 'Java Enterprise',
            students: 200,
            source: 'Website',
            status: 'Negotiation',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0032',
            date: '22-07-2026',
            client: 'Zoho Corporation',
            contact: 'Mr. Arun Kumar',
            course: 'Python Full Stack',
            students: 45,
            source: 'Referral',
            status: 'New',
            type: 'Corporate',
        },
        {
            id: 'ENQ/2026-27/0027',
            date: '05-07-2026',
            client: 'Sethu Institute of Technology',
            contact: 'Dr. Kavitha R',
            course: 'Python Full Stack',
            students: 160,
            source: 'IndiaMART',
            status: 'Quoted',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0026',
            date: '28-05-2026',
            client: 'Vantara Softtech',
            contact: 'HR — Nithya V',
            course: 'Cloud & DevOps',
            students: 18,
            source: 'LinkedIn',
            status: 'Converted',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0025',
            date: '25-05-2026',
            client: 'Kongu Polytechnic College',
            contact: 'Prof. Senthil Kumar',
            course: 'Embedded C & IoT',
            students: 45,
            source: 'College visit',
            status: 'Converted',
            type: 'College',
        },
        {
            id: 'ENQ/2026-27/0033',
            date: '22-08-2026',
            client: 'Wipro Corporation',
            contact: 'Mr. Saran Kumar',
            course: 'Java Full Stack',
            students: 80,
            source: 'Referral',
            status: 'New',
            type: 'Corporate',
        },
    ]);

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'New':
                return 'bg-blue-50 text-blue-700 border-blue-200';
            case 'Qualified':
                return 'bg-indigo-50 text-indigo-700 border-indigo-200';
            case 'Quoted':
                return 'bg-purple-50 text-purple-700 border-purple-200';
            case 'Negotiation':
                return 'bg-yellow-50 text-yellow-700 border-yellow-200';
            case 'Converted':
                return 'bg-green-50 text-green-700 border-green-200';
            case 'Lost':
                return 'bg-red-50 text-red-700 border-red-200';
            default:
                return 'bg-gray-50 text-gray-700 border-gray-200';
        }
    };

    const getStatusIcon = (status: string) => {
        switch (status) {
            case 'New':
                return <FileText className="w-3.5 h-3.5" />;
            case 'Qualified':
                return <CheckCircle className="w-3.5 h-3.5" />;
            case 'Quoted':
                return <Mail className="w-3.5 h-3.5" />;
            case 'Negotiation':
                return <Clock className="w-3.5 h-3.5" />;
            case 'Converted':
                return <TrendingUp className="w-3.5 h-3.5" />;
            case 'Lost':
                return <XCircle className="w-3.5 h-3.5" />;
            default:
                return <AlertCircle className="w-3.5 h-3.5" />;
        }
    };

    const handleBack = () => {
        navigate('/schedule');
    };

    const handlePipeline = () => {
        navigate('/enquiries/pipeline');
    };

    const handleNewEnquiry = (data: any) => {
        const newEnquiry: Enquiry = {
            id: `ENQ/2026-27/${String(enquiries.length + 1).padStart(4, '0')}`,
            date: new Date().toLocaleDateString('en-IN').replace(/\//g, '-'),
            client: data.client,
            contact: data.contact || '—',
            course: data.course,
            students: data.students,
            source: data.source,
            status: 'New',
            type: data.type,
        };
        setEnquiries([newEnquiry, ...enquiries]);
        setShowNewEnquiryModal(false);
        toast.success('Enquiry created successfully!');
    };

    const handleBuildQuotation = (enquiry: Enquiry) => {
        navigate('/enquiries/new-quotation', {
            state: {
                enquiry: enquiry,
            },
        });
    };

    // Filter enquiries
    const filteredEnquiries = enquiries.filter((enq) => {
        const matchesSearch =
            enq.client.toLowerCase().includes(searchTerm.toLowerCase()) ||
            enq.contact.toLowerCase().includes(searchTerm.toLowerCase()) ||
            enq.course.toLowerCase().includes(searchTerm.toLowerCase()) ||
            enq.id.toLowerCase().includes(searchTerm.toLowerCase());
        const matchesStatus = filterStatus === 'All' || enq.status === filterStatus;
        return matchesSearch && matchesStatus;
    });

    // Pagination
    const totalPages = Math.ceil(filteredEnquiries.length / showEntries);
    const startIndex = (currentPage - 1) * showEntries;
    const currentEnquiries = filteredEnquiries.slice(startIndex, startIndex + showEntries);

    // Stats calculation
    const totalEnquiries = enquiries.length;
    const newCount = enquiries.filter((e) => e.status === 'New').length;
    const quotedCount = enquiries.filter((e) => e.status === 'Quoted').length;
    const negotiationCount = enquiries.filter((e) => e.status === 'Negotiation').length;
    const convertedCount = enquiries.filter((e) => e.status === 'Converted').length;
    const lostCount = enquiries.filter((e) => e.status === 'Lost').length;
    const qualifiedCount = enquiries.filter((e) => e.status === 'Qualified').length;

    // Define columns
    const columns: Column<Enquiry>[] = [
        {
            key: 'enquiry',
            header: 'ENQUIRY',
            accessor: (row) => (
                <div>
                    <div className="text-sm font-medium text-primary">{row.id}</div>
                    <div className="flex items-center gap-2">
                        <div className="text-xs text-gray-500">{row.date}</div>
                        <span
                            className={`inline-flex px-2 py-0.5 rounded text-[10px] font-medium border ${
                                row.type === 'College' ? 'bg-blue-50 text-blue-700 border-blue-200' : 'bg-purple-50 text-purple-700 border-purple-200'
                            }`}
                        >
                            {row.type}
                        </span>
                    </div>
                </div>
            ),
        },
        {
            key: 'client',
            header: 'CLIENT / CONTACT',
            accessor: (row) => (
                <div>
                    <div className="text-sm font-medium text-gray-900">{row.client}</div>
                    <div className="text-xs text-gray-500">{row.contact}</div>
                </div>
            ),
        },
        {
            key: 'course',
            header: 'COURSE',
            accessor: (row) => <span className="text-sm text-gray-700">{row.course}</span>,
        },
        {
            key: 'students',
            header: 'STUDENTS',
            align: 'center',
            accessor: (row) => <span className="text-sm font-medium text-gray-700">{row.students}</span>,
        },
        {
            key: 'source',
            header: 'SOURCE',
            accessor: (row) => <span className="text-sm text-gray-600">{row.source}</span>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row) => {
                // If Lost, don't allow any further changes
                if (row.status === 'Lost') {
                    return (
                        <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${getStatusColor(row.status)}`}>
                            {getStatusIcon(row.status)}
                            Lost
                        </span>
                    );
                }

                const currentIndex = statusOptions.indexOf(row.status);

                // Only current and next statuses are available
                const availableStatuses = statusOptions.filter((_, index) => index >= currentIndex);

                return (
                    <select
                        value={row.status}
                        onChange={(e) => handleStatusChange(row.id, e.target.value as EnquiryStatus)}
                        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border cursor-pointer focus:outline-none ${getStatusColor(row.status)}`}
                    >
                        {availableStatuses.map((status) => (
                            <option key={status} value={status}>
                                {status}
                            </option>
                        ))}
                    </select>
                );
            },
        },
        {
            key: 'actions',
            header: 'ACTION',
            align: 'center',
            accessor: (row) => (
                <div className="relative">
                    <button onClick={() => setOpenMenu(openMenu === row.id ? null : row.id)} className="p-1.5 text-gray-400 hover:text-gray-700 transition-colors rounded hover:bg-gray-100">
                        <MoreVertical className="w-4 h-4" />
                    </button>

                    {openMenu === row.id && (
                        <>
                            <div className="fixed inset-0 z-40" onClick={() => setOpenMenu(null)} />
                            <div className="absolute right-0 mt-1 z-50 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1">
                                <button onClick={() => handleBuildQuotation(row)} className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                    <FileText className="w-4 h-4" />
                                    <span>Quotation</span>
                                </button>

                                <button
                                    onClick={() => {
                                        setSelectedRequirementEnquiry(row);
                                        setShowRequirementModal(true);
                                        setOpenMenu(null);
                                    }}
                                    className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
                                >
                                    <FilePlus2 className="w-4 h-4" />
                                    <span>Add Requirement</span>
                                </button>

                                <button onClick={() => handleEditEnquiry(row)} className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
                                    <Edit className="w-4 h-4" />
                                    <span>Edit</span>
                                </button>

                                <div className="border-t border-gray-100 my-1"></div>

                                <button onClick={() => handleDeleteEnquiry(row)} className="w-full flex items-center gap-3 px-4 py-2 text-sm text-red-600 hover:bg-red-50">
                                    <Trash2 className="w-4 h-4" />
                                    <span>Delete</span>
                                </button>
                            </div>
                        </>
                    )}
                </div>
            ),
        },
    ];

    const statusFilters = ['All', 'New', 'Qualified', 'Quoted', 'Negotiation', 'Converted', 'Lost'];

    return (
        <>
            <ToastContainer toasts={toast.toasts} onRemove={toast.removeToast} />

            <div className="p-6">
                {/* Page Header */}
                <div className="mb-6">
                    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div>
                            <h1 className="text-2xl font-bold text-primary">Enquiries</h1>
                            <p className="text-gray-500 text-sm mt-1">Manage all client enquiries</p>
                        </div>
                        <div className="flex items-center gap-3">
                            <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={() => setShowNewEnquiryModal(true)}>
                                New enquiry
                            </ButtonUI>
                        </div>
                    </div>
                </div>

                {/* Stats Cards */}
                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Total</p>
                                <p className="text-2xl font-bold text-primary">{totalEnquiries}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <Users className="w-5 h-5 text-primary" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">New</p>
                                <p className="text-2xl font-bold text-blue-600">{newCount}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center">
                                <FileText className="w-5 h-5 text-blue-600" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Qualified</p>
                                <p className="text-2xl font-bold text-indigo-600">{qualifiedCount}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                                <CheckCircle className="w-5 h-5 text-indigo-600" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Quoted</p>
                                <p className="text-2xl font-bold text-purple-600">{quotedCount}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center">
                                <Mail className="w-5 h-5 text-purple-600" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Negotiation</p>
                                <p className="text-2xl font-bold text-yellow-600">{negotiationCount}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-yellow-50 flex items-center justify-center">
                                <Clock className="w-5 h-5 text-yellow-600" />
                            </div>
                        </div>
                    </div>
                    <div className="bg-white rounded-lg border border-gray-200 p-4">
                        <div className="flex items-center justify-between">
                            <div>
                                <p className="text-sm text-gray-500">Converted</p>
                                <p className="text-2xl font-bold text-green-600">{convertedCount}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
                                <TrendingUp className="w-5 h-5 text-green-600" />
                            </div>
                        </div>
                    </div>
                </div>

                {/* Filters */}
                <div className="flex flex-wrap items-center justify-between gap-4 mb-6 bg-white p-4 rounded-lg border border-gray-200">
                    <div className="flex flex-wrap items-center gap-4">
                        {/* Show Entries */}
                        <div className="flex items-center gap-2">
                            <span className="text-sm text-gray-600">Show</span>
                            <select
                                value={showEntries}
                                onChange={(e) => setShowEntries(Number(e.target.value))}
                                className="px-2 py-1 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-secondary focus:ring-2 focus:ring-secondary/20"
                            >
                                <option value={10}>10</option>
                                <option value={25}>25</option>
                                <option value={50}>50</option>
                                <option value={100}>100</option>
                            </select>
                        </div>

                        {/* Search */}
                        <div className="relative min-w-[200px]">
                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
                            <input
                                type="text"
                                placeholder="Search enquiries..."
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                                className="w-full pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-secondary focus:ring-2 focus:ring-secondary/20"
                            />
                        </div>

                        {/* Status Filter */}
                        <div className="flex items-center gap-2">
                            <span className="text-sm text-gray-500">Status:</span>
                            <div className="flex gap-1 bg-gray-100 p-1 rounded-lg">
                                {statusFilters.map((status) => (
                                    <button
                                        key={status}
                                        onClick={() => setFilterStatus(status)}
                                        className={`
                                            px-3 py-1 rounded-md text-sm font-medium transition-all whitespace-nowrap
                                            ${filterStatus === status ? 'bg-white text-secondary shadow-sm' : 'text-gray-600 hover:text-gray-800'}
                                        `}
                                    >
                                        {status}
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>

                    <div className="text-sm text-gray-500">
                        Showing {currentEnquiries.length} of {filteredEnquiries.length} enquiries
                    </div>
                </div>

                {/* Table */}
                <Table data={currentEnquiries} columns={columns} emptyMessage="No enquiries found" />

                {/* Pagination */}
                {filteredEnquiries.length > 0 && (
                    <Pagination
                        currentPage={currentPage}
                        totalPages={totalPages}
                        totalItems={filteredEnquiries.length}
                        startIndex={startIndex}
                        itemsPerPage={showEntries}
                        onPageChange={setCurrentPage}
                    />
                )}

                {/* New Enquiry Modal */}
                <NewEnquiryModal
                    open={showNewEnquiryModal}
                    onClose={() => {
                        setShowNewEnquiryModal(false);
                    }}
                    onSave={handleNewEnquiry}
                />

                {/* Edit Enquiry Modal */}
                <EditEnquiryModal
                    open={showEditEnquiryModal}
                    enquiry={editingEnquiry}
                    onClose={() => {
                        setShowEditEnquiryModal(false);
                        setEditingEnquiry(null);
                    }}
                    onSave={handleUpdateEnquiry}
                />

                {/* Add Requirement Modal */}
                <AddRequirementModal
                    open={showRequirementModal}
                    enquiry={selectedRequirementEnquiry}
                    onClose={() => {
                        setShowRequirementModal(false);
                        setSelectedRequirementEnquiry(null);
                    }}
                />

                {/* Delete Confirmation Modal */}
                <ConfirmationModal
                    isOpen={showDeleteModal}
                    onClose={() => {
                        setShowDeleteModal(false);
                        setEnquiryToDelete(null);
                    }}
                    onConfirm={handleConfirmDelete}
                    title="Delete Enquiry"
                    message={`Are you sure you want to delete "${enquiryToDelete?.id}"? This action cannot be undone and will remove all associated data.`}
                    type="danger"
                    confirmText="Delete"
                    cancelText="Cancel"
                    isLoading={isDeleting}
                />
            </div>
        </>
    );
};

export default Enquiries;