import { createFileRoute, Link } from "@tanstack/react-router";
import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
import { CheckCircle2, Circle, Download, FileText, Wallet } from "lucide-react";

import { supabase } from "@/integrations/supabase/client";
import { PortalShell } from "@/components/portal/PortalShell";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { ORDER_STEPS, STATUS_LABEL, kes, stepIndex, type OrderStatus, type PaymentStatus } from "@/lib/portal";

export const Route = createFileRoute("/_authenticated/orders")({
  head: () => ({
    meta: [
      { title: "My Orders — Flexflares Cyber Services" },
      { name: "description", content: "Track every service order, its progress, payment status and delivered documents." },
      { property: "og:title", content: "My Orders — Flexflares Cyber Services" },
      { property: "og:description", content: "Track your Flexflares service orders end to end." },
    ],
  }),
  component: OrdersPage,
});

type Order = {
  id: string;
  order_no: string;
  service_name: string;
  service_slug: string;
  status: OrderStatus;
  payment_status: PaymentStatus;
  price: number | null;
  discount: number;
  notes: string | null;
  admin_notes: string | null;
  delivery_notes: string | null;
  created_at: string;
};

type Doc = { id: string; order_id: string; name: string; path: string; kind: string; mime_type: string | null };

function OrdersPage() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [docs, setDocs] = useState<Doc[]>([]);
  const [balance, setBalance] = useState(0);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState<string | null>(null);
  const [tab, setTab] = useState<"active" | "completed">("active");

  const load = useCallback(async () => {
    const { data: u } = await supabase.auth.getUser();
    if (!u.user) return;
    const [o, d, w] = await Promise.all([
      supabase
        .from("orders")
        .select("id, order_no, service_name, service_slug, status, payment_status, price, discount, notes, admin_notes, delivery_notes, created_at")
        .eq("user_id", u.user.id)
        .order("created_at", { ascending: false }),
      supabase.from("order_documents").select("id, order_id, name, path, kind, mime_type"),
      supabase.from("wallets").select("balance").eq("user_id", u.user.id).maybeSingle(),
    ]);
    setOrders((o.data ?? []) as Order[]);
    setDocs((d.data ?? []) as Doc[]);
    setBalance(Number(w.data?.balance ?? 0));
    setLoading(false);
  }, []);

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

  const pay = async (order: Order) => {
    setBusy(order.id);
    const { error } = await supabase.rpc("pay_order_from_wallet", { _order_id: order.id });
    setBusy(null);
    if (error) return toast.error(error.message);
    toast.success(`Payment received for ${order.order_no}`);
    load();
  };

  const visible = orders.filter((o) => (tab === "completed" ? o.status === "completed" : o.status !== "completed"));

  return (
    <PortalShell
      title="My orders"
      description="Every service you have ordered, with live progress and delivered files."
      actions={
        <div className="flex items-center gap-2 rounded-full border bg-card px-3 py-1 text-sm">
          <Wallet className="h-4 w-4 text-primary" /> {kes(balance)}
          <Button asChild size="sm" variant="ghost" className="h-6 px-2 text-xs">
            <Link to="/deposits">Top up</Link>
          </Button>
        </div>
      }
    >
      <div className="inline-flex rounded-lg border p-1 text-sm">
        {(["active", "completed"] as const).map((t) => (
          <button
            key={t}
            onClick={() => setTab(t)}
            className={`rounded-md px-3 py-1 capitalize ${tab === t ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}
          >
            {t}
          </button>
        ))}
      </div>

      {loading ? (
        <div className="mt-4 space-y-3">
          {[0, 1, 2].map((i) => (
            <Skeleton key={i} className="h-40 w-full rounded-xl" />
          ))}
        </div>
      ) : visible.length === 0 ? (
        <Card className="glass mt-4">
          <CardContent className="p-10 text-center">
            <p className="text-sm text-muted-foreground">No {tab} orders yet.</p>
            <Button asChild className="mt-4">
              <Link to="/services">Browse services</Link>
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="mt-4 grid gap-3">
          {visible.map((o) => {
            const current = stepIndex(o.status);
            const orderDocs = docs.filter((d) => d.order_id === o.id);
            const total = Math.max(Number(o.price ?? 0) - Number(o.discount ?? 0), 0);
            return (
              <Card key={o.id} className="glass">
                <CardHeader className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-3 space-y-0">
                  <div className="min-w-0">
                    <div className="truncate font-semibold">{o.service_name}</div>
                    <div className="text-xs text-muted-foreground">
                      {o.order_no} · {new Date(o.created_at).toLocaleString()}
                    </div>
                  </div>
                  <div className="flex shrink-0 flex-col items-end gap-1">
                    <Badge variant={o.status === "completed" ? "default" : o.status === "cancelled" ? "destructive" : "secondary"}>
                      {STATUS_LABEL[o.status]}
                    </Badge>
                    <Badge variant="outline" className="capitalize">
                      {o.payment_status}
                    </Badge>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4 text-sm">
                  {o.status !== "cancelled" && (
                    <ol className="flex items-center gap-1">
                      {ORDER_STEPS.map((s, i) => (
                        <li key={s.key} className="flex min-w-0 flex-1 flex-col items-center gap-1 text-center">
                          {i <= current ? (
                            <CheckCircle2 className="h-5 w-5 text-primary" />
                          ) : (
                            <Circle className="h-5 w-5 text-muted-foreground/50" />
                          )}
                          <span className={`truncate text-[11px] ${i <= current ? "font-medium text-foreground" : "text-muted-foreground"}`}>
                            {s.label}
                          </span>
                        </li>
                      ))}
                    </ol>
                  )}

                  {o.admin_notes && (
                    <p className="rounded-lg border bg-background/50 p-3">
                      <span className="font-medium">Update from our team: </span>
                      {o.admin_notes}
                    </p>
                  )}

                  <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-background/50 p-3">
                    <div>
                      <div className="text-xs text-muted-foreground">Amount due</div>
                      <div className="text-lg font-semibold">{o.price == null ? "Awaiting quote…" : kes(total)}</div>
                    </div>
                    {o.price != null && o.payment_status !== "paid" &&
                      (balance >= total ? (
                        <Button size="sm" onClick={() => pay(o)} disabled={busy === o.id}>
                          {busy === o.id ? "Paying…" : "Pay from balance"}
                        </Button>
                      ) : (
                        <Button asChild size="sm" variant="outline">
                          <Link to="/deposits">Top up to pay</Link>
                        </Button>
                      ))}
                  </div>

                  {o.delivery_notes && (
                    <div className="rounded-lg border border-primary/30 bg-primary/5 p-3">
                      <div className="font-semibold text-primary">Delivery note</div>
                      <p className="mt-1 whitespace-pre-line">{o.delivery_notes}</p>
                    </div>
                  )}

                  {orderDocs.length > 0 && <DocumentList items={orderDocs} />}
                </CardContent>
              </Card>
            );
          })}
        </div>
      )}
    </PortalShell>
  );
}

function DocumentList({ items }: { items: Doc[] }) {
  const download = async (doc: Doc) => {
    const { data, error } = await supabase.storage.from("request-attachments").createSignedUrl(doc.path, 1800);
    if (error || !data) return toast.error("Could not open this file");
    window.open(data.signedUrl, "_blank", "noopener,noreferrer");
  };
  return (
    <div className="grid gap-2 sm:grid-cols-2">
      {items.map((d) => (
        <button
          key={d.id}
          type="button"
          onClick={() => download(d)}
          className="flex items-center gap-2 rounded-lg border bg-background p-2 text-left text-xs hover:border-primary"
        >
          <FileText className="h-4 w-4 shrink-0 text-primary" />
          <span className="min-w-0 flex-1 truncate">{d.name}</span>
          <Badge variant="outline" className="shrink-0 text-[10px]">
            {d.kind === "delivery" ? "Delivered" : "Uploaded"}
          </Badge>
          <Download className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
        </button>
      ))}
    </div>
  );
}