"use client";

import { Download, ExternalLink } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import * as React from "react";
import { toast } from "sonner";

import type { CommissionStatus } from "@/schemas/commissions/tableSchema";

import { deleteCommissionRequest } from "@/actions/commissions/requests/deleteCommissionRequest";
import { updateCommissionRequest } from "@/actions/commissions/requests/updateCommissionRequest";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";

type RequestFile = {
  id: string;
  createdAt: Date;
  originalFile: string;
  fileType: string;
  fileSize: number;
};

type RequestShape = {
  id: string;
  createdAt: Date;
  updatedAt: Date;
  status: CommissionStatus;

  customerName: string;
  customerEmail: string;
  customerSocials: string | null;
  message: string;

  type: { id: string; name: string } | null;
  option: { id: string; name: string } | null;
  extras: { id: string; name: string }[];

  priceEstimate?: { min: number; max: number };

  files: RequestFile[];
};

const STATUS_OPTIONS: CommissionStatus[] = [
  "NEW",
  "REVIEWING",
  "ACCEPTED",
  "REJECTED",
  "COMPLETED",
  "SPAM",
];

function isImage(mime: string) {
  return !!mime && mime.startsWith("image/");
}

function formatBytes(bytes: number) {
  if (!Number.isFinite(bytes)) return "—";
  if (bytes < 1024) return `${bytes} B`;
  const kb = bytes / 1024;
  if (kb < 1024) return `${kb.toFixed(1)} KB`;
  const mb = kb / 1024;
  return `${mb.toFixed(1)} MB`;
}

function displayUrl(fileId: string) {
  return `/api/requests/image?mode=display&fileId=${encodeURIComponent(fileId)}`;
}

function downloadUrl(fileId: string) {
  return `/api/requests/image?mode=download&fileId=${encodeURIComponent(fileId)}`;
}

function bulkUrl(requestId: string) {
  return `/api/requests/image?mode=bulk&requestId=${encodeURIComponent(requestId)}`;
}

export function CommissionRequestEditor({ request }: { request: RequestShape }) {
  const router = useRouter();

  const [status, setStatus] = React.useState<CommissionStatus>(request.status);
  const [customerName, setCustomerName] = React.useState(request.customerName);
  const [customerEmail, setCustomerEmail] = React.useState(request.customerEmail);
  const [customerSocials, setCustomerSocials] = React.useState(request.customerSocials ?? "");
  const [message, setMessage] = React.useState(request.message);

  const [isSaving, startSaving] = React.useTransition();
  const [deleteOpen, setDeleteOpen] = React.useState(false);

  const dirty =
    status !== request.status ||
    customerName !== request.customerName ||
    customerEmail !== request.customerEmail ||
    (customerSocials || "") !== (request.customerSocials || "") ||
    message !== request.message;

  return (
    <div className="space-y-6">
      {/* Top bar */}
      <div className="flex flex-col gap-3 rounded-2xl border bg-card p-4 shadow-sm md:flex-row md:items-center md:justify-between">
        <div className="flex flex-wrap items-center gap-2">
          <Badge variant="secondary" className="px-2 py-0.5">
            {request.files.length} file{request.files.length === 1 ? "" : "s"}
          </Badge>
          <Badge variant="secondary" className="px-2 py-0.5">
            Status: {request.status}
          </Badge>
          <span className="text-sm text-muted-foreground">
            Updated: {new Date(request.updatedAt).toLocaleString()}
          </span>
        </div>

        <div className="flex flex-wrap gap-2">
          {request.files.length > 1 ? (
            <Button asChild variant="outline" className="h-9">
              <a href={bulkUrl(request.id)}>
                <Download className="mr-2 h-4 w-4" />
                Download all (ZIP)
              </a>
            </Button>
          ) : null}

          <Button
            type="button"
            variant="outline"
            disabled={!dirty || isSaving}
            onClick={() => router.refresh()}
          >
            Discard
          </Button>

          <Button
            type="button"
            disabled={isSaving}
            onClick={() => {
              startSaving(async () => {
                try {
                  await updateCommissionRequest({
                    id: request.id,
                    status,
                    customerName,
                    customerEmail,
                    customerSocials: customerSocials?.trim() ? customerSocials.trim() : null,
                    message,
                  });
                  toast.success("Saved");
                  router.refresh();
                } catch (err) {
                  const msg = err instanceof Error ? err.message : "Save failed";
                  toast.error("Save failed", { description: msg });
                }
              });
            }}
          >
            {isSaving ? "Saving…" : "Save changes"}
          </Button>

          <Button
            type="button"
            variant="destructive"
            disabled={isSaving}
            onClick={() => setDeleteOpen(true)}
          >
            Delete
          </Button>
        </div>
      </div>

      {/* Request details (artist-facing) */}
      <div className="grid gap-6 lg:grid-cols-3">
        <div className="space-y-4 rounded-2xl border bg-card p-4 shadow-sm lg:col-span-1">
          <div className="space-y-2">
            <div className="text-sm font-semibold">Status</div>
            <Select value={status} onValueChange={(v) => setStatus(v as CommissionStatus)}>
              <SelectTrigger className="h-9">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {STATUS_OPTIONS.map((s) => (
                  <SelectItem key={s} value={s}>
                    {s}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>

            <div className="pt-2 text-xs text-muted-foreground">
              Submitted: {new Date(request.createdAt).toLocaleString()}
            </div>
          </div>

          <div className="space-y-2">
            <div className="text-sm font-semibold">Selection</div>

            <div className="text-sm">
              <div className="text-muted-foreground text-xs">Type</div>
              <div className="font-medium">{request.type?.name ?? "—"}</div>
            </div>

            <div className="text-sm">
              <div className="text-muted-foreground text-xs">Base option</div>
              <div className="font-medium">{request.option?.name ?? "—"}</div>
            </div>

            <div className="text-sm">
              <div className="text-muted-foreground text-xs">Extras</div>
              {request.extras?.length ? (
                <div className="mt-1 flex flex-wrap gap-1">
                  {request.extras.map((e) => (
                    <span
                      key={e.id}
                      className="inline-flex items-center rounded-md border bg-muted/40 px-2 py-0.5 text-xs text-foreground/80"
                    >
                      {e.name}
                    </span>
                  ))}
                </div>
              ) : (
                <div className="text-sm font-medium">—</div>
              )}
            </div>

            <div className="text-sm">
              <div className="text-muted-foreground text-xs">Estimated price</div>
              <div className="font-medium tabular-nums">
                {request.priceEstimate
                  ? request.priceEstimate.min === request.priceEstimate.max
                    ? `€${request.priceEstimate.min.toFixed(2)}`
                    : `€${request.priceEstimate.min.toFixed(2)} – €${request.priceEstimate.max.toFixed(2)}`
                  : "—"}
              </div>
            </div>
          </div>

          <div className="space-y-2">
            <div className="text-sm font-semibold">Customer</div>
            <Input value={customerName} onChange={(e) => setCustomerName(e.target.value)} />
            <Input value={customerEmail} onChange={(e) => setCustomerEmail(e.target.value)} />
            <Input
              placeholder="Socials (optional)"
              value={customerSocials}
              onChange={(e) => setCustomerSocials(e.target.value)}
            />
          </div>
        </div>

        <div className="space-y-6 lg:col-span-2">
          {/* Images / files */}
          <div className="space-y-3 rounded-2xl border bg-card p-4 shadow-sm">
            <div className="flex items-center justify-between gap-3">
              <div className="text-sm font-semibold">Reference Images</div>
              {request.files.length > 1 ? (
                <Button asChild variant="outline" className="h-9">
                  <a href={bulkUrl(request.id)}>
                    <Download className="mr-2 h-4 w-4" />
                    Download all (ZIP)
                  </a>
                </Button>
              ) : null}
            </div>

            {request.files.length === 0 ? (
              <div className="text-sm text-muted-foreground">No files uploaded.</div>
            ) : (
              <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                {request.files.map((f) => {
                  const preview = displayUrl(f.id);
                  const dl = downloadUrl(f.id);

                  return (
                    <div key={f.id} className="overflow-hidden rounded-xl border bg-muted/10">
                      <div className="relative aspect-square bg-muted">
                        {isImage(f.fileType) ? (
                          <Image
                            src={preview}
                            alt={f.originalFile}
                            fill
                            sizes="(max-width: 1280px) 50vw, 33vw"
                            className="object-cover"
                            unoptimized
                          />
                        ) : (
                          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
                            No preview
                          </div>
                        )}
                      </div>

                      <div className="space-y-2 p-3">
                        <div className="min-w-0">
                          <div className="truncate text-sm font-medium" title={f.originalFile}>
                            {f.originalFile}
                          </div>
                          <div className="text-xs text-muted-foreground">
                            {f.fileType} · {formatBytes(f.fileSize)}
                          </div>
                        </div>

                        <div className="flex flex-wrap gap-2">
                          {isImage(f.fileType) ? (
                            <Button asChild variant="outline" size="sm" className="h-8">
                              <a href={preview} target="_blank" rel="noreferrer">
                                <ExternalLink className="mr-2 h-4 w-4" />
                                Open
                              </a>
                            </Button>
                          ) : null}

                          <Button asChild variant="outline" size="sm" className="h-8">
                            <a href={dl}>
                              <Download className="mr-2 h-4 w-4" />
                              Download
                            </a>
                          </Button>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {/* Message */}
          <div className="space-y-2 rounded-2xl border bg-card p-4 shadow-sm">
            <div className="text-sm font-semibold">Message</div>
            <Textarea
              rows={10}
              value={message}
              onChange={(e) => setMessage(e.target.value)}
              className="leading-relaxed"
            />
          </div>
        </div>
      </div>

      {/* Delete confirmation */}
      <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete request?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete this commission request and its file records.
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isSaving}>Cancel</AlertDialogCancel>
            <AlertDialogAction
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
              disabled={isSaving}
              onClick={() => {
                startSaving(async () => {
                  try {
                    await deleteCommissionRequest(request.id);
                    toast.success("Deleted");
                    router.push("/commissions"); // adjust to your table route
                    router.refresh();
                  } catch (err) {
                    const msg = err instanceof Error ? err.message : "Delete failed";
                    toast.error("Delete failed", { description: msg });
                  } finally {
                    setDeleteOpen(false);
                  }
                });
              }}
            >
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}