import { Modal, ModalBody, ModalHeader } from "flowbite-react";
import { FC, useState } from "react";
import { TSsalarySchema } from "../forms/schema/salary";

type props = {
    salary?: TSsalarySchema,
    isOpen: boolean,
    setOpen: (x: boolean) => void
}

const SalaryShow: FC<props> = ({ salary, isOpen, setOpen = () => { } }) => {
    if (!salary) return null;

    const getStatusColor = (status: string) => {
        switch (status?.toLowerCase()) {
            case 'paid':
                return 'bg-green-100 text-green-800';
            case 'pending':
                return 'bg-yellow-100 text-yellow-800';
            case 'repay':
                return 'bg-blue-100 text-blue-800';
            default:
                return 'bg-gray-100 text-gray-800';
        }
    };

    const getTypeColor = (type: string) => {
        switch (type?.toLowerCase()) {
            case 'monthly':
                return 'bg-purple-100 text-purple-800';
            case 'advance':
                return 'bg-orange-100 text-orange-800';
            case 'bonus':
                return 'bg-pink-100 text-pink-800';
            default:
                return 'bg-gray-100 text-gray-800';
        }
    };

    return (
        <Modal show={isOpen} size="2xl" popup onClose={() => setOpen(false)} >
            <ModalHeader className="border-b border-gray-200 pb-4">
                <div className="flex items-center justify-between w-full">
                    <h3 className="text-xl font-semibold text-gray-900 mr-2">
                        Salary Details
                    </h3>
                    <div className="flex gap-2">
                        <span className={`px-3 py-1 rounded-full text-xs font-medium ${getTypeColor(salary.salary_type)}`}>
                            {salary.salary_type}
                        </span>
                        <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(salary.status)}`}>
                            {salary.status}
                        </span>
                    </div>
                </div>
            </ModalHeader>
            <ModalBody className="p-6">
                <div className="space-y-6">
                    {/* Payment Information */}
                    <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg p-4">
                        <h4 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                            <svg className="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                            </svg>
                            {salary.staff?.name}  Payment Information
                        </h4>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label className="text-sm font-medium text-gray-600">Date</label>
                                <p className="text-gray-900 font-medium">{salary.date || 'N/A'}</p>
                            </div>
                            <div>
                                <label className="text-sm font-medium text-gray-600">Total Amount</label>
                                <p className="text-2xl font-bold text-green-600">৳{salary.amount?.toLocaleString()}</p>
                            </div>
                            <div>
                                <label className="text-sm font-medium text-gray-600">Payment Method</label>
                                <p className="text-gray-900 font-medium">{salary.fund?.name || 'N/A'}</p>
                            </div>
                        </div>
                    </div>

                    {/* Salary Items */}
                    {salary.salary_items && salary.salary_items.length > 0 && (
                        <div className="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4">
                            <h4 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                                <svg className="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                Salary Items
                            </h4>
                            <div className="space-y-3">
                                {salary.salary_items.map((item: any, index: number) => (
                                    <div key={index} className="flex justify-between items-center p-3 bg-white rounded-lg border border-purple-100">
                                        <span className="text-gray-700 font-medium">{item.items_label}</span>
                                        <span className="text-purple-600 font-semibold">৳{Number(item.items_value).toLocaleString()}</span>
                                    </div>
                                ))}
                                <div className="flex justify-between items-center p-3 bg-purple-100 rounded-lg border border-purple-200">
                                    <span className="text-gray-900 font-semibold">Total Items</span>
                                    <span className="text-purple-800 font-bold">
                                        ৳{salary.salary_items.reduce((sum: number, item: any) => sum + Number(item.items_value), 0).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Salary Deductions */}
                    {salary.salary_deductions && salary.salary_deductions.length > 0 && (
                        <div className="bg-gradient-to-r from-red-50 to-orange-50 rounded-lg p-4">
                            <h4 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                                <svg className="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
                                </svg>
                                Salary Deductions
                            </h4>
                            <div className="space-y-3">
                                {salary.salary_deductions.map((deduction: any, index: number) => (
                                    <div key={index} className="flex justify-between items-center p-3 bg-white rounded-lg border border-red-100">
                                        <span className="text-gray-700 font-medium">{deduction.deductions_label}</span>
                                        <span className="text-red-600 font-semibold">-৳{Number(deduction.deductions_value).toLocaleString()}</span>
                                    </div>
                                ))}
                                <div className="flex justify-between items-center p-3 bg-red-100 rounded-lg border border-red-200">
                                    <span className="text-gray-900 font-semibold">Total Deductions</span>
                                    <span className="text-red-800 font-bold">
                                        -৳{salary.salary_deductions.reduce((sum: number, deduction: any) => sum + Number(deduction.deductions_value), 0).toLocaleString()}
                                    </span>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Net Amount Calculation */}
                    <div className="bg-gradient-to-r from-gray-50 to-slate-50 rounded-lg p-4">
                        {(salary?.salary_items || salary?.salary_deductions) && (
                            <h4 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                                <svg className="w-5 h-5 mr-2 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                </svg>
                                Amount Summary
                            </h4>
                        )}

                        <div className="space-y-2">
                            {salary?.salary_items && (
                                <div className="flex justify-between items-center">
                                    <span className="text-gray-600">Gross Amount:</span>
                                    <span className="text-gray-900 font-medium">
                                        ৳{salary.salary_items ? salary.salary_items.reduce((sum: number, item: any) => sum + Number(item.items_value), 0).toLocaleString() : '0'}
                                    </span>
                                </div>
                            )}
                            {salary?.salary_deductions && (
                                <div className="flex justify-between items-center">
                                    <span className="text-gray-600">Total Deductions:</span>
                                    <span className="text-red-600 font-medium">
                                        -৳{salary.salary_deductions ? salary.salary_deductions.reduce((sum: number, deduction: any) => sum + Number(deduction.deductions_value), 0).toLocaleString() : '0'}
                                    </span>
                                </div>
                            )}

                            <div className="border-t border-gray-200 pt-2 mt-2">
                                <div className="flex justify-between items-center">
                                    <span className="text-lg font-semibold text-gray-900">Net Amount:</span>
                                    <span className="text-2xl font-bold text-green-600">৳{salary.amount?.toLocaleString()}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Notes */}
                    {salary.note && (
                        <div className="bg-gradient-to-r from-yellow-50 to-amber-50 rounded-lg p-4">
                            <h4 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
                                <svg className="w-5 h-5 mr-2 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                Notes
                            </h4>
                            <p className="text-gray-700 bg-white p-3 rounded-lg border border-yellow-100">
                                {salary.note}
                            </p>
                        </div>
                    )}
                </div>
            </ModalBody>
        </Modal>
    )
}

export default SalaryShow;