<script lang="ts">
    import { onMount } from "svelte";
    import { supabase } from "$lib/supabaseClient";

    type User = {
        id: string;
        email: string;
        password: string;
        role: string;
        nip: string;
        full_name: string;
        phone: string;
        address: string;
        profile_picture: string;
        last_login: string;
        is_active: boolean;
        is_verified: boolean;
        is_deleted: boolean;
        last_updated: string;
        last_updated_by: string;
        created_by: string;
        created_at: string;
    };

    const roleUser = [
        { label: "IT", value: "it" },
        { label: "Guest", value: "guest" },
        { label: "Accounting", value: "accounting" },
        { label: "GA", value: "ga" },
        { label: "HR", value: "hr" },
        { label: "S&M", value: "s&m" },
        { label: "Office", value: "office" },
        { label: "HM", value: "hm" },
        { label: "VM", value: "vm" },
    ];

    let user: User = {
        id: "",
        email: "",
        password: "",
        role: "",
        nip: "",
        full_name: "",
        phone: "",
        address: "",
        profile_picture: "",
        last_login: "",
        is_active: true,
        is_verified: false,
        is_deleted: false,
        last_updated: "",
        last_updated_by: "",
        created_by: "",
        created_at: "",
    };

    let file: File | null = null;
    let newPassword = "";
    let confirmPassword = "";
    let loading = false;
    let message = "";

    onMount(async () => {
        const {
            data: { user: authUser },
        } = await supabase.auth.getUser();

        if (authUser) {
            const { data, error } = await supabase
                .from("vb_users")
                .select("*")
                .eq("id", authUser.id)
                .single();

            if (data) {
                user = data;
            } else {
                console.error(error);
            }
        }
    });

    async function uploadProfilePicture() {
        if (!file) return;

        const filePath = `profile_pictures/${user.id}-${file.name}`;
        const { error } = await supabase.storage
            .from("profile")
            .upload(filePath, file, { upsert: true });

        if (!error) {
            const { data: publicUrlData } = supabase.storage
                .from("profile")
                .getPublicUrl(filePath);
            user.profile_picture = publicUrlData.publicUrl;
        } else {
            throw new Error("Upload failed");
        }
    }

    async function updateProfile() {
        loading = true;
        try {
            if (file) await uploadProfilePicture();

            user.last_updated = new Date().toISOString();
            user.last_updated_by = user.email;

            const { error } = await supabase
                .from("vb_users")
                .update(user)
                .eq("id", user.id);

            message = error ? "Update gagal" : "Profil berhasil diperbarui";
        } catch (err) {
            message = "Terjadi kesalahan saat menyimpan";
        } finally {
            loading = false;
        }
    }

    async function updatePassword() {
        if (newPassword !== confirmPassword) {
            message = "Password tidak cocok";
            return;
        }

        const { error } = await supabase.auth.updateUser({
            password: newPassword,
        });
        message = error ? "Gagal ubah password" : "Password berhasil diubah";
        if (!error) {
            newPassword = "";
            confirmPassword = "";
        }
    }
</script>

<div class="max-w-4xl mx-auto p-6 space-y-10 bg-white shadow-xl rounded-xl">
    <h1 class="text-3xl font-bold text-gray-800 border-b pb-4">
        Profil Pengguna
    </h1>

    {#if message}
        <div class="bg-blue-100 text-blue-700 px-4 py-2 rounded shadow-sm">
            {message}
        </div>
    {/if}

    <div class="flex flex-col sm:flex-row sm:items-center sm:gap-6 gap-4">
        <div class="flex flex-col items-start space-y-2">
            <label class="block text-sm font-medium text-gray-700"
                >Foto Profil</label
            >
            <div class="relative inline-block">
                <label
                    class="cursor-pointer inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow"
                >
                    Pilih Gambar
                    <input
                        type="file"
                        accept="image/*"
                        class="absolute inset-0 opacity-0 cursor-pointer"
                        on:change={(e) => {
                            const target = e.target as HTMLInputElement;
                            file = target.files ? target.files[0] : null;
                        }}
                    />
                </label>
            </div>
            {#if file}
                <p class="text-xs text-gray-500">File dipilih: {file.name}</p>
            {/if}
        </div>
        {#if user.profile_picture}
            <img
                src={user.profile_picture}
                alt="Profile"
                class="w-24 h-24 rounded-full border-2 border-gray-300 shadow"
            />
        {/if}
    </div>

    <form
        on:submit|preventDefault={updateProfile}
        class="grid grid-cols-1 md:grid-cols-2 gap-6"
    >
        <div>
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >Email</label
            >
            <input
                type="email"
                bind:value={user.email}
                class="w-full p-2 border rounded-md shadow-sm"
                required
            />
        </div>
        <div>
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >Nama Lengkap</label
            >
            <input
                type="text"
                bind:value={user.full_name}
                class="w-full p-2 border rounded-md shadow-sm"
            />
        </div>
        <div>
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >NIP</label
            >
            <input
                type="text"
                bind:value={user.nip}
                class="w-full p-2 border rounded-md shadow-sm"
            />
        </div>
        <div>
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >Nomor Telepon</label
            >
            <input
                type="tel"
                bind:value={user.phone}
                class="w-full p-2 border rounded-md shadow-sm"
            />
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >Alamat</label
            >
            <textarea
                bind:value={user.address}
                class="w-full p-2 border rounded-md shadow-sm"
            ></textarea>
        </div>
        <div>
            <label class="block text-sm font-medium mb-1 text-gray-700"
                >Role</label
            >
            <select
                bind:value={user.role}
                class="w-full p-2 border rounded-md shadow-sm"
            >
                {#each roleUser as role}
                    <option value={role.value}>{role.label}</option>
                {/each}
            </select>
        </div>
        <div class="flex gap-4 items-center">
            <label
                ><input
                    type="checkbox"
                    bind:checked={user.is_active}
                    class="mr-1"
                /> Aktif</label
            >
            <label
                ><input
                    type="checkbox"
                    bind:checked={user.is_verified}
                    class="mr-1"
                /> Verifikasi</label
            >
            <label
                ><input
                    type="checkbox"
                    bind:checked={user.is_deleted}
                    class="mr-1"
                /> Hapus</label
            >
        </div>
        <div class="md:col-span-2">
            <button
                type="submit"
                class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md shadow"
                disabled={loading}
            >
                {loading ? "Menyimpan..." : "Simpan Perubahan"}
            </button>
        </div>
    </form>

    <div class="border-t pt-6">
        <h2 class="text-xl font-semibold mb-4 text-gray-800">Ubah Password</h2>
        <form
            on:submit|preventDefault={updatePassword}
            class="grid grid-cols-1 md:grid-cols-2 gap-4"
        >
            <div>
                <label class="block text-sm font-medium mb-1 text-gray-700"
                    >Password Baru</label
                >
                <input
                    type="password"
                    bind:value={newPassword}
                    class="w-full p-2 border rounded-md shadow-sm"
                    required
                />
            </div>
            <div>
                <label class="block text-sm font-medium mb-1 text-gray-700"
                    >Konfirmasi Password</label
                >
                <input
                    type="password"
                    bind:value={confirmPassword}
                    class="w-full p-2 border rounded-md shadow-sm"
                    required
                />
            </div>
            <div class="md:col-span-2">
                <button
                    type="submit"
                    class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md shadow"
                >
                    Ubah Password
                </button>
            </div>
        </form>
    </div>
</div>
