import PlanBadge from '@/components/admin/PlanBadge';
import { Badge } from '@/components/ui/badge';
import { Link } from '@inertiajs/react';
import {
    Building2,
    Calendar,
    CreditCard,
    Globe,
    Layers,
    Link2,
    UserRound,
} from 'lucide-react';
import { Field, Section } from './shared';
import {
    COUNTRY_NAMES,
    fmt,
    ORG_TYPES,
    type TenantDetail,
    type TenantSubscription,
} from './types';

export default function OverviewTab({
    tenant,
    subscription,
}: {
    tenant: TenantDetail;
    subscription: TenantSubscription | null;
}) {
    const plan = subscription?.plan;
    const planDisplay = plan?.name ?? 'No plan';

    return (
        <div className="grid gap-6 lg:grid-cols-2">
            <Section title="Organisation">
                <Field icon={Building2} label="Name">
                    {tenant.name}
                </Field>
                <Field icon={Globe} label="Country">
                    {COUNTRY_NAMES[tenant.country] ?? tenant.country}
                </Field>
                {tenant.org_type && (
                    <Field icon={Layers} label="Type">
                        {ORG_TYPES[tenant.org_type] ?? tenant.org_type}
                    </Field>
                )}
                <Field icon={Calendar} label="Joined">
                    {fmt(tenant.joined_at)}
                </Field>
                {tenant.domains.length > 0 && (
                    <Field icon={Link2} label="Domains">
                        <div className="flex flex-col gap-1.5">
                            {tenant.domains.map((d) => (
                                <div
                                    key={d.domain}
                                    className="flex items-center gap-2"
                                >
                                    <Badge
                                        variant="secondary"
                                        className="font-mono text-xs"
                                    >
                                        {d.domain}
                                    </Badge>
                                    {d.is_primary && (
                                        <span className="rounded-full bg-blue-100 px-2 py-0.5 text-[10px] font-semibold text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                            primary
                                        </span>
                                    )}
                                    <span
                                        className={
                                            d.ssl_status === 'active'
                                                ? 'text-[10px] font-medium text-emerald-600 dark:text-emerald-400'
                                                : d.ssl_status === 'failed'
                                                  ? 'text-[10px] font-medium text-red-600 dark:text-red-400'
                                                  : 'text-muted-foreground text-[10px]'
                                        }
                                    >
                                        SSL {d.ssl_status}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </Field>
                )}
            </Section>

            <div className="space-y-6">
                <Section title="Owner">
                    {tenant.owner ? (
                        <Field icon={UserRound} label="Client">
                            <Link
                                href={`/admin/clients/${tenant.owner.id}`}
                                className="hover:opacity-80"
                            >
                                <span>{tenant.owner.name}</span>
                                <span className="text-muted-foreground block text-xs font-normal">
                                    {tenant.owner.email}
                                </span>
                            </Link>
                        </Field>
                    ) : (
                        <p className="text-muted-foreground py-4 text-center text-sm">
                            No owner recorded
                        </p>
                    )}
                </Section>

                <Section title="Subscription">
                    {subscription ? (
                        <>
                            <Field icon={CreditCard} label="Plan">
                                <div className="flex items-center gap-2">
                                    <PlanBadge plan={planDisplay} />
                                    <span className="text-muted-foreground text-xs">
                                        {subscription.billing_cycle === 'yearly'
                                            ? 'Billed yearly'
                                            : 'Billed monthly'}
                                    </span>
                                </div>
                            </Field>
                            <Field icon={CreditCard} label="MRR">
                                <span className="font-semibold">
                                    {subscription.mrr}
                                </span>
                                {plan && (
                                    <span className="text-muted-foreground ml-2 text-xs">
                                        {plan.currency}{' '}
                                        {subscription.billing_cycle === 'yearly'
                                            ? `${plan.price_yearly.toLocaleString()} / yr`
                                            : `${plan.price_monthly.toLocaleString()} / mo`}
                                    </span>
                                )}
                            </Field>
                            {subscription.trial_ends_at && (
                                <Field icon={Calendar} label="Trial ends">
                                    {fmt(subscription.trial_ends_at)}
                                </Field>
                            )}
                            {subscription.suspended_at && (
                                <Field icon={Calendar} label="Suspended at">
                                    {fmt(subscription.suspended_at)}
                                </Field>
                            )}
                        </>
                    ) : (
                        <p className="text-muted-foreground py-6 text-center text-sm">
                            No subscription yet
                        </p>
                    )}
                </Section>
            </div>
        </div>
    );
}