import TenantStatusBadge from '@/components/admin/TenantStatusBadge';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Link } from '@inertiajs/react';
import {
    ArrowLeft,
    Building2,
    ChevronDown,
    Layers,
    ShieldCheck,
    ShieldOff,
    Timer,
    Trash2,
} from 'lucide-react';
import type { TenantDetail } from './types';

export default function TenantHeader({
    tenant,
    hasSubscription,
    isSuspended,
    onReactivate,
    onSuspend,
    onExtendTrial,
    onChangePlan,
    onDelete,
}: {
    tenant: TenantDetail;
    hasSubscription: boolean;
    isSuspended: boolean;
    onReactivate: () => void;
    onSuspend: () => void;
    onExtendTrial: () => void;
    onChangePlan: () => void;
    onDelete: () => void;
}) {
    return (
        <div>
            <Link
                href="/admin/tenants"
                className="text-muted-foreground hover:text-foreground mb-4 inline-flex items-center gap-1.5 text-sm transition-colors"
            >
                <ArrowLeft className="h-3.5 w-3.5" />
                All Tenants
            </Link>

            <div className="flex flex-wrap items-start gap-4">
                <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-xl">
                    <Building2 className="text-muted-foreground h-7 w-7" />
                </div>
                <div className="min-w-0 flex-1">
                    <div className="flex flex-wrap items-center gap-2">
                        <h1 className="text-foreground text-xl font-bold">
                            {tenant.name}
                        </h1>
                        <TenantStatusBadge status={tenant.status} />
                    </div>
                    <p className="text-muted-foreground mt-0.5 font-mono text-sm">
                        {tenant.id}
                    </p>
                </div>

                {/* Actions */}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="outline" size="sm">
                            Actions
                            <ChevronDown className="ml-1.5 h-3.5 w-3.5" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-48">
                        {hasSubscription && (
                            <>
                                {isSuspended ? (
                                    <DropdownMenuItem
                                        className="gap-2 text-xs"
                                        onClick={onReactivate}
                                    >
                                        <ShieldCheck className="h-3.5 w-3.5" />
                                        Reactivate
                                    </DropdownMenuItem>
                                ) : (
                                    <DropdownMenuItem
                                        className="gap-2 text-xs"
                                        onClick={onSuspend}
                                    >
                                        <ShieldOff className="h-3.5 w-3.5" />
                                        Suspend
                                    </DropdownMenuItem>
                                )}
                                <DropdownMenuItem
                                    className="gap-2 text-xs"
                                    onClick={onExtendTrial}
                                >
                                    <Timer className="h-3.5 w-3.5" />
                                    Extend trial
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                    className="gap-2 text-xs"
                                    onClick={onChangePlan}
                                >
                                    <Layers className="h-3.5 w-3.5" />
                                    Change plan
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                            </>
                        )}
                        <DropdownMenuItem
                            className="gap-2 text-xs text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
                            onClick={onDelete}
                        >
                            <Trash2 className="h-3.5 w-3.5" />
                            Delete tenant
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>
        </div>
    );
}