import { router } from '@inertiajs/react'
import { useState } from 'react'
import { Loader2, LogOut, UserCheck } from 'lucide-react'

/**
 * Permanent "you are signed in as someone else" bar. Rendered as the first child of
 * AppLayout's <main> whenever the `auth.impersonator` shared prop is present.
 *
 * IN FLOW AND `sticky top-0`, NOT `fixed bottom-0`. The first version floated at the bottom
 * of the viewport so that pages would not shift while impersonating. That reasoning was
 * backwards: nothing reserved the bar's height, so it covered whatever was docked at the
 * bottom of the screen — the sidebar's Logout button (39 of its 42px), and every flush
 * `sticky bottom-0` submit bar in the app (CompanyRebate create, the Visit Report pages).
 * Impersonating a sales user to reproduce their problem is the whole point of the feature,
 * and it made their Save button unclickable. A layout shift is the cheaper price.
 *
 * Sticky rather than static so it stays on screen down a long page; inside <main> rather
 * than fixed to the viewport so it can never overlap the sidebar column at all.
 *
 * `z-30` puts it under the mobile drawer (z-50), modals (z-50) and toasts (z-100) — a state
 * marker must never float above the thing you are trying to read or dismiss. The first
 * version used z-100 and covered open dialogs.
 *
 * TWO NESTED DIVS ON PURPOSE: in dark mode `--color-warning-bg` is `rgb(245 158 11 / 0.16)`,
 * i.e. 84% transparent. On a sticky element that means page content scrolls visibly through
 * the bar. The outer div supplies an opaque `bg-card`; the inner one paints the tint on top.
 *
 * Flat, never a gradient — this is a state marker, not an action
 * (.claude/rules/ui-conventions.md).
 */
export default function ImpersonationBar({ impersonator }) {
    const [leaving, setLeaving] = useState(false)

    const stop = () => {
        setLeaving(true)
        router.post(route('impersonate.stop'), {}, {
            onFinish: () => setLeaving(false),
        })
    }

    return (
        <div
            role="status"
            className="sticky top-0 z-30 -mx-4 -mt-5 mb-4 bg-card sm:-mx-6 lg:-mx-8 lg:-mt-7"
        >
            <div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-b border-warning-border bg-warning-bg px-4 py-2.5 sm:px-6 lg:px-8">
                <p className="flex items-center gap-2 text-sm text-warning-text">
                    <UserCheck className="size-4 shrink-0" />
                    <span>
                        You are signed in as someone else. Your real account:{' '}
                        <strong className="font-semibold">{impersonator.Nama}</strong>
                        {impersonator.Username && (
                            <span className="font-mono text-xs"> ({impersonator.Username})</span>
                        )}
                        .
                    </span>
                </p>
                <button
                    type="button"
                    onClick={stop}
                    disabled={leaving}
                    className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-warning-border bg-card px-3 text-sm font-semibold text-warning-text transition-colors hover:border-warning disabled:opacity-60"
                >
                    {leaving
                        ? <><Loader2 className="size-3.5 animate-spin" />Going back...</>
                        : <><LogOut className="size-3.5" />Back to my account</>}
                </button>
            </div>
        </div>
    )
}