"use client";

import { useCallback, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { usePublicSession } from "@/components/shop/public-session-context";
import { useAuthModal } from "@/components/shop/auth-modal-context";
import DataService from "@/config/axios";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type DeliveredOrder = {
  _id: string;
  orderNumber: string;
  status: string;
};

type ReturnRow = {
  _id: string;
  reason: string;
  status: string;
  adminNote?: string;
  createdAt?: string;
  order?: { orderNumber?: string; grandTotal?: number } | null;
};

export default function AccountReturnsPage() {
  const search = useSearchParams();
  const presetOrderId = search.get("orderId") || "";
  const { isAuthenticated, loading } = usePublicSession();
  const { openAuthModal } = useAuthModal();
  const [returns, setReturns] = useState<ReturnRow[]>([]);
  const [delivered, setDelivered] = useState<DeliveredOrder[]>([]);
  const [orderId, setOrderId] = useState(presetOrderId);
  const [reason, setReason] = useState("");
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    if (!isAuthenticated) return;
    setBusy(true);
    try {
      const [retRes, ordRes] = await Promise.all([
        DataService.get("/user/shop/returns"),
        DataService.get("/user/shop/orders"),
      ]);
      setReturns(retRes.data?.data || []);
      const orders = (ordRes.data?.data || []) as DeliveredOrder[];
      setDelivered(orders.filter((o) => o.status === "delivered"));
    } catch {
      setReturns([]);
      setDelivered([]);
    } finally {
      setBusy(false);
    }
  }, [isAuthenticated]);

  useEffect(() => {
    if (!loading && isAuthenticated) load();
  }, [loading, isAuthenticated, load]);

  useEffect(() => {
    if (presetOrderId) setOrderId(presetOrderId);
  }, [presetOrderId]);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!orderId || !reason.trim()) {
      toast.error("Select an order and enter a reason");
      return;
    }
    try {
      await DataService.post("/user/shop/returns", { orderId, reason: reason.trim() });
      toast.success("Return request submitted");
      setReason("");
      load();
    } catch (err: unknown) {
      toast.error(getApiErrorMessage(err, "Could not submit request"));
    }
  };

  if (loading) return <p className="text-gray-500">Loading…</p>;

  if (!isAuthenticated) {
    return (
      <div>
        <h1 className="text-2xl font-bold text-slate-900">Returns & refunds</h1>
        <p className="mt-4 text-gray-600">Sign in to manage returns.</p>
        <Button className="mt-4" type="button" onClick={() => openAuthModal("login")}>
          Log in
        </Button>
      </div>
    );
  }

  return (
    <div>
      <h1 className="text-2xl font-bold text-slate-900">Returns & refunds</h1>
      <p className="mt-1 text-gray-600">Request a return for a delivered order.</p>

      <form onSubmit={submit} className="mt-6 max-w-lg space-y-4 rounded-lg border bg-white p-4">
        <div className="grid gap-2">
          <Label>Order</Label>
          <Select value={orderId || undefined} onValueChange={setOrderId}>
            <SelectTrigger>
              <SelectValue placeholder="Select delivered order" />
            </SelectTrigger>
            <SelectContent>
              {delivered.map((o) => (
                <SelectItem key={o._id} value={o._id}>
                  {o.orderNumber}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {delivered.length === 0 ? (
            <p className="text-xs text-gray-500">No delivered orders available for return.</p>
          ) : null}
        </div>
        <div className="grid gap-2">
          <Label htmlFor="reason">Reason</Label>
          <Textarea
            id="reason"
            rows={4}
            value={reason}
            onChange={(e) => setReason(e.target.value)}
            required
          />
        </div>
        <Button type="submit" disabled={!delivered.length}>
          Submit request
        </Button>
      </form>

      <h2 className="mt-10 text-lg font-semibold text-slate-900">Your requests</h2>
      {busy ? (
        <p className="mt-3 text-gray-500">Loading…</p>
      ) : returns.length === 0 ? (
        <p className="mt-3 text-gray-600">No return requests yet.</p>
      ) : (
        <ul className="mt-4 space-y-3">
          {returns.map((r) => (
            <li key={r._id} className="rounded-lg border bg-white p-4 text-sm">
              <div className="flex flex-wrap justify-between gap-2">
                <p className="font-semibold text-slate-900">
                  {r.order?.orderNumber || "Order"}
                </p>
                <p className="capitalize text-gray-600">{r.status}</p>
              </div>
              <p className="mt-2 text-gray-700">{r.reason}</p>
              {r.adminNote ? <p className="mt-1 text-xs text-gray-500">Note: {r.adminNote}</p> : null}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}