/* The owner's subscription to the app: where it stands, how to pay, and past payments. Open even when locked. */
import { CreditCard, Lock, MessageCircle, Receipt } from 'lucide-react';
import { usePage } from '@inertiajs/react';
import ShopLayout from '../../layouts/ShopLayout';
import { Badge, Card, CardHeader, EmptyState, PageHeader, type Tone } from '../../components/ui';
import PaymentInstructions from '../../components/PaymentInstructions';
import type { BillingStatus, SharedProps } from '../../types';

type Props = {
    billing: { status: BillingStatus; label: string; fee: string; trialEnds: string | null; paidUntil: string | null; locksOn: string | null; suspensionReason: string | null };
    instructions: string;
    supportPhone: string;
    payments: { id: number; date: string; amount: string; months: number; method: string; until: string }[];
};

const TONE: Record<BillingStatus, Tone> = { free: 'green', trial: 'sky', active: 'green', overdue: 'amber', expired: 'rose', suspended: 'rose' };

export default function Billing({ billing, instructions, supportPhone, payments }: Props) {
    const { appName } = usePage<SharedProps>().props;
    const locked = billing.status === 'expired' || billing.status === 'suspended';
    const line = {
        free: `${appName} is free for your business. Nothing to pay.`,
        trial: `Your free trial runs until ${billing.trialEnds}. After that it is ${billing.fee} a month.`,
        active: `Paid up to ${billing.paidUntil}. ${billing.fee} a month.`,
        overdue: `Your payment is due. Pay ${billing.fee} before ${billing.locksOn} to keep selling.`,
        expired: `Your account is locked until the ${billing.fee} monthly payment is received. Your data is safe.`,
        suspended: `Your account is paused by ${appName}${billing.suspensionReason ? `: ${billing.suspensionReason}` : '.'} Contact us to sort it out. Your data is safe.`,
    }[billing.status];

    return (
        <ShopLayout title="Subscription" bare={locked}>
            <PageHeader title="Subscription" subtitle={`Your ${appName} account`} />
            <Card className={locked ? 'border-rose-200 bg-rose-50' : billing.status === 'overdue' ? 'border-amber-200 bg-amber-50' : ''}>
                <div className="flex items-start gap-3">
                    <span className="grid size-11 shrink-0 place-items-center rounded-xl bg-white ring-1 ring-line">{locked ? <Lock className="size-5 text-rose-600" /> : <CreditCard className="size-5 text-brand" />}</span>
                    <div>
                        <Badge tone={TONE[billing.status]}>{billing.label}</Badge>
                        <p className="mt-1.5 text-[15px] text-ink">{line}</p>
                    </div>
                </div>
            </Card>

            {billing.status !== 'free' && (
                <Card className="mt-4">
                    <CardHeader icon={CreditCard} title="How to pay" />
                    <PaymentInstructions text={instructions} className="mt-3" />
                    <a href={`https://wa.me/${supportPhone.replace('+', '')}`} target="_blank" rel="noopener" className="mt-4 inline-flex items-center gap-2 rounded-xl bg-emerald-600 px-4 py-3 text-sm font-bold text-white">
                        <MessageCircle className="size-4" aria-hidden />Send your confirmation on WhatsApp
                    </a>
                    <p className="mt-2 text-xs text-muted">We record your payment and your account updates straight away.</p>
                </Card>
            )}

            <Card className="mt-4">
                <CardHeader icon={Receipt} title="Payments" />
                {payments.length ? (
                    <ul className="mt-2 divide-y divide-line">
                        {payments.map((p) => (
                            <li key={p.id} className="flex items-center justify-between gap-3 py-2.5 text-sm">
                                <div><p className="font-bold text-ink">{p.amount}</p><p className="text-xs text-muted">{p.date} · {p.method} · {p.months} month{p.months === 1 ? '' : 's'}</p></div>
                                <span className="text-xs text-muted">to {p.until}</span>
                            </li>
                        ))}
                    </ul>
                ) : <EmptyState icon={Receipt}>No payments yet.</EmptyState>}
            </Card>
        </ShopLayout>
    );
}