import { Head, Link, usePage } from "@inertiajs/react";
import { useEffect, useState } from "react";
import {
    ArrowLeft,
    CreditCard,
    Mail,
    RefreshCw,
    Save,
    UserRound,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";

import { useI18n } from "@/lib/i18n";
import { AdminOperationalStrip } from "@/components/admin-operational-strip";
type Plan = {
    id: number;
    slug: string;
    name: string;
    price_monthly?: string | number;
    currency?: string;
    is_active?: boolean;
};
type Subscription = {
    id: number;
    status: string;
    starts_at: string | null;
    ends_at: string | null;
    provider: string | null;
    provider_subscription_id: string | null;
    plan?: Plan | null;
};
type Payment = {
    id: number;
    reference: string;
    status: string;
    amount: string | number;
    currency: string;
    created_at: string;
    gateway?: { name: string } | null;
    plan?: { name: string } | null;
};
type Data = {
    customer: {
        id: number;
        name: string;
        email: string;
        email_verified_at: string | null;
        created_at: string;
    };
    current_subscription: Subscription | null;
    subscriptions: Subscription[];
    payments: {
        data: Payment[];
        current_page: number;
        last_page: number;
        total: number;
    };
};

function csrf() {
    return (
        document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')
            ?.content ?? ""
    );
}
function date(value?: string | null) {
    return value
        ? new Intl.DateTimeFormat("en-US", {
              dateStyle: "medium",
              timeStyle: "short",
          }).format(new Date(value))
        : "—";
}
function money(amount: string | number, currency: string) {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: currency || "USD",
    }).format(Number(amount));
}

export default function CustomerDetail() {
    const { t } = useI18n();
    const { customerId } = usePage<{ customerId: number }>().props;
    const [data, setData] = useState<Data | null>(null);
    const [plans, setPlans] = useState<Plan[]>([]);
    const [selectedPlan, setSelectedPlan] = useState("");
    const [loading, setLoading] = useState(false);
    const [saving, setSaving] = useState(false);
    const [message, setMessage] = useState("");

    const load = async () => {
        setLoading(true);
        setMessage("");
        try {
            const response = await fetch(
                `/admin/customers/${customerId}/data`,
                { headers: { Accept: "application/json" } },
            );
            const payload = await response.json();
            if (!response.ok)
                throw new Error(payload.message ?? "Unable to load customer.");
            setData(payload);
            setSelectedPlan(payload.current_subscription?.plan?.slug ?? "free");
        } catch (error) {
            setMessage(
                error instanceof Error
                    ? error.message
                    : "Unable to load customer.",
            );
        } finally {
            setLoading(false);
        }
    };
    useEffect(() => {
        void load();
        void fetch("/admin/subscription-plans/active", {
            headers: { Accept: "application/json" },
        })
            .then((r) => r.json())
            .then(setPlans)
            .catch(() => undefined);
    }, [customerId]);

    const assign = async () => {
        setSaving(true);
        setMessage("");
        try {
            const response = await fetch(
                `/admin/users/${customerId}/subscription`,
                {
                    method: "POST",
                    headers: {
                        Accept: "application/json",
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": csrf(),
                    },
                    body: JSON.stringify({ plan: selectedPlan }),
                },
            );
            const payload = await response.json();
            if (!response.ok)
                throw new Error(
                    payload.message ?? "Unable to update subscription.",
                );
            setMessage("Subscription updated.");
            await load();
        } catch (error) {
            setMessage(
                error instanceof Error
                    ? error.message
                    : "Unable to update subscription.",
            );
        } finally {
            setSaving(false);
        }
    };

    if (!data)
        return (
            <>
                <Head title={t("Customer")} />
                <div className="p-3 sm:p-4 lg:p-6">
                    <div className="mx-auto max-w-6xl">
                        <Button asChild variant="outline">
                            <Link href="/admin/customers">
                                <ArrowLeft /> {t("Customers")}</Link>
                        </Button>
                        <div className="mt-6 text-sm text-muted-foreground">
                            {loading
                                ? "Loading customer..."
                                : message || "Customer not found."}
                        </div>
                    </div>
                </div>
            </>
        );
    const active =
        data.current_subscription?.status === "active" &&
        (!data.current_subscription.starts_at ||
            new Date(data.current_subscription.starts_at) <= new Date()) &&
        (!data.current_subscription.ends_at ||
            new Date(data.current_subscription.ends_at) > new Date());

    const subscriptionCount = data.subscriptions.length;
    const paymentCount = data.payments.total;
    const currentPlan = data.current_subscription?.plan?.name ?? "No subscription";
    const subscriptionTone = active
        ? "success"
        : data.current_subscription
          ? "warning"
          : "default";

    return (
        <>
            <Head title={data.customer.name} />
            <div className="p-3 sm:p-4 lg:p-6">
                <div className="mx-auto max-w-6xl space-y-6">
                    <div className="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <Button
                                asChild
                                variant="ghost"
                                className="mb-2 -ml-2"
                            >
                                <Link href="/admin/customers">
                                    <ArrowLeft /> {t("Back to customers")}</Link>
                            </Button>
                            <div className="flex flex-wrap items-center gap-2">
                                <h1 className="text-2xl font-semibold tracking-tight">
                                    {data.customer.name}
                                </h1>
                                <Badge variant={active ? "default" : "outline"}>
                                    {active ? "Active subscriber" : currentPlan}
                                </Badge>
                            </div>
                            <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground">
                                <span>{data.customer.email}</span>
                                <span aria-hidden="true">·</span>
                                <span>{t("Customer #")}{data.customer.id}</span>
                            </p>
                        </div>
                        <Button
                            variant="outline"
                            onClick={() => void load()}
                            disabled={loading}
                        >
                            <RefreshCw
                                className={loading ? "animate-spin" : ""}
                            />{" "}
                            {t("Refresh")}</Button>
                    </div>
                    <AdminOperationalStrip
                        metrics={[
                            {
                                label: t("Subscription"),
                                value: currentPlan,
                                detail: active ? "Currently active" : "Requires attention",
                                tone: subscriptionTone,
                            },
                            {
                                label: t("Payments"),
                                value: paymentCount,
                                detail: "Recorded transactions",
                            },
                            {
                                label: t("Subscriptions"),
                                value: subscriptionCount,
                                detail: "Lifecycle records",
                            },
                            {
                                label: t("Verification"),
                                value: data.customer.email_verified_at ? "Verified" : "Unverified",
                                detail: data.customer.email_verified_at
                                    ? date(data.customer.email_verified_at)
                                    : "Email verification pending",
                                tone: data.customer.email_verified_at ? "success" : "warning",
                            },
                        ]}
                    />
                    {message && (
                        <div className="rounded-lg border border-border/70 bg-muted/30 px-4 py-3 text-sm">
                            {message}
                        </div>
                    )}
                    <div className="grid gap-6 lg:grid-cols-3">
                        <Card className="lg:col-span-2">
                            <CardHeader>
                                <CardTitle className="flex items-center gap-2">
                                    <UserRound className="size-5" /> {t("Customer profile")}</CardTitle>
                            </CardHeader>
                            <CardContent className="grid gap-5 sm:grid-cols-2">
                                <div>
                                    <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                                        {t("Name")}</div>
                                    <div className="mt-1 font-medium">
                                        {data.customer.name}
                                    </div>
                                </div>
                                <div>
                                    <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                                        {t("Email")}</div>
                                    <div className="mt-1 flex items-center gap-2">
                                        <Mail className="size-4 text-muted-foreground" />
                                        {data.customer.email}
                                    </div>
                                </div>
                                <div>
                                    <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                                        {t("Verification")}</div>
                                    <div className="mt-1">
                                        <Badge
                                            variant={
                                                data.customer.email_verified_at
                                                    ? "default"
                                                    : "outline"
                                            }
                                        >
                                            {data.customer.email_verified_at
                                                ? "Verified"
                                                : "Unverified"}
                                        </Badge>
                                    </div>
                                </div>
                                <div>
                                    <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                                        {t("Joined")}</div>
                                    <div className="mt-1">
                                        {date(data.customer.created_at)}
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                        <Card className="border-border/70">
                            <CardHeader className="border-b bg-muted/20">
                                <CardTitle>{t("Current subscription")}</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="text-lg font-semibold">
                                    {data.current_subscription?.plan?.name ??
                                        "No subscription"}
                                </div>
                                <Badge variant={active ? "default" : "outline"}>
                                    {active
                                        ? "Active"
                                        : (data.current_subscription?.status ??
                                          "None")}
                                </Badge>
                                <div className="text-sm text-muted-foreground">
                                    {data.current_subscription
                                        ? `${date(data.current_subscription.starts_at)} → ${date(data.current_subscription.ends_at)}`
                                        : "No subscription has been assigned."}
                                </div>
                                <div className="space-y-2">
                                    <div className="text-sm font-medium">
                                        {t("Assign plan")}</div>
                                    <div className="flex gap-2">
                                        <Select
                                            value={selectedPlan}
                                            onValueChange={setSelectedPlan}
                                        >
                                            <SelectTrigger className="flex-1">
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                {plans
                                                    .filter(
                                                        (p) =>
                                                            p.is_active !==
                                                            false,
                                                    )
                                                    .map((plan) => (
                                                        <SelectItem
                                                            key={plan.id}
                                                            value={plan.slug}
                                                        >
                                                            {plan.name}
                                                        </SelectItem>
                                                    ))}
                                            </SelectContent>
                                        </Select>
                                        <Button
                                            onClick={() => void assign()}
                                            disabled={saving || !selectedPlan}
                                        >
                                            <Save />{" "}
                                            {saving ? "Saving" : "Save"}
                                        </Button>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    </div>
                    <Card className="overflow-hidden border-border/70">
                        <CardHeader className="border-b bg-muted/20">
                            <CardTitle className="flex items-center gap-2">
                                <CreditCard className="size-5" /> {t("Payment history")}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>{t("Reference")}</TableHead>
                                        <TableHead>{t("Plan")}</TableHead>
                                        <TableHead>{t("Gateway")}</TableHead>
                                        <TableHead>{t("Amount")}</TableHead>
                                        <TableHead>{t("Status")}</TableHead>
                                        <TableHead>{t("Created")}</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {data.payments.data.length === 0 ? (
                                        <TableRow>
                                            <TableCell
                                                colSpan={6}
                                                className="h-24 text-center text-muted-foreground"
                                            >
                                                {t("No payment history.")}</TableCell>
                                        </TableRow>
                                    ) : (
                                        data.payments.data.map((payment) => (
                                            <TableRow key={payment.id}>
                                                <TableCell>
                                                    <Button
                                                        asChild
                                                        variant="link"
                                                        className="h-auto p-0"
                                                    >
                                                        <Link
                                                            href={`/admin/payments/${payment.id}`}
                                                        >
                                                            {payment.reference}
                                                        </Link>
                                                    </Button>
                                                </TableCell>
                                                <TableCell>
                                                    {payment.plan?.name ?? "—"}
                                                </TableCell>
                                                <TableCell>
                                                    {payment.gateway?.name ??
                                                        "—"}
                                                </TableCell>
                                                <TableCell>
                                                    {money(
                                                        payment.amount,
                                                        payment.currency,
                                                    )}
                                                </TableCell>
                                                <TableCell>
                                                    <Badge
                                                        variant={
                                                            payment.status ===
                                                            "paid"
                                                                ? "default"
                                                                : payment.status ===
                                                                    "failed"
                                                                  ? "destructive"
                                                                  : "outline"
                                                        }
                                                    >
                                                        {payment.status}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell>
                                                    {date(payment.created_at)}
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                        </CardContent>
                    </Card>
                    <Card className="overflow-hidden border-border/70">
                        <CardHeader className="border-b bg-muted/20">
                            <CardTitle>{t("Subscription history")}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>{t("Plan")}</TableHead>
                                        <TableHead>{t("Status")}</TableHead>
                                        <TableHead>{t("Provider")}</TableHead>
                                        <TableHead>{t("Start")}</TableHead>
                                        <TableHead>{t("End")}</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {data.subscriptions.map((subscription) => (
                                        <TableRow key={subscription.id}>
                                            <TableCell>
                                                {subscription.plan?.name ?? "—"}
                                            </TableCell>
                                            <TableCell>
                                                <Badge
                                                    variant={
                                                        subscription.status ===
                                                        "active"
                                                            ? "default"
                                                            : "outline"
                                                    }
                                                >
                                                    {subscription.status}
                                                </Badge>
                                            </TableCell>
                                            <TableCell>
                                                {subscription.provider ?? "—"}
                                            </TableCell>
                                            <TableCell>
                                                {date(subscription.starts_at)}
                                            </TableCell>
                                            <TableCell>
                                                {date(subscription.ends_at)}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}