import { Head, Link } from "@inertiajs/react";
import { useEffect, useState } from "react";
import { Eye, RefreshCw, Search, Users } 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 Customer = {
    id: number;
    name: string;
    email: string;
    email_verified_at: string | null;
    created_at: string;
    latest_subscription?: {
        status: string;
        starts_at: string | null;
        ends_at: string | null;
        plan?: { slug: string; name: string } | null;
    } | null;
    payments_count: number;
};

type Pagination<T> = {
    data: T[];
    current_page: number;
    last_page: number;
    total: number;
};

type ResponseData = Pagination<Customer> & {
    stats: { total: number; active: number; inactive: number };
};

function csrf() {
    return (
        document.querySelector<HTMLMetaElement>('meta[name="csrf-token"]')
            ?.content ?? ""
    );
}
function date(value?: string | null) {
    if (!value) return "—";
    return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(
        new Date(value),
    );
}

export default function Customers() {
    const { t } = useI18n();
    const [data, setData] = useState<ResponseData>({
        data: [],
        current_page: 1,
        last_page: 1,
        total: 0,
        stats: { total: 0, active: 0, inactive: 0 },
    });
    const [search, setSearch] = useState("");
    const [status, setStatus] = useState("all");
    const [loading, setLoading] = useState(false);
    const [message, setMessage] = useState("");

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

    useEffect(() => {
        void load();
    }, [status]);

    return (
        <>
            <Head title={t("Customers")} />
            <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("Customers")}</h1>
                            <p className="mt-1 text-sm text-muted-foreground">
                                {t("View customers, subscriptions, and payment history.")}</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 md:grid-cols-3">
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm font-medium text-muted-foreground">
                                    {t("Customers")}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold">
                                    {data.stats.total}
                                </div>
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm font-medium text-muted-foreground">
                                    {t("Active subscriptions")}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold">
                                    {data.stats.active}
                                </div>
                            </CardContent>
                        </Card>
                        <Card>
                            <CardHeader className="pb-3">
                                <CardTitle className="text-sm font-medium text-muted-foreground">
                                    {t("Inactive")}</CardTitle>
                            </CardHeader>
                            <CardContent>
                                <div className="text-2xl font-semibold">
                                    {data.stats.inactive}
                                </div>
                            </CardContent>
                        </Card>
                    </div>

                    <Card className="overflow-hidden border-border/70 shadow-sm">
                        <CardHeader className="border-b bg-muted/20">
                            <CardTitle className="flex items-center gap-2">
                                <Users className="size-5" /> {t("Customer list")}</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-[260px]">
                                    <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("Search name or email")}
                                    />
                                </div>
                                <Select
                                    value={status}
                                    onValueChange={setStatus}
                                >
                                    <SelectTrigger className="w-full sm:w-[170px]">
                                        <SelectValue placeholder="Status" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectItem value="all">
                                            {t("All customers")}</SelectItem>
                                        <SelectItem value="active">
                                            {t("Active")}</SelectItem>
                                        <SelectItem value="inactive">
                                            {t("Inactive")}</SelectItem>
                                    </SelectContent>
                                </Select>
                                <Button className="w-full sm:w-auto" onClick={() => void load()}>
                                    <Search /> {t("Search")}</Button>
                            </div>

                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>{t("Customer")}</TableHead>
                                        <TableHead>{t("Plan")}</TableHead>
                                        <TableHead>{t("Status")}</TableHead>
                                        <TableHead>{t("Verification")}</TableHead>
                                        <TableHead>{t("Payments")}</TableHead>
                                        <TableHead>{t("Joined")}</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 customers found.")}</TableCell>
                                        </TableRow>
                                    ) : (
                                        data.data.map((customer) => {
                                            const active =
                                                customer.latest_subscription
                                                    ?.status === "active" &&
                                                (!customer.latest_subscription
                                                    .ends_at ||
                                                    new Date(
                                                        customer
                                                            .latest_subscription
                                                            .ends_at,
                                                    ) > new Date());
                                            return (
                                                <TableRow key={customer.id}>
                                                    <TableCell>
                                                        <div className="font-medium">
                                                            {customer.name}
                                                        </div>
                                                        <div className="text-xs text-muted-foreground">
                                                            {customer.email}
                                                        </div>
                                                    </TableCell>
                                                    <TableCell>
                                                        {customer
                                                            .latest_subscription
                                                            ?.plan?.name ??
                                                            "No subscription"}
                                                    </TableCell>
                                                    <TableCell>
                                                        <Badge
                                                            variant={
                                                                active
                                                                    ? "default"
                                                                    : "outline"
                                                            }
                                                        >
                                                            {active
                                                                ? "Active"
                                                                : "Inactive"}
                                                        </Badge>
                                                    </TableCell>
                                                    <TableCell>
                                                        {
                                                            customer.payments_count
                                                        }
                                                    </TableCell>
                                                    <TableCell>
                                                        {date(
                                                            customer.created_at,
                                                        )}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        <Button
                                                            asChild
                                                            variant="outline"
                                                            size="sm"
                                                        >
                                                            <Link
                                                                href={`/admin/customers/${customer.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("customers")}</span>
                                <div className="flex gap-2">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={
                                            data.current_page <= 1 || loading
                                        }
                                        onClick={async () => {
                                            const page = data.current_page - 1;
                                            const p = new URLSearchParams({
                                                search,
                                                status,
                                                page: String(page),
                                            });
                                            const r = await fetch(
                                                `/admin/customers/data?${p}`,
                                            );
                                            setData(await r.json());
                                        }}
                                    >
                                        {t("Previous")}</Button>
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        disabled={
                                            data.current_page >=
                                                data.last_page || loading
                                        }
                                        onClick={async () => {
                                            const page = data.current_page + 1;
                                            const p = new URLSearchParams({
                                                search,
                                                status,
                                                page: String(page),
                                            });
                                            const r = await fetch(
                                                `/admin/customers/data?${p}`,
                                            );
                                            setData(await r.json());
                                        }}
                                    >
                                        {t("Next")}</Button>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </>
    );
}