import { AppDetail } from '@/types';
import { Link, usePage } from '@inertiajs/react';
import { ArrowLeft, BarChart3, CreditCard, Settings } from 'lucide-react';

export type AppDetailWithNext = AppDetail & { nextStep?: string | null };

const tabs = [
    { label: 'Overview', icon: BarChart3, routeName: 'app.show' },
    { label: 'Billing', icon: CreditCard, routeName: 'app.billing' },
    { label: 'Settings', icon: Settings, routeName: 'app.settings' },
];

const ORG_TYPE_LABELS: Record<string, string> = {
    sacco: 'SACCO',
    microfinance: 'Microfinance',
    bank: 'Bank',
    insurance: 'Insurance',
    other: 'Organisation',
};

interface Props {
    app: AppDetailWithNext;
}

export default function AppNav({ app }: Props) {
    const nextStep = (app as AppDetailWithNext).nextStep;
    const { url } = usePage();

    const orgLabel = app.orgType
        ? (ORG_TYPE_LABELS[app.orgType] ?? app.orgType)
        : 'Organisation';

    return (
        <div className="border-border border-b">
            {/* Back + title row */}
            <div className="flex items-center gap-4 px-6 pt-5 pb-4">
                <Link
                    href={route('dashboard')}
                    className="text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors"
                >
                    <ArrowLeft className="h-4 w-4" />
                    My Apps
                </Link>

                <div className="bg-border h-4 w-px" />

                <div className="min-w-0">
                    <h1 className="text-foreground truncate text-base font-semibold">
                        {app.name}
                    </h1>
                    <p className="text-muted-foreground dark:text-muted-foreground/70 text-xs">
                        {orgLabel}
                    </p>
                </div>

                {app.setupComplete && app.portalUrl && (
                    <a
                        href={app.portalUrl}
                        target="_blank"
                        rel="noreferrer"
                        className="border-border bg-secondary/40 text-muted-foreground hover:text-foreground ml-auto flex shrink-0 items-center gap-1.5 rounded-lg border px-3 py-1.5 text-xs transition-colors"
                    >
                        Open portal ↗
                    </a>
                )}

                {!app.setupComplete && nextStep && (
                    <Link
                        href={nextStep}
                        className="pf-btn ml-auto shrink-0 px-3 py-1.5 text-xs"
                    >
                        Continue setup →
                    </Link>
                )}
            </div>

            {/* Tab bar */}
            <div className="flex gap-1 px-6">
                {tabs.map(({ label, icon: Icon, routeName }) => {
                    const href = route(routeName, { tenant: app.id });
                    const active =
                        url === new URL(href, 'http://x').pathname ||
                        url.startsWith(new URL(href, 'http://x').pathname);

                    return (
                        <Link
                            key={routeName}
                            href={href}
                            className={`flex items-center gap-1.5 border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${
                                active
                                    ? 'border-primary text-primary'
                                    : 'text-muted-foreground hover:text-foreground border-transparent'
                            }`}
                        >
                            <Icon className="h-3.5 w-3.5" />
                            {label}
                        </Link>
                    );
                })}
            </div>
        </div>
    );
}