import React, { useEffect, useState, Fragment } from 'react';
import { router } from '@inertiajs/react';
import { Button, toast } from '@heroui/react';
import {
    ArrowPathIcon,
    CheckIcon,
    InformationCircleIcon,
} from '@heroicons/react/24/solid';
import AppLayout from '@/Layouts/AppLayout';
import { Field } from '@/Components/ui/Field';
import { SelectField } from '@/Components/ui/SelectField';
import { SearchInput } from '@/Components/ui/SearchInput';
import { api, getErrorMessage } from '@/lib/api';
import { useQueryClient } from '@tanstack/react-query';
import { useAll } from '@/hooks/useResource';

interface PermissionActionState {
    view: boolean;
    edit: boolean;
    delete: boolean;
}

interface SettingsData {
    storage_driver: string;
    honor_based_rate: string;
    gdrive_connected: boolean;
    permissions?: Record<string, Record<string, PermissionActionState>>;
    permission_actions?: Record<string, string>;
    delete_permissions?: Record<string, Record<string, boolean>>;
    delete_menus?: Record<string, string>;
    delete_roles?: string[];
}

const DEFAULT_PERMISSIONS: Record<string, Record<string, PermissionActionState>> = {
    Admin: {
        kegiatan: { view: true, edit: true, delete: true },
        file_manager: { view: true, edit: true, delete: true },
        surat_masuk: { view: true, edit: true, delete: true },
        surat_keluar: { view: true, edit: true, delete: true },
        disposisi: { view: true, edit: true, delete: true },
        honor: { view: true, edit: true, delete: true },
        board: { view: true, edit: true, delete: true },
        panduan: { view: true, edit: true, delete: true },
        narasumber: { view: true, edit: true, delete: true },
        klien: { view: true, edit: true, delete: true },
        users: { view: false, edit: false, delete: false },
    },
    Koordinator: {
        kegiatan: { view: true, edit: true, delete: true },
        file_manager: { view: true, edit: true, delete: true },
        surat_masuk: { view: true, edit: true, delete: true },
        surat_keluar: { view: true, edit: true, delete: true },
        disposisi: { view: true, edit: true, delete: true },
        honor: { view: true, edit: true, delete: true },
        board: { view: true, edit: true, delete: true },
        panduan: { view: true, edit: true, delete: true },
        narasumber: { view: true, edit: true, delete: true },
        klien: { view: true, edit: true, delete: true },
        users: { view: false, edit: false, delete: false },
    },
    PA: {
        kegiatan: { view: true, edit: false, delete: false },
        file_manager: { view: true, edit: false, delete: false },
        surat_masuk: { view: false, edit: false, delete: false },
        surat_keluar: { view: false, edit: false, delete: false },
        disposisi: { view: true, edit: false, delete: false },
        honor: { view: true, edit: false, delete: false },
        board: { view: true, edit: false, delete: false },
        panduan: { view: true, edit: false, delete: false },
        narasumber: { view: false, edit: false, delete: false },
        klien: { view: false, edit: false, delete: false },
        users: { view: false, edit: false, delete: false },
    },
};

const TABS = [
    { id: 'permissions', label: 'Hak Akses Data' },
    { id: 'general', label: 'Umum & Storage' },
] as const;

type TabId = (typeof TABS)[number]['id'];

export default function SettingsPage() {
    const qc = useQueryClient();
    const { data, isLoading } = useAll<SettingsData>('settings', '/settings');
    const [activeTab, setActiveTab] = useState<TabId>('permissions');
    const [form, setForm] = useState<Record<string, any>>({});
    const [permissions, setPermissions] = useState<Record<string, Record<string, PermissionActionState>>>(DEFAULT_PERMISSIONS);
    const [saving, setSaving] = useState(false);
    const [search, setSearch] = useState('');

    useEffect(() => {
        if (data) {
            setForm(data);
            if (data.permissions) {
                setPermissions(data.permissions);
            } else if (data.delete_permissions) {
                const merged = JSON.parse(JSON.stringify(DEFAULT_PERMISSIONS));
                Object.entries(data.delete_permissions).forEach(([role, menuMap]) => {
                    if (merged[role]) {
                        Object.entries(menuMap).forEach(([menu, val]) => {
                            if (merged[role][menu]) {
                                merged[role][menu].delete = Boolean(val);
                            }
                        });
                    }
                });
                setPermissions(merged);
            }
        }
    }, [data]);

    const menus = data?.delete_menus ?? {
        kegiatan: 'Data Kegiatan',
        file_manager: 'File Manager',
        surat_masuk: 'Surat Masuk',
        surat_keluar: 'Surat Keluar',
        disposisi: 'Disposisi',
        honor: 'Penugasan & Honor',
        board: 'Papan Tugas',
        panduan: 'Panduan & Teknis',
        narasumber: 'Master Narasumber',
        klien: 'Master Klien',
        users: 'Manajemen User',
    };

    const roles = data?.delete_roles ?? ['Admin', 'Koordinator', 'PA'];

    const filteredMenus = Object.entries(menus).filter(([key, label]) => {
        if (!search.trim()) return true;
        const q = search.toLowerCase();
        return label.toLowerCase().includes(q) || key.toLowerCase().includes(q);
    });

    function toggleAction(role: string, menuKey: string, action: 'view' | 'edit' | 'delete') {
        setPermissions((prev) => {
            const rolePerms = prev[role] ?? {};
            const menuPerms = rolePerms[menuKey] ?? { view: false, edit: false, delete: false };
            const nextVal = !menuPerms[action];

            const updatedMenu = {
                ...menuPerms,
                [action]: nextVal,
            };

            // Jika view dinonaktifkan, matikan juga edit dan delete
            if (action === 'view' && !nextVal) {
                updatedMenu.edit = false;
                updatedMenu.delete = false;
            }

            // Jika edit atau delete diaktifkan, otomatis aktifkan view
            if ((action === 'edit' || action === 'delete') && nextVal) {
                updatedMenu.view = true;
            }

            return {
                ...prev,
                [role]: {
                    ...rolePerms,
                    [menuKey]: updatedMenu,
                },
            };
        });
    }

    function toggleColumnForRole(role: string, action: 'view' | 'edit' | 'delete') {
        setPermissions((prev) => {
            const next = JSON.parse(JSON.stringify(prev));
            const rolePerms = next[role] ?? {};
            const allActive = Object.keys(menus).every((m) => rolePerms[m]?.[action]);
            const targetVal = !allActive;

            Object.keys(menus).forEach((m) => {
                if (!rolePerms[m]) {
                    rolePerms[m] = { view: false, edit: false, delete: false };
                }
                rolePerms[m][action] = targetVal;
                if (action === 'view' && !targetVal) {
                    rolePerms[m].edit = false;
                    rolePerms[m].delete = false;
                }
                if ((action === 'edit' || action === 'delete') && targetVal) {
                    rolePerms[m].view = true;
                }
            });

            next[role] = rolePerms;
            return next;
        });
    }

    function setAllForRole(role: string, val: boolean) {
        setPermissions((prev) => {
            const updated: Record<string, PermissionActionState> = {};
            Object.keys(menus).forEach((m) => {
                updated[m] = {
                    view: val,
                    edit: val,
                    delete: val,
                };
            });
            return {
                ...prev,
                [role]: updated,
            };
        });
    }

    function setAllForAction(action: 'view' | 'edit' | 'delete', val: boolean) {
        setPermissions((prev) => {
            const next = JSON.parse(JSON.stringify(prev));
            roles.forEach((r) => {
                if (!next[r]) next[r] = {};
                Object.keys(menus).forEach((m) => {
                    if (!next[r][m]) {
                        next[r][m] = { view: false, edit: false, delete: false };
                    }
                    next[r][m][action] = val;
                    if (action === 'view' && !val) {
                        next[r][m].edit = false;
                        next[r][m].delete = false;
                    }
                    if ((action === 'edit' || action === 'delete') && val) {
                        next[r][m].view = true;
                    }
                });
            });
            return next;
        });
    }

    function resetToDefault() {
        setPermissions(DEFAULT_PERMISSIONS);
        toast.success('Pengaturan hak akses dikembalikan ke default (belum disimpan)');
    }

    async function save() {
        setSaving(true);
        try {
            const deletePerms: Record<string, Record<string, boolean>> = {};
            roles.forEach((r) => {
                deletePerms[r] = {};
                Object.keys(menus).forEach((m) => {
                    deletePerms[r][m] = Boolean(permissions[r]?.[m]?.delete);
                });
            });

            const payload = {
                ...form,
                permissions,
                delete_permissions: deletePerms,
            };

            await api.put('/settings', payload);
            qc.invalidateQueries({ queryKey: ['settings'] });
            router.reload({ only: ['auth'] });
            toast.success('Pengaturan berhasil disimpan');
        } catch (error) {
            toast.danger(getErrorMessage(error, 'Gagal menyimpan pengaturan'));
        } finally {
            setSaving(false);
        }
    }

    if (isLoading || !data) {
        return (
            <AppLayout>
                <div className="flex flex-col gap-5">
                    <div className="rounded-xl border border-gray-200 bg-white px-4 py-8 text-center text-sm text-gray-400">
                        Memuat...
                    </div>
                </div>
            </AppLayout>
        );
    }

    return (
        <AppLayout>
            <div className="flex flex-col gap-5">
                {/* Standard Page Header */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white border border-slate-200/80 px-4 sm:px-6 py-4 sm:py-4.5 rounded-2xl shadow-sm">
                    <div>
                        <h1 className="text-lg sm:text-xl font-bold text-gray-900">Pengaturan Sistem</h1>
                        <p className="text-xs sm:text-sm text-gray-500 mt-0.5">
                            Konfigurasi umum, integrasi penyimpanan, dan hak akses data (lihat, edit, hapus) per role.
                        </p>
                    </div>

                    <Button
                        onPress={save}
                        isDisabled={saving}
                        className="rounded-full px-5 shadow-sm bg-sky-600 hover:bg-sky-700 text-white shrink-0 self-start sm:self-auto text-sm font-medium"
                    >
                        {saving ? 'Menyimpan...' : 'Simpan Perubahan'}
                    </Button>
                </div>

                {/* Standard Tab Bar */}
                <div className="flex gap-1 border-b border-gray-200 overflow-x-auto">
                    {TABS.map((t) => (
                        <button
                            key={t.id}
                            type="button"
                            onClick={() => setActiveTab(t.id)}
                            className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px cursor-pointer transition-colors whitespace-nowrap ${
                                activeTab === t.id
                                    ? 'border-sky-600 text-sky-600 font-semibold'
                                    : 'border-transparent text-gray-500 hover:text-gray-700'
                            }`}
                        >
                            {t.label}
                        </button>
                    ))}
                </div>

                {/* Tab 1: Hak Akses Data */}
                {activeTab === 'permissions' && (
                    <div className="flex flex-col gap-4">
                        {/* Info Banner */}
                        <div className="bg-sky-50 border border-sky-200/80 rounded-2xl p-4 sm:p-5 flex items-start gap-3">
                            <InformationCircleIcon className="w-5 h-5 text-sky-600 shrink-0 mt-0.5" />
                            <div className="text-xs sm:text-sm text-sky-900 leading-relaxed">
                                <p className="font-semibold text-sky-950 mb-0.5">Matriks Hak Akses Data per Menu</p>
                                <p className="text-sky-800">
                                    Atur izin <span className="font-semibold text-sky-950">Lihat</span> (tampilkan di menu/baca data), <span className="font-semibold text-sky-950">Edit</span> (tambah & ubah data), dan <span className="font-semibold text-sky-950">Hapus</span> data untuk tiap role. Role <span className="font-semibold text-sky-950">Superadmin</span> selalu memiliki akses penuh (bypass) untuk memastikan kendali sistem.
                                </p>
                            </div>
                        </div>

                        {/* Toolbar: Search & Quick Actions */}
                        <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-3 bg-white border border-gray-200 rounded-xl p-3 sm:px-4">
                            <div className="flex items-center gap-2 flex-1">
                                <SearchInput
                                    value={search}
                                    onChange={setSearch}
                                    placeholder="Cari menu / modul..."
                                />
                            </div>

                            <div className="flex flex-wrap items-center gap-2 text-xs">
                                <span className="font-medium text-gray-500">Tindakan Cepat:</span>
                                {roles.map((r) => (
                                    <div key={r} className="inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 p-0.5">
                                        <span className="px-2 font-medium text-gray-700">{r}:</span>
                                        <button
                                            type="button"
                                            onClick={() => setAllForRole(r, true)}
                                            className="px-1.5 py-0.5 rounded text-emerald-700 hover:bg-emerald-50 text-[11px] font-semibold cursor-pointer transition-colors"
                                            title={`Aktifkan semua akses untuk ${r}`}
                                        >
                                            On
                                        </button>
                                        <span className="text-gray-300">|</span>
                                        <button
                                            type="button"
                                            onClick={() => setAllForRole(r, false)}
                                            className="px-1.5 py-0.5 rounded text-rose-700 hover:bg-rose-50 text-[11px] font-semibold cursor-pointer transition-colors"
                                            title={`Nonaktifkan semua akses untuk ${r}`}
                                        >
                                            Off
                                        </button>
                                    </div>
                                ))}

                                <div className="inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 p-0.5">
                                    <span className="px-2 font-medium text-gray-700">Global:</span>
                                    <button
                                        type="button"
                                        onClick={() => setAllForAction('view', true)}
                                        className="px-1.5 py-0.5 rounded text-sky-700 hover:bg-sky-50 text-[11px] font-semibold cursor-pointer transition-colors"
                                        title="Aktifkan semua izin Lihat"
                                    >
                                        Lihat On
                                    </button>
                                    <span className="text-gray-300">|</span>
                                    <button
                                        type="button"
                                        onClick={() => setAllForAction('edit', true)}
                                        className="px-1.5 py-0.5 rounded text-sky-700 hover:bg-sky-50 text-[11px] font-semibold cursor-pointer transition-colors"
                                        title="Aktifkan semua izin Edit"
                                    >
                                        Edit On
                                    </button>
                                    <span className="text-gray-300">|</span>
                                    <button
                                        type="button"
                                        onClick={() => setAllForAction('delete', true)}
                                        className="px-1.5 py-0.5 rounded text-rose-700 hover:bg-rose-50 text-[11px] font-semibold cursor-pointer transition-colors"
                                        title="Aktifkan semua izin Hapus"
                                    >
                                        Hapus On
                                    </button>
                                </div>

                                <button
                                    type="button"
                                    onClick={resetToDefault}
                                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-gray-600 hover:text-gray-900 bg-gray-100 hover:bg-gray-200/80 rounded-lg transition-colors cursor-pointer shrink-0"
                                >
                                    <ArrowPathIcon className="w-3.5 h-3.5" />
                                    <span>Reset Default</span>
                                </button>
                            </div>
                        </div>

                        {/* Standard DataTable Container */}
                        <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="bg-gray-50 border-b border-gray-200">
                                        <th rowSpan={2} className="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider min-w-[200px]">
                                            Menu / Modul
                                        </th>
                                        <th rowSpan={2} className="px-3 py-3 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider min-w-[120px] border-r border-gray-200">
                                            Superadmin
                                        </th>
                                        {roles.map((r) => (
                                            <th
                                                key={r}
                                                colSpan={3}
                                                className="px-3 py-2 text-center text-xs font-semibold text-gray-700 uppercase tracking-wider border-r border-gray-200 last:border-r-0"
                                            >
                                                {r}
                                            </th>
                                        ))}
                                    </tr>
                                    <tr className="bg-gray-50 border-b border-gray-200 text-[11px] font-medium text-gray-500 uppercase tracking-wider">
                                        {roles.map((r) => (
                                            <Fragment key={r}>
                                                <th
                                                    onClick={() => toggleColumnForRole(r, 'view')}
                                                    className="px-2 py-1.5 text-center min-w-[65px] cursor-pointer hover:bg-gray-100 hover:text-gray-700 select-none transition-colors"
                                                    title={`Klik untuk On/Off kolom Lihat ${r}`}
                                                >
                                                    Lihat
                                                </th>
                                                <th
                                                    onClick={() => toggleColumnForRole(r, 'edit')}
                                                    className="px-2 py-1.5 text-center min-w-[65px] cursor-pointer hover:bg-gray-100 hover:text-gray-700 select-none transition-colors"
                                                    title={`Klik untuk On/Off kolom Edit ${r}`}
                                                >
                                                    Edit
                                                </th>
                                                <th
                                                    onClick={() => toggleColumnForRole(r, 'delete')}
                                                    className="px-2 py-1.5 text-center min-w-[65px] border-r border-gray-200 last:border-r-0 cursor-pointer hover:bg-gray-100 hover:text-gray-700 select-none transition-colors"
                                                    title={`Klik untuk On/Off kolom Hapus ${r}`}
                                                >
                                                    Hapus
                                                </th>
                                            </Fragment>
                                        ))}
                                    </tr>
                                </thead>
                                <tbody>
                                    {filteredMenus.map(([menuKey, menuLabel]) => (
                                        <tr key={menuKey} className="border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors">
                                            {/* Menu Info */}
                                            <td className="px-4 py-3">
                                                <div className="flex flex-col">
                                                    <span className="font-medium text-gray-900">{menuLabel}</span>
                                                    <span className="text-[11px] font-mono text-gray-400">{menuKey}</span>
                                                </div>
                                            </td>

                                            {/* Superadmin always bypass */}
                                            <td className="px-3 py-3 text-center border-r border-gray-200 whitespace-nowrap">
                                                <span className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200">
                                                    <CheckIcon className="w-3 h-3 text-emerald-600 stroke-2" />
                                                    <span>Penuh</span>
                                                </span>
                                            </td>

                                            {/* Configurable Roles */}
                                            {roles.map((r) => {
                                                const perms = permissions[r]?.[menuKey] ?? { view: false, edit: false, delete: false };
                                                const isV = Boolean(perms.view);
                                                const isE = Boolean(perms.edit);
                                                const isD = Boolean(perms.delete);

                                                return (
                                                    <Fragment key={r}>
                                                        {/* Lihat */}
                                                        <td className="px-2 py-3 text-center">
                                                            <input
                                                                type="checkbox"
                                                                checked={isV}
                                                                onChange={() => toggleAction(r, menuKey, 'view')}
                                                                title={`${r} - Lihat ${menuLabel}`}
                                                                className="rounded border-gray-300 text-sky-600 focus:ring-sky-500 h-4 w-4 cursor-pointer transition"
                                                            />
                                                        </td>

                                                        {/* Edit */}
                                                        <td className="px-2 py-3 text-center">
                                                            <input
                                                                type="checkbox"
                                                                checked={isE}
                                                                onChange={() => toggleAction(r, menuKey, 'edit')}
                                                                title={`${r} - Edit ${menuLabel}`}
                                                                className="rounded border-gray-300 text-sky-600 focus:ring-sky-500 h-4 w-4 cursor-pointer transition"
                                                            />
                                                        </td>

                                                        {/* Hapus */}
                                                        <td className="px-2 py-3 text-center border-r border-gray-200 last:border-r-0">
                                                            <input
                                                                type="checkbox"
                                                                checked={isD}
                                                                onChange={() => toggleAction(r, menuKey, 'delete')}
                                                                title={`${r} - Hapus ${menuLabel}`}
                                                                className="rounded border-gray-300 text-rose-600 focus:ring-rose-500 h-4 w-4 cursor-pointer transition"
                                                            />
                                                        </td>
                                                    </Fragment>
                                                );
                                            })}
                                        </tr>
                                    ))}

                                    {filteredMenus.length === 0 && (
                                        <tr>
                                            <td colSpan={11} className="px-4 py-8 text-center text-sm text-gray-400">
                                                Tidak ada menu yang sesuai pencarian "{search}".
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>

                        {/* Bottom Save Action */}
                        <div className="flex justify-end pt-1">
                            <Button
                                onPress={save}
                                isDisabled={saving}
                                className="rounded-full px-6 shadow-sm bg-sky-600 hover:bg-sky-700 text-white font-medium"
                            >
                                {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
                            </Button>
                        </div>
                    </div>
                )}

                {/* Tab 2: Umum & Storage */}
                {activeTab === 'general' && (
                    <div className="flex flex-col gap-5 max-w-xl">
                        <div className="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 flex flex-col gap-4">
                            <h2 className="font-semibold text-gray-900 text-sm">Umum</h2>
                            <Field
                                label="Tarif Transport per KM (Rp)"
                                type="number"
                                value={form.honor_based_rate ?? ''}
                                onChange={(v) => setForm((s) => ({ ...s, honor_based_rate: v }))}
                            />
                        </div>

                        <div className="bg-white border border-gray-200 rounded-xl p-4 sm:p-5 flex flex-col gap-4">
                            <h2 className="font-semibold text-gray-900 text-sm">Storage</h2>
                            <SelectField
                                label="Driver Aktif"
                                items={[{ id: 'local', label: 'Local (Server)' }, { id: 'gdrive', label: 'Google Drive' }]}
                                selectedKey={form.storage_driver}
                                onSelectionChange={(v) => setForm((s) => ({ ...s, storage_driver: v }))}
                            />
                            <div className="flex flex-wrap items-center gap-3">
                                <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${data.gdrive_connected ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-gray-100 text-gray-600 border border-gray-200'}`}>
                                    {data.gdrive_connected ? 'Terhubung' : 'Belum terhubung'}
                                </span>
                                <a href="/gdrive/connect" className="text-sm text-sky-600 hover:underline">
                                    Hubungkan Google Drive
                                </a>
                            </div>
                        </div>

                        <div className="flex justify-start">
                            <Button
                                onPress={save}
                                isDisabled={saving}
                                className="rounded-full px-5 shadow-sm bg-sky-600 hover:bg-sky-700 text-white font-medium"
                            >
                                {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
                            </Button>
                        </div>
                    </div>
                )}
            </div>
        </AppLayout>
    );
}