import React, { useState, useEffect } from 'react';
import { Head } from '@inertiajs/react';
import ModalInput from '@/Components/ModalInput';
import DeleteButton from '@/Components/DeleteButton';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '@/Components/features/common/headerSlice';

export default function PaymentType({ paymentType, fields }) {
    const [selectedPaymentType, setSelectedPaymentType] = useState(null);
    const [isDeleteOpen, setDeleteOpen] = useState(false);
    const [searchTerm, setSearchTerm] = useState('');
    const [filteredPaymentTypes, setFilteredPaymentTypes] = useState([]);

    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(setPageTitle("Data Tipe Pembayaran"));
    }, [dispatch]);

    useEffect(() => {
        if (paymentType) {
            setFilteredPaymentTypes(
                paymentType.filter(item =>
                    item.payment_type.toLowerCase().includes(searchTerm.toLowerCase())
                )
            );
        }
    }, [searchTerm, paymentType]);

    const handleSearch = (e) => {
        setSearchTerm(e.target.value);
    };

    const deleteModal = (item) => {
        setSelectedPaymentType(item);
        setDeleteOpen(true);
    };

    return (
        <div>
            <Head title="Daftar Payment Type" />

            <div className="card bg-base-100 shadow-xl">
                <div className="card-body">
                    <div className="flex items-center mb-6">
                        <div className="bg-gradient-to-tr from-blue-400 to-blue-600 p-3 rounded-lg mr-3">
                            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                            </svg>
                        </div>
                        <h1 className="text-2xl font-bold">Payment Type</h1>
                        <div className="ml-auto">
                            <span className="text-gray-700">Overview</span>
                            <span className="ml-2 text-gray-500">
                                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div className="flex justify-between items-center mb-4">
                        <div className="form-control">
                            <div className="input-group">
                                <input
                                    type="text"
                                    placeholder="Search..."
                                    className="input input-bordered"
                                    value={searchTerm}
                                    onChange={handleSearch}
                                />
                            </div>
                        </div>
                        <label
                            htmlFor="modal_input"
                            className='btn btn-success text-white'
                            onClick={() => setSelectedPaymentType(null)}
                        >
                            Tambah Payment Type
                        </label>
                    </div>

                    <div className="overflow-x-auto">
                        <table className="table table-zebra w-full">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Payment Type</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {filteredPaymentTypes && filteredPaymentTypes.length > 0 ? filteredPaymentTypes.map((item, i) => (
                                    <tr key={i}>
                                        <td>{i + 1}</td>
                                        <td>{item.payment_type}</td>
                                        <td>{item.created_at ? new Date(item.created_at).toLocaleDateString() : "-"}</td>
                                        <td>
                                            <div className="flex space-x-2">
                                                <button
                                                    className="btn btn-sm btn-primary text-white"
                                                    onClick={() => {
                                                        setSelectedPaymentType(item);
                                                        document.getElementById('modal_input').checked = true;
                                                    }}
                                                >
                                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                                    </svg>
                                                </button>
                                                <button
                                                    className="btn btn-sm btn-error text-white"
                                                    onClick={() => deleteModal(item)}
                                                >
                                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                )) : (
                                    <tr>
                                        <td colSpan="4" className="text-center">Tidak ada data tipe pembayaran.</td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <ModalInput
                fields={fields}
                tableName="payment_types"
                initialData={selectedPaymentType}
                onClose={() => setSelectedPaymentType(null)}
            />

            <DeleteButton
                isOpen={isDeleteOpen}
                onClose={() => setDeleteOpen(false)}
                item={selectedPaymentType}
                tableName="payment_types"
            />
        </div>
    );
}