import { Head, Link } from "@inertiajs/react";
import { useEffect, useState } from "react";
import {
    CheckCircle2,
    Clock3,
    Eye,
    RefreshCw,
    Search,
    XCircle,
} 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 { Input } from "@/components/ui/input";
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";
type Payment = {
    id: number;
    reference: string;
    provider_payment_id: string | null;
    status: string;
    amount: string | number;
    currency: string;
    paid_at: string | null;
    expires_at: string | null;
    created_at: string;
    user?: { id: number; name: string; email: string } | null;
    plan?: { slug: string; name: string } | null;
    gateway?: { id: number; slug: string; name: string } | null;
};

type Gateway = { id: number; slug: string; name: string };
type ResponseData = {
    data: Payment[];
    current_page: number;
    last_page: number;
    total: number;
    stats: {
        total: number;
        paid: number;
        pending: number;
        failed: number;
        expired: number;
        refunded: number;
    };
};

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));
}
function statusVariant(status: string): "default" | "destructive" | "outline" {
    return status === "paid"
        ? "default"
        : status === "failed"
          ? "destructive"
          : "outline";
}

export default function Payments() {
    const { t } = useI18n();
    const [data, setData] = useState<ResponseData>({
        data: [],
        current_page: 1,
        last_page: 1,
        total: 0,
        stats: {
            total: 0,
            paid: 0,
            pending: 0,
            failed: 0,
            expired: 0,
            refunded: 0,
        },
    });
    const [gateways, setGateways] = useState<Gateway[]>([]);
    const [search, setSearch] = useState("");
    const [status, setStatus] = useState("all");
    const [gateway, setGateway] = useState("all");
    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState("");

    const load = async (page = 1) => {
        setLoading(true);
        setMessage("");
        try {
            const params = new URLSearchParams({
                search,
                status,
                gateway,
                page: String(page),
            });
            const response = await fetch(
                `/admin/payments/data?${params.toString()}`,
                { headers: { Accept: "application/json" } },
            );
            const payload = await response.json();
            if (!response.ok)
                throw new Error(payload.message ?? "Unable to load payments.");
            setData(payload);
        } catch (error) {
            setMessage(
                error instanceof Error
                    ? error.message
                    : "Unable to load payments.",
            );
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        void fetch("/admin/payments/gateways", {
            headers: { Accept: "application/json" },
        })
            .then((r) => r.json())
            .then(setGateways)
            .catch(() => undefined);
    }, []);
    useEffect(() => {
        void load();
    }, [status, gateway]);

    return (
        <>
            <Head title={t("Payments")} />
            <div className="p-3 sm:p-4 lg:p-6">
                <div className="mx-auto w-full max-w-7xl space-y-6">
                    <div className="flex flex-col gap-4 border-b border-border/60 pb-5 sm:flex-row sm:items-end sm:justify-between">
                        <div>
                            <h1 className="text-2xl font-semibold tracking-tight">
                                {t("Payments")}</h1>
                            <p className="mt-1 text-sm text-muted-foreground">
                                {t("Monitor customer payment transactions and gateway statuses.")}</p>
                        </div>
                        <Button
                            variant="outline"
                            onClick={() => void load()}
                            disabled={loading}
                        >
                            <RefreshCw
                                className={loading ? "animate-spin" : ""}
                            />{" "}
                            {t("Refresh")}</Button>
                    </div>
                    {message && (
                        <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
                            {message}
                        </div>
                    )}

                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm text-muted-foreground">
                                    {t("Total")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.total}
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <CheckCircle2 className="size-4" /> {t("Paid")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.paid}
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <Clock3 className="size-4" /> {t("Pending")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.pending}
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="flex items-center gap-2 text-sm text-muted-foreground">
                                    <XCircle className="size-4" /> {t("Failed")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.failed}
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm text-muted-foreground">
                                    {t("Expired")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.expired}
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm text-muted-foreground">
                                    {t("Refunded")}</CardTitle>
                            </CardHeader>
                            <CardContent className="text-2xl font-semibold">
                                {data.stats.refunded}
                            </CardContent>
                        </Card>
                    </div>

                    <Card>
                        <CardHeader>
                            <CardTitle>{t("Payment transactions")}</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap">
                                <div className="relative w-full min-w-0 flex-1 sm:min-w-[280px]">
                                    <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                                    <Input
                                        className="pl-9"
                                        value={search}
                                        onChange={(e) =>
                                            setSearch(e.target.value)
                                        }
                                        onKeyDown={(e) =>
                                            e.key === "Enter" && void load()
                                        }
                                        placeholder={t("Reference, provider ID, name or email")}
                                    />
                                </div>
                                <Select
                                    value={status}
                                    onValueChange={setStatus}
                                >
                                    <SelectTrigger className="w-full sm:w-[150px]">
                                        <SelectValue placeholder="Status" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">
                                            {t("All statuses")}</SelectItem>
                                        <SelectItem value="pending">
                                            {t("Pending")}</SelectItem>
                                        <SelectItem value="paid">
                                            {t("Paid")}</SelectItem>
                                        <SelectItem value="failed">
                                            {t("Failed")}</SelectItem>
                                        <SelectItem value="expired">
                                            {t("Expired")}</SelectItem>
                                        <SelectItem value="refunded">
                                            {t("Refunded")}</SelectItem>
                                    </SelectContent>
                                </Select>
                                <Select
                                    value={gateway}
                                    onValueChange={setGateway}
                                >
                                    <SelectTrigger className="w-full sm:w-[180px]">
                                        <SelectValue placeholder="Gateway" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">
                                            {t("All gateways")}</SelectItem>
                                        {gateways.map((item) => (
                                            <SelectItem
                                                key={item.id}
                                                value={item.slug}
                                            >
                                                {item.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Button className="w-full sm:w-auto" onClick={() => void load()}>
                                    <Search /> {t("Search")}</Button>
                            </div>
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>{t("Payment")}</TableHead>
                                        <TableHead>{t("Customer")}</TableHead>
                                        <TableHead>{t("Gateway")}</TableHead>
                                        <TableHead>{t("Amount")}</TableHead>
                                        <TableHead>{t("Status")}</TableHead>
                                        <TableHead>{t("Created")}</TableHead>
                                        <TableHead className="text-right">
                                            {t("Action")}</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {data.data.length === 0 ? (
                                        <TableRow>
                                            <TableCell
                                                colSpan={7}
                                                className="h-28 text-center text-muted-foreground"
                                            >
                                                {t("No payments found.")}</TableCell>
                                        </TableRow>
                                    ) : (
                                        data.data.map((payment) => (
                                            <TableRow key={payment.id}>
                                                <TableCell>
                                                    <div className="font-medium">
                                                        {payment.reference}
                                                    </div>
                                                    <div className="text-xs text-muted-foreground">
                                                        {payment.plan?.name ??
                                                            "—"}
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    <div className="font-medium">
                                                        {payment.user?.name ??
                                                            "Unknown"}
                                                    </div>
                                                    <div className="text-xs text-muted-foreground">
                                                        {payment.user?.email ??
                                                            "—"}
                                                    </div>
                                                </TableCell>
                                                <TableCell>
                                                    {payment.gateway?.name ??
                                                        "—"}
                                                </TableCell>
                                                <TableCell className="font-medium">
                                                    {money(
                                                        payment.amount,
                                                        payment.currency,
                                                    )}
                                                </TableCell>
                                                <TableCell>
                                                    <Badge
                                                        variant={statusVariant(
                                                            payment.status,
                                                        )}
                                                    >
                                                        {payment.status}
                                                    </Badge>
                                                </TableCell>
                                                <TableCell>
                                                    {date(payment.created_at)}
                                                </TableCell>
                                                <TableCell className="text-right">
                                                    <Button
                                                        asChild
                                                        variant="outline"
                                                        size="sm"
                                                    >
                                                        <Link
                                                            href={`/admin/payments/${payment.id}`}
                                                        >
                                                            <Eye /> {t("View")}</Link>
                                                    </Button>
                                                </TableCell>
                                            </TableRow>
                                        ))
                                    )}
                                </TableBody>
                            </Table>
                            <div className="flex items-center justify-between text-sm text-muted-foreground">
                                <span>
                                    {t("Page")}{data.current_page} {t("of")}{data.last_page}{" "}
                                    · {data.total} {t("payments")}</span>
                                <div className="flex gap-2">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={
                                            data.current_page <= 1 || loading
                                        }
                                        onClick={() =>
                                            void load(data.current_page - 1)
                                        }
                                    >
                                        {t("Previous")}</Button>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={
                                            data.current_page >=
                                                data.last_page || loading
                                        }
                                        onClick={() =>
                                            void load(data.current_page + 1)
                                        }
                                    >
                                        {t("Next")}</Button>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}