import React, {useCallback, useEffect, useMemo, 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;
    sms_credits: number;
    users_count?: number;
};

type CreditSummary = {
    total_credits: number;
    hq_credits: number;
    branches: Branch[];
};

export default function SmsCredits() {
    const {auth} = usePage<{ auth: { user: { api_token: string; branch_id?: number; user_permissions?: string[] } } }>().props;
    const token = auth?.user?.api_token;
    const authHeaders = {headers: {Authorization: `Bearer ${token}`}};

    const [summary, setSummary] = useState<CreditSummary>({total_credits: 0, hq_credits: 0, branches: []});
    const [totalCredits, setTotalCredits] = useState('0');
    const [selectedBranchId, setSelectedBranchId] = useState('');
    const [assignCredits, setAssignCredits] = useState('');
    const [loading, setLoading] = useState(false);
    const [savingTotal, setSavingTotal] = useState(false);
    const [assigning, setAssigning] = useState(false);

    const nonHqBranches = useMemo(() => summary.branches.filter(branch => !branch.is_hq), [summary.branches]);
    const userBranch = useMemo(
        () => summary.branches.find(branch => branch.id === auth?.user?.branch_id),
        [auth?.user?.branch_id, summary.branches]
    );
    const canManageCredits = hasPermission(auth?.user, 'sms_credits_manage') && userBranch?.is_hq === true;

    const fetchSummary = useCallback(async () => {
        setLoading(true);
        try {
            const {data} = await axios.get('/api/branches/sms-credits', authHeaders);
            const payload: CreditSummary = data.result;
            setSummary(payload);
            setTotalCredits(String(payload.total_credits ?? 0));
            if (!selectedBranchId && payload.branches?.length) {
                setSelectedBranchId(String(payload.branches.find(branch => !branch.is_hq)?.id ?? ''));
            }
        } catch (error: any) {
            toast.error(error.response?.data?.message ?? 'Failed to load SMS credits');
        } finally {
            setLoading(false);
        }
    }, [selectedBranchId]);

    useEffect(() => { fetchSummary(); }, []);

    const saveTotal = async () => {
        if (!canManageCredits) return;
        setSavingTotal(true);
        try {
            const {data} = await axios.post('/api/branches/sms-credits/total', {total_credits: Number(totalCredits)}, authHeaders);
            setSummary(data.result);
            setTotalCredits(String(data.result.total_credits ?? 0));
            toast.success('SMS credit total updated');
        } catch (error: any) {
            const msg = error.response?.data?.errors
                ? Object.values<string[]>(error.response.data.errors).flat().join(' ')
                : error.response?.data?.message ?? 'Failed to update SMS credit total';
            toast.error(msg);
        } finally {
            setSavingTotal(false);
        }
    };

    const assignToBranch = async () => {
        if (!canManageCredits) return;
        if (!selectedBranchId) { toast.error('Select a branch'); return; }
        if (Number(assignCredits) <= 0) { toast.error('Enter credits to assign'); return; }

        setAssigning(true);
        try {
            const {data} = await axios.post(`/api/branches/${selectedBranchId}/sms-credits/assign`, {credits: Number(assignCredits)}, authHeaders);
            setSummary(data.result);
            setTotalCredits(String(data.result.total_credits ?? 0));
            setAssignCredits('');
            toast.success('SMS credits assigned');
        } catch (error: any) {
            const msg = error.response?.data?.errors
                ? Object.values<string[]>(error.response.data.errors).flat().join(' ')
                : error.response?.data?.message ?? 'Failed to assign SMS credits';
            toast.error(msg);
        } finally {
            setAssigning(false);
        }
    };

    return (
        <div>
            <div className="border-b border-gray-200 p-6 dark:border-gray-800">
                <div className="grid gap-4 md:grid-cols-3">
                    <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
                        <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Total Credits</p>
                        <p className="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">{summary.total_credits}</p>
                    </div>
                    <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
                        <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">HQ Pool</p>
                        <p className="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">{summary.hq_credits}</p>
                    </div>
                    <div className="rounded-lg border border-gray-200 p-4 dark:border-gray-800">
                        <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Branches</p>
                        <p className="mt-2 text-2xl font-bold text-gray-900 dark:text-gray-100">{summary.branches.length}</p>
                    </div>
                </div>
            </div>

            {canManageCredits ? (
            <div className="grid gap-6 p-6 lg:grid-cols-2">
                <div className="space-y-3">
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-200">Firm-wide SMS credit total</label>
                    <div className="flex gap-2">
                        <input type="number" min="0" value={totalCredits} onChange={e => setTotalCredits(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" />
                        <button type="button" onClick={saveTotal} disabled={savingTotal} className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-60">{savingTotal ? 'Saving...' : 'Update'}</button>
                    </div>
                </div>

                <div className="space-y-3">
                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-200">Assign from HQ to branch</label>
                    <div className="grid gap-2 sm:grid-cols-[1fr_140px_auto]">
                        <select value={selectedBranchId} onChange={e => setSelectedBranchId(e.target.value)} className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="">Select branch</option>
                            {nonHqBranches.map(branch => <option key={branch.id} value={branch.id}>{branch.name}</option>)}
                        </select>
                        <input type="number" min="1" value={assignCredits} onChange={e => setAssignCredits(e.target.value)} className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
                        <button type="button" onClick={assignToBranch} disabled={assigning} className="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white disabled:opacity-60">{assigning ? 'Assigning...' : 'Assign'}</button>
                    </div>
                </div>
            </div>
            ) : null}

            <div className="px-6 pb-6">
                <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">Credits</th>
                            <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Users</th>
                        </tr>
                        </thead>
                        <tbody className="divide-y divide-gray-100 bg-white dark:divide-gray-800 dark:bg-gray-900">
                        {loading ? (
                            <tr><td colSpan={3} className="px-4 py-10 text-center text-sm text-gray-400">Loading credits...</td></tr>
                        ) : summary.branches.map(branch => (
                            <tr key={branch.id}>
                                <td className="px-4 py-3 text-sm font-medium text-gray-800 dark:text-gray-100">{branch.name} {branch.is_hq ? <span className="ml-2 rounded-full bg-emerald-50 px-2 py-0.5 text-xs text-emerald-700">HQ</span> : null}</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-sm text-gray-600 dark:text-gray-300">{branch.users_count ?? 0}</td>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}