import { Bell, BellOff, X } from 'lucide-react';
import { useState } from 'react';

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { useNotificationPermission } from '@/hooks/use-notification-permission';
import { cn } from '@/lib/utils';

/**
 * Banner ajakan mengaktifkan notifikasi browser.
 *
 * Tampil setelah user login (dipasang di dalam layout utama). Perilakunya
 * bergantung pada status izin:
 *
 * - `default`             : ajakan + tombol "Aktifkan notifikasi".
 * - `denied`              : panduan unblock manual (prompt tidak bisa muncul lagi).
 * - `granted`/unsupported : tidak menampilkan apa-apa.
 *
 * Dismiss (tombol ✕) hanya menyembunyikan banner pada render saat ini; banner
 * akan muncul lagi setiap login/reload selama izin belum diberikan.
 */
export function NotificationPermissionBanner() {
    const { permission, requestPermission } = useNotificationPermission();
    const [dismissed, setDismissed] = useState(false);

    // Sudah diizinkan, tidak didukung, atau baru saja di-dismiss → jangan render.
    if (permission === 'granted' || permission === 'unsupported' || dismissed) {
        return null;
    }

    const isDenied = permission === 'denied';

    const handleEnable = async () => {
        const result = await requestPermission();

        // Jika berhasil, banner otomatis hilang karena status jadi `granted`.
        // Jika user menutup prompt tanpa memilih, status tetap `default`.
        if (result === 'granted') {
            setDismissed(true);
        }
    };

    return (
        <div className="px-4 pt-4">
            <Alert
                className={cn(
                    'relative flex items-start gap-3 pr-10',
                    isDenied && 'border-destructive/40',
                )}
            >
                {isDenied ? (
                    <BellOff className="text-destructive" />
                ) : (
                    <Bell className="text-primary" />
                )}

                <div className="flex-1">
                    <AlertTitle>
                        {isDenied
                            ? 'Notifikasi diblokir'
                            : 'Aktifkan notifikasi'}
                    </AlertTitle>
                    <AlertDescription className="mt-1">
                        {isDenied ? (
                            <p>
                                Notifikasi untuk situs ini sedang diblokir. Buka
                                pengaturan situs di browser (ikon gembok di
                                sebelah alamat), lalu ubah izin{' '}
                                <span className="font-medium">
                                    Notifications
                                </span>{' '}
                                menjadi{' '}
                                <span className="font-medium">Allow</span> agar
                                tidak ketinggalan update task.
                            </p>
                        ) : (
                            <p>
                                Aktifkan notifikasi agar kamu langsung tahu saat
                                ada komentar atau perubahan pada task-mu, meski
                                sedang membuka tab lain.
                            </p>
                        )}
                    </AlertDescription>

                    {!isDenied && (
                        <div className="mt-3">
                            <Button size="sm" onClick={handleEnable}>
                                Aktifkan notifikasi
                            </Button>
                        </div>
                    )}
                </div>

                <button
                    type="button"
                    onClick={() => setDismissed(true)}
                    aria-label="Tutup"
                    className="absolute top-3 right-3 rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
                >
                    <X className="size-4" />
                </button>
            </Alert>
        </div>
    );
}