import { useState, useEffect } from 'react';
import { DollarSign, Plus, Search, Edit, Trash2, CheckCircle, XCircle, X, Calculator, Clock, Calendar } from 'lucide-react';
import { ToastContainer, useToast } from '../../UI/Toast';
import Table, { Column } from '../../UI/Table';
import ActionButtons from '../../UI/ActionButtons';
import ButtonUI from '../../UI/ButtonUI';
import Pagination from '../../UI/Pagination';
import ToggleSwitch from '../../UI/ToggleSwitch';
import CustomInput from '../../UI/CustomInput';

interface PerHourCost {
    id: string;
    minimumSalary: number;
    maximumSalary: number;
    workingDays: number;
    workingHours: number;
    perHourCost: number;
    status: 'Active' | 'Inactive';
    createdAt: string;
    updatedAt?: string;
}

// Create/Edit Modal Component
interface ModalProps {
    isOpen: boolean;
    onClose: () => void;
    onSave: (data: { minimumSalary: number; maximumSalary: number; workingDays: number; workingHours: number; perHourCost: number }) => void;
    title: string;
    initialData?: { minimumSalary: number; maximumSalary: number; workingDays: number; workingHours: number } | null;
}

const Modal = ({ isOpen, onClose, onSave, title, initialData }: ModalProps) => {
    const [formData, setFormData] = useState({
        minimumSalary: initialData?.minimumSalary || 0,
        maximumSalary: initialData?.maximumSalary || 0,
        workingDays: initialData?.workingDays || 26,
        workingHours: initialData?.workingHours || 7,
    });

    const [perHourCost, setPerHourCost] = useState<number>(0);

    useEffect(() => {
        if (initialData) {
            setFormData({
                minimumSalary: initialData.minimumSalary || 0,
                maximumSalary: initialData.maximumSalary || 0,
                workingDays: initialData.workingDays || 26,
                workingHours: initialData.workingHours || 7,
            });
        }
    }, [initialData]);

    useEffect(() => {
        if (isOpen && !initialData) {
            setFormData({
                minimumSalary: 0,
                maximumSalary: 0,
                workingDays: 26,
                workingHours: 7,
            });
        }
    }, [isOpen, initialData]);

    // Calculate per hour cost
    useEffect(() => {
        const { minimumSalary, maximumSalary, workingDays, workingHours } = formData;
        if (minimumSalary > 0 && maximumSalary > 0 && workingDays > 0 && workingHours > 0) {
            // Average salary calculation
            const avgSalary = (minimumSalary + maximumSalary) / 2;
            const totalHours = workingDays * workingHours;
            const cost = avgSalary / totalHours;
            setPerHourCost(cost);
        } else {
            setPerHourCost(0);
        }
    }, [formData]);

    if (!isOpen) return null;

    const handleInputChange = (field: string, value: any) => {
        setFormData((prev) => ({ ...prev, [field]: value }));
    };

    const handleSubmit = () => {
        if (formData.minimumSalary <= 0 || formData.maximumSalary <= 0 || formData.workingDays <= 0 || formData.workingHours <= 0) {
            return;
        }
        onSave({
            ...formData,
            perHourCost: perHourCost,
        });
    };

    const formatCurrency = (value: number) => {
        return new Intl.NumberFormat('en-IN', {
            style: 'currency',
            currency: 'INR',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        }).format(value);
    };

    return (
        <>
            <div className="fixed inset-0 bg-black/50 z-[100]" onClick={onClose} />
            <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none px-4">
                <div className="pointer-events-auto bg-white rounded-xl shadow-2xl w-full max-w-md">
                    <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
                        <h3 className="text-lg font-semibold text-primary">{title}</h3>
                        <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition-colors">
                            <X className="w-5 h-5 text-gray-500" />
                        </button>
                    </div>
                    <div className="px-6 py-4 space-y-4">
                        {/* Minimum Salary */}
                        <div>
                            <label className="text-sm font-medium text-gray-700 block mb-1.5">
                                Minimum Salary <span className="text-red-500">*</span>
                            </label>
                            <CustomInput
                                value={formData.minimumSalary}
                                onChange={(value) => handleInputChange('minimumSalary', value)}
                                type="number"
                                placeholder="Enter Minimum Salary"
                                required
                                icon={<DollarSign className="w-4 h-4" />}
                            />
                        </div>

                        {/* Maximum Salary */}
                        <div>
                            <label className="text-sm font-medium text-gray-700 block mb-1.5">
                                Maximum Salary <span className="text-red-500">*</span>
                            </label>
                            <CustomInput
                                value={formData.maximumSalary}
                                onChange={(value) => handleInputChange('maximumSalary', value)}
                                type="number"
                                placeholder="Enter Maximum Salary"
                                required
                                icon={<DollarSign className="w-4 h-4" />}
                            />
                        </div>

                        {/* Working Days */}
                        <div>
                            <label className="text-sm font-medium text-gray-700 block mb-1.5">
                                Working Days <span className="text-red-500">*</span>
                            </label>
                            <CustomInput
                                value={formData.workingDays}
                                onChange={(value) => handleInputChange('workingDays', value)}
                                type="number"
                                placeholder="Enter Working Days"
                                required
                                icon={<Calendar className="w-4 h-4" />}
                            />
                        </div>

                        {/* Working Hours */}
                        <div>
                            <label className="text-sm font-medium text-gray-700 block mb-1.5">
                                Working Hours <span className="text-red-500">*</span>
                            </label>
                            <CustomInput
                                value={formData.workingHours}
                                onChange={(value) => handleInputChange('workingHours', value)}
                                type="number"
                                placeholder="Enter Working Hours"
                                required
                                icon={<Clock className="w-4 h-4" />}
                            />
                        </div>

                        {/* Per Hour Cost - Auto Calculated */}
                        {perHourCost > 0 && (
                            <div className="p-4 bg-primary/5 rounded-lg border border-primary/10">
                                <div className="flex items-center justify-between">
                                    <div>
                                        <div className="text-xs text-gray-500 font-medium">Per Hour Cost</div>
                                        <div className="text-2xl font-bold text-primary">{formatCurrency(perHourCost)}</div>
                                    </div>
                                    <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                        <Calculator className="w-5 h-5 text-primary" />
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                    <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200">
                        <ButtonUI variant="outline" size="md" onClick={onClose}>
                            Cancel
                        </ButtonUI>
                        <ButtonUI
                            variant="secondary"
                            size="md"
                            onClick={handleSubmit}
                            disabled={formData.minimumSalary <= 0 || formData.maximumSalary <= 0 || formData.workingDays <= 0 || formData.workingHours <= 0}
                        >
                            {initialData ? 'Update Per Hour Cost' : 'Create Per Hour Cost'}
                        </ButtonUI>
                    </div>
                </div>
            </div>
        </>
    );
};

const PerHourCost = () => {
    const toast = useToast();
    const [searchTerm, setSearchTerm] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [showEntries, setShowEntries] = useState(10);
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showEditModal, setShowEditModal] = useState(false);
    const [selectedCost, setSelectedCost] = useState<PerHourCost | null>(null);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [costToDelete, setCostToDelete] = useState<PerHourCost | null>(null);
    const [isDeleting, setIsDeleting] = useState(false);

    // Mock data for per hour cost
    const [perHourCosts, setPerHourCosts] = useState<PerHourCost[]>([
        {
            id: '1',
            minimumSalary: 10000,
            maximumSalary: 15000,
            workingDays: 26,
            workingHours: 7,
            perHourCost: 68.68,
            status: 'Active',
            createdAt: '2024-01-15',
        },
        {
            id: '2',
            minimumSalary: 15000,
            maximumSalary: 20000,
            workingDays: 26,
            workingHours: 7,
            perHourCost: 96.15,
            status: 'Active',
            createdAt: '2024-02-10',
        },
        {
            id: '3',
            minimumSalary: 20000,
            maximumSalary: 25000,
            workingDays: 25,
            workingHours: 8,
            perHourCost: 112.5,
            status: 'Active',
            createdAt: '2024-03-05',
        },
        {
            id: '4',
            minimumSalary: 25000,
            maximumSalary: 30000,
            workingDays: 26,
            workingHours: 7,
            perHourCost: 151.1,
            status: 'Inactive',
            createdAt: '2024-04-20',
        },
        {
            id: '5',
            minimumSalary: 30000,
            maximumSalary: 35000,
            workingDays: 26,
            workingHours: 7,
            perHourCost: 178.57,
            status: 'Active',
            createdAt: '2024-05-15',
        },
    ]);

    const handleAddCost = () => {
        setSelectedCost(null);
        setShowCreateModal(true);
    };

    const handleEditCost = (cost: PerHourCost) => {
        setSelectedCost(cost);
        setShowEditModal(true);
    };

    const handleDeleteCost = (cost: PerHourCost) => {
        setCostToDelete(cost);
        setShowDeleteModal(true);
    };

    const handleConfirmDelete = () => {
        if (!costToDelete) return;
        setIsDeleting(true);
        setTimeout(() => {
            setPerHourCosts(perHourCosts.filter((c) => c.id !== costToDelete.id));
            setShowDeleteModal(false);
            setCostToDelete(null);
            setIsDeleting(false);
            toast.success(`Per hour cost deleted successfully!`);
        }, 1000);
    };

    const handleSaveCost = (formData: { minimumSalary: number; maximumSalary: number; workingDays: number; workingHours: number; perHourCost: number }) => {
        if (formData.minimumSalary <= 0 || formData.maximumSalary <= 0 || formData.workingDays <= 0 || formData.workingHours <= 0) {
            toast.error('Please fill in all required fields');
            return;
        }

        if (selectedCost) {
            setPerHourCosts(
                perHourCosts.map((c) =>
                    c.id === selectedCost.id
                        ? {
                              ...c,
                              ...formData,
                              updatedAt: new Date().toISOString().split('T')[0],
                          }
                        : c,
                ),
            );
            toast.success('Per hour cost updated successfully!');
            setShowEditModal(false);
            setSelectedCost(null);
        } else {
            const newCost: PerHourCost = {
                id: String(perHourCosts.length + 1),
                ...formData,
                status: 'Active',
                createdAt: new Date().toISOString().split('T')[0],
            };
            setPerHourCosts([...perHourCosts, newCost]);
            toast.success('Per hour cost created successfully!');
            setShowCreateModal(false);
        }
    };

    const handleToggleStatus = (id: string) => {
        setPerHourCosts(perHourCosts.map((c) => (c.id === id ? { ...c, status: c.status === 'Active' ? 'Inactive' : 'Active' } : c)));
        const cost = perHourCosts.find((c) => c.id === id);
        toast.info(`Per hour cost status changed to ${cost?.status === 'Active' ? 'Inactive' : 'Active'}`);
    };

    const filteredCosts = perHourCosts.filter((cost) => {
        const searchLower = searchTerm.toLowerCase();
        return cost.minimumSalary.toString().includes(searchTerm) || cost.maximumSalary.toString().includes(searchTerm) || cost.perHourCost.toString().includes(searchTerm);
    });

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

    const formatCurrency = (value: number) => {
        return new Intl.NumberFormat('en-IN', {
            style: 'currency',
            currency: 'INR',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        }).format(value);
    };

    const columns: Column<PerHourCost>[] = [
        {
            key: 'sno',
            header: 'S.No',
            align: 'center',
            accessor: (_row: PerHourCost, index: number) => {
                const page = currentPage || 1;
                const entries = showEntries || 10;
                const calculatedIndex = (page - 1) * entries + (index || 0) + 1;
                return <span className="text-sm text-gray-600">{calculatedIndex}</span>;
            },
        },
        {
            key: 'salaryRange',
            header: 'SALARY RANGE',
            accessor: (row: PerHourCost) => (
                <div>
                    <div className="text-sm font-medium text-gray-900">
                        {formatCurrency(row.minimumSalary)} - {formatCurrency(row.maximumSalary)}
                    </div>
                    <div className="text-xs text-gray-500">Min / Max Salary</div>
                </div>
            ),
        },
        {
            key: 'workingDetails',
            header: 'WORKING DETAILS',
            accessor: (row: PerHourCost) => (
                <div>
                    <div className="text-sm text-gray-700">
                        <span className="inline-flex items-center gap-1">
                            <Calendar className="w-3.5 h-3.5 text-gray-400" />
                            {row.workingDays} days
                        </span>
                        <span className="mx-2 text-gray-300">|</span>
                        <span className="inline-flex items-center gap-1">
                            <Clock className="w-3.5 h-3.5 text-gray-400" />
                            {row.workingHours} hrs
                        </span>
                    </div>
                </div>
            ),
        },
        {
            key: 'perHourCost',
            header: 'PER HOUR COST',
            accessor: (row: PerHourCost) => <div className="text-sm font-semibold text-primary">{formatCurrency(row.perHourCost)}</div>,
        },
        {
            key: 'status',
            header: 'STATUS',
            align: 'center',
            accessor: (row: PerHourCost) => <ToggleSwitch checked={row.status === 'Active'} onChange={() => handleToggleStatus(row.id)} activeColor="bg-green-600" inactiveColor="bg-gray-300" />,
        },
        {
            key: 'actions',
            header: 'ACTION',
            align: 'center',
            accessor: (row: PerHourCost) => (
                <ActionButtons
                    onEdit={() => handleEditCost(row)}
                    onDelete={() => handleDeleteCost(row)}
                    showView={false}
                    editTooltip="Edit Per Hour Cost"
                    deleteTooltip="Delete Per Hour Cost"
                    size="sm"
                />
            ),
        },
    ];

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

            <div className="p-6">
                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6 gap-4">
                    <div>
                        <h2 className="text-lg font-semibold text-primary">Per Hour Cost</h2>
                        <p className="text-sm text-gray-500 mt-1">Manage per hour cost calculations</p>
                    </div>
                    <ButtonUI variant="secondary" size="md" icon={<Plus className="w-4 h-4" />} onClick={handleAddCost}>
                        Create Per Hour Cost
                    </ButtonUI>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-3 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 Records</p>
                                <p className="text-2xl font-bold text-primary">{perHourCosts.length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center">
                                <DollarSign 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">Active</p>
                                <p className="text-2xl font-bold text-green-600">{perHourCosts.filter((c) => c.status === 'Active').length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center">
                                <CheckCircle className="w-5 h-5 text-green-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">Inactive</p>
                                <p className="text-2xl font-bold text-red-600">{perHourCosts.filter((c) => c.status === 'Inactive').length}</p>
                            </div>
                            <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center">
                                <XCircle className="w-5 h-5 text-red-600" />
                            </div>
                        </div>
                    </div>
                </div>

                <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">
                        <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-primary focus:ring-2 focus:ring-primary/20"
                            >
                                <option value={10}>10</option>
                                <option value={25}>25</option>
                                <option value={50}>50</option>
                                <option value={100}>100</option>
                            </select>
                        </div>

                        <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 per hour cost..."
                                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-primary focus:ring-2 focus:ring-primary/20"
                            />
                        </div>
                    </div>
                </div>

                <Table data={currentCosts} columns={columns} emptyMessage="No per hour cost records found" />

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

            <Modal
                isOpen={showCreateModal}
                onClose={() => {
                    setShowCreateModal(false);
                    setSelectedCost(null);
                }}
                onSave={handleSaveCost}
                title="Create Per Hour Cost"
                initialData={null}
            />

            <Modal
                isOpen={showEditModal}
                onClose={() => {
                    setShowEditModal(false);
                    setSelectedCost(null);
                }}
                onSave={handleSaveCost}
                title="Edit Per Hour Cost"
                initialData={
                    selectedCost
                        ? {
                              minimumSalary: selectedCost.minimumSalary,
                              maximumSalary: selectedCost.maximumSalary,
                              workingDays: selectedCost.workingDays,
                              workingHours: selectedCost.workingHours,
                          }
                        : null
                }
            />

            {showDeleteModal && (
                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 px-4">
                    <div className="w-full max-w-md bg-white rounded-xl shadow-2xl p-6">
                        <h3 className="text-lg font-semibold text-gray-900 mb-2">Delete Per Hour Cost</h3>
                        <p className="text-sm text-gray-600">Are you sure you want to delete this per hour cost record? This action cannot be undone.</p>
                        <div className="flex justify-end gap-3 mt-6">
                            <ButtonUI
                                variant="outline"
                                size="md"
                                onClick={() => {
                                    setShowDeleteModal(false);
                                    setCostToDelete(null);
                                }}
                            >
                                Cancel
                            </ButtonUI>
                            <ButtonUI variant="secondary" size="md" onClick={handleConfirmDelete} isLoading={isDeleting} className="bg-red-600 hover:bg-red-700 text-white">
                                {isDeleting ? 'Deleting...' : 'Delete'}
                            </ButtonUI>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default PerHourCost;