"use client";

import { useState } from "react";
import { Maximize2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Skeleton } from "@/components/ui/skeleton";
import { EmptyState, ErrorState } from "../components/ui/page-states";
import { FileExplorer } from "./file-explorer";
import { recordNode } from "./file-nodes";
import { useRecordNode } from "./useFiles";

/**
 * Files section of a record page: the explorer locked to the record, listing its own files and the files of
 * everything filed under it (a PO shows its shipments' and inspections' files too).
 *   <RecordFiles record={{ type: "shipment", code: "SHP-0003" }} includeParent={{ type: "purchase_order", code: "PO-0012", label: "Include PO files" }} />
 * `includeParent` adds a switch that widens the view to the parent record (shipment → its PO).
 * Legacy `ownerType` + `ownerId` still work; they are converted to the record's node by the server.
 */
export function RecordFiles({ record, ownerType, ownerId, label, includeParent = null, onChanged }) {
  const { node, isResolving, error } = useRecordNode({ record, ownerType, ownerId });
  const [withParent, setWithParent] = useState(false);
  const [fullScreen, setFullScreen] = useState(false);
  const [refreshSignal, setRefreshSignal] = useState(0);
  const parentNode = includeParent?.code ? recordNode(includeParent.type, includeParent.code) : "";
  const root = withParent && parentNode ? parentNode : node;

  if (isResolving) return <Skeleton className="h-[620px] rounded-xl" />;
  if (error) return <ErrorState error={error} title="Files could not be loaded" compact />;
  if (!node) return <EmptyState compact title="Save the record first" detail="Files are filed against a saved record." />;

  const headerActions = <>
    {parentNode && <div className="flex items-center gap-2">
      <Switch id={`include-parent-${node}`} checked={withParent} onCheckedChange={setWithParent} />
      <Label htmlFor={`include-parent-${node}`} className="text-sm font-normal">{includeParent.label || "Include parent files"}</Label>
    </div>}
    <Button variant="outline" size="sm" onClick={() => setFullScreen(true)}><Maximize2 /> Open full screen</Button>
  </>;

  return <section className="min-w-0" aria-label={`Files for ${label || record?.code || "this record"}`}>
    <FileExplorer
      key={root}
      variant="inline"
      rootNode={root}
      initialNode={root}
      lockRoot
      defaultRecursive
      title={label ? `Files` : undefined}
      headerActions={headerActions}
      onChanged={onChanged}
      refreshSignal={refreshSignal}
    />
    {fullScreen && <FileExplorer
      variant="modal"
      rootNode="root"
      initialNode={root}
      defaultRecursive
      onChanged={onChanged}
      onClose={() => { setFullScreen(false); setRefreshSignal((value) => value + 1); }}
    />}
  </section>;
}