import React, {useCallback, useEffect, useState} from 'react';
import {usePage} from '@inertiajs/react';
import axios from 'axios';
import toast from 'react-hot-toast';
import {hasPermission} from '@/lib/user-helper';

type Branch = {
    id: number;
    name: string;
    code: string;
    is_hq: boolean;
    is_active: boolean;
    sms_credits: number;
    users_count?: number;
};

type PaginatedBranches = {
    data: Branch[];
    current_page: number;
    last_page: number;
    total: number;
};

export default function BranchManagement() {
    const {auth} = usePage<{ auth: { user: { api_token: string; user_permissions?: string[] } } }>().props;
    const token = auth?.user?.api_token;
    const canManageBranches = hasPermission(auth?.user, 'branches_manage');
    const authHeaders = {headers: {Authorization: `Bearer ${token}`}};

    const [branches, setBranches] = useState<Branch[]>([]);
    const [pagination, setPagination] = useState({current_page: 1, last_page: 1, total: 0});
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(1);
    const [loading, setLoading] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [editingBranch, setEditingBranch] = useState<Branch | null>(null);
    const [formName, setFormName] = useState('');
    const [formCode, setFormCode] = useState('');
    const [formIsHq, setFormIsHq] = useState(false);
    const [formIsActive, setFormIsActive] = useState(true);
    const [saving, setSaving] = useState(false);

    const fetchBranches = useCallback(async (currentPage = page, searchTerm = search) => {
        setLoading(true);
        try {
            const params = new URLSearchParams({page: String(currentPage)});
            if (searchTerm.trim()) params.append('search', searchTerm.trim());
            const {data} = await axios.get(`/api/branches?${params.toString()}`, authHeaders);
            const payload: PaginatedBranches = data.result;
            setBranches(payload.data ?? []);
            setPagination({current_page: payload.current_page, last_page: payload.last_page, total: payload.total});
        } catch (error: any) {
            toast.error(error.response?.data?.message ?? 'Failed to load branches');
        } finally {
            setLoading(false);
        }
    }, [page, search]);

    useEffect(() => {
        const timer = setTimeout(() => {
            setPage(1);
            fetchBranches(1, search);
        }, 350);
        return () => clearTimeout(timer);
    }, [search]);

    useEffect(() => { fetchBranches(page, search); }, [page]);

    const openCreateModal = () => {
        setEditingBranch(null);
        setFormName('');
        setFormCode('');
        setFormIsHq(false);
        setFormIsActive(true);
        setModalOpen(true);
    };

    const openEditModal = (branch: Branch) => {
        setEditingBranch(branch);
        setFormName(branch.name);
        setFormCode(branch.code);
        setFormIsHq(branch.is_hq);
        setFormIsActive(branch.is_active);
        setModalOpen(true);
    };

    const saveBranch = async () => {
        if (!formName.trim()) { toast.error('Branch name is required'); return; }
        if (!formCode.trim()) { toast.error('Branch code is required'); return; }

        setSaving(true);
        try {
            const payload = {name: formName.trim(), code: formCode.trim(), is_hq: formIsHq, is_active: formIsActive};
            if (editingBranch) {
                await axios.put(`/api/branches/${editingBranch.id}`, payload, authHeaders);
                toast.success('Branch updated');
            } else {
                await axios.post('/api/branches', payload, authHeaders);
                toast.success('Branch created');
            }
            setModalOpen(false);
            await fetchBranches(page, search);
        } catch (error: any) {
            const msg = error.response?.data?.errors
                ? Object.values<string[]>(error.response.data.errors).flat().join(' ')
                : error.response?.data?.message ?? 'Failed to save branch';
            toast.error(msg);
        } finally {
            setSaving(false);
        }
    };

    const deleteBranch = async (branch: Branch) => {
        if (!confirm(`Delete branch "${branch.name}"?`)) return;
        try {
            await axios.delete(`/api/branches/${branch.id}`, authHeaders);
            toast.success('Branch deleted');
            await fetchBranches(page, search);
        } catch (error: any) {
            const msg = error.response?.data?.errors
                ? Object.values<string[]>(error.response.data.errors).flat().join(' ')
                : error.response?.data?.message ?? 'Failed to delete branch';
            toast.error(msg);
        }
    };

    return (
        <div>
            <div className="p-6">
                <div className="mb-5 flex flex-wrap items-center justify-between gap-3">
                    <div className="relative max-w-sm">
                        <i className="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400"></i>
                        <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search branches" className="w-full rounded-lg border border-gray-300 py-2 pl-9 pr-8 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-indigo-500" />
                    </div>
                    {canManageBranches ? (
                        <button type="button" onClick={openCreateModal} className="ti-btn ti-btn-primary px-3 py-2">
                            <i className="fa fa-plus mr-2"></i> New Branch
                        </button>
                    ) : null}
                </div>

                <div className="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800">
                    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-800">
                        <thead className="bg-gray-50 dark:bg-gray-950">
                        <tr>
                            <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Branch</th>
                            <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Users</th>
                            <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">SMS Credits</th>
                            <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-gray-500">Actions</th>
                        </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100 bg-white dark:divide-gray-800 dark:bg-gray-900">
                        {loading ? (
                            <tr><td colSpan={4} className="px-4 py-12 text-center text-sm text-gray-400">Loading branches...</td></tr>
                        ) : branches.length === 0 ? (
                            <tr><td colSpan={4} className="px-4 py-12 text-center text-sm text-gray-400">No branches found</td></tr>
                        ) : branches.map(branch => (
                            <tr key={branch.id} className="hover:bg-gray-50 dark:hover:bg-gray-800">
                                <td className="px-4 py-3">
                                    <div className="flex items-center gap-2">
                                        <div>
                                            <p className="text-sm font-medium text-gray-800 dark:text-gray-100">{branch.name}</p>
                                            <p className="text-xs text-gray-400">{branch.code}</p>
                                        </div>
                                        {branch.is_hq ? <span className="rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">HQ</span> : null}
                                        {!branch.is_active ? <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500">Inactive</span> : null}
                                    </div>
                                </td>
                                <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{branch.users_count ?? 0}</td>
                                <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">{branch.sms_credits}</td>
                                <td className="px-4 py-3 text-right">
                                    {canManageBranches ? (
                                        <>
                                            <button type="button" onClick={() => openEditModal(branch)} className="rounded p-1.5 text-indigo-500 hover:bg-indigo-500 hover:text-white" title="Edit branch"><i className="fa fa-pencil text-sm"></i></button>
                                            <button type="button" onClick={() => deleteBranch(branch)} disabled={branch.is_hq} className="rounded p-1.5 text-red-500 hover:bg-red-500 hover:text-white disabled:cursor-not-allowed disabled:opacity-40" title={branch.is_hq ? 'HQ cannot be deleted' : 'Delete branch'}><i className="fa fa-trash text-sm"></i></button>
                                        </>
                                    ) : <span className="text-xs text-gray-400">View only</span>}
                                </td>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>

                {pagination.last_page > 1 ? (
                    <div className="mt-4 flex items-center justify-between">
                        <p className="text-xs text-gray-500">Page {pagination.current_page} of {pagination.last_page} - {pagination.total} branches</p>
                        <div className="flex gap-1">
                            <button disabled={page <= 1} onClick={() => setPage(p => Math.max(1, p - 1))} className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs disabled:opacity-40">Prev</button>
                            <button disabled={page >= pagination.last_page} onClick={() => setPage(p => Math.min(pagination.last_page, p + 1))} className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs disabled:opacity-40">Next</button>
                        </div>
                    </div>
                ) : null}
            </div>

            {modalOpen && canManageBranches ? (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm">
                    <div className="w-full max-w-md rounded-xl bg-white shadow-xl dark:bg-gray-900">
                        <div className="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                            <h3 className="text-base font-semibold text-gray-800 dark:text-gray-100">{editingBranch ? `Edit: ${editingBranch.name}` : 'Create Branch'}</h3>
                            <button type="button" onClick={() => setModalOpen(false)} className="rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-600"><i className="fa fa-times text-lg"></i></button>
                        </div>
                        <div className="space-y-4 px-5 py-5">
                            <div>
                                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Branch Name</label>
                                <input value={formName} onChange={e => setFormName(e.target.value)} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
                            </div>
                            <div>
                                <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Branch Code</label>
                                <input value={formCode} onChange={e => setFormCode(e.target.value.toUpperCase())} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
                            </div>
                            <label className="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-200"><input type="checkbox" checked={formIsHq} onChange={e => setFormIsHq(e.target.checked)} className="rounded text-indigo-600" /> HQ branch</label>
                            <label className="flex items-center gap-3 text-sm text-gray-700 dark:text-gray-200"><input type="checkbox" checked={formIsActive} onChange={e => setFormIsActive(e.target.checked)} className="rounded text-indigo-600" /> Active</label>
                        </div>
                        <div className="flex justify-end gap-2 border-t border-gray-200 px-5 py-4 dark:border-gray-800">
                            <button type="button" onClick={() => setModalOpen(false)} className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-600">Cancel</button>
                            <button type="button" onClick={saveBranch} disabled={saving} className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-60">{saving ? 'Saving...' : 'Save Branch'}</button>
                        </div>
                    </div>
                </div>
            ) : null}
        </div>
    );
}