"use client"

/**
 * Responsive Sheet
 *
 * Dialog on desktop, Drawer (pull-down) on mobile.
 * Automatically switches based on screen width using useIsMobile hook.
 */

import * as React from 'react';

import { useIsMobile } from '../../../hooks';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '../../overlay/dialog';

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from '../../overlay/drawer';

// ─────────────────────────────────────────────────────────────────────────────
// Context
// ─────────────────────────────────────────────────────────────────────────────

const ResponsiveSheetContext = React.createContext<{ isMobile: boolean }>({
  isMobile: false,
});

// ─────────────────────────────────────────────────────────────────────────────
// Root
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  children: React.ReactNode;
}

function ResponsiveSheet({ open, onOpenChange, children }: ResponsiveSheetProps) {
  const isMobile = useIsMobile();

  if (isMobile) {
    return (
      <ResponsiveSheetContext.Provider value={{ isMobile: true }}>
        <Drawer open={open} onOpenChange={onOpenChange}>
          {children}
        </Drawer>
      </ResponsiveSheetContext.Provider>
    );
  }

  return (
    <ResponsiveSheetContext.Provider value={{ isMobile: false }}>
      <Dialog open={open} onOpenChange={onOpenChange}>
        {children}
      </Dialog>
    </ResponsiveSheetContext.Provider>
  );
}
ResponsiveSheet.displayName = "ResponsiveSheet"

// ─────────────────────────────────────────────────────────────────────────────
// Content
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetContentProps {
  children: React.ReactNode;
  className?: string;
}

function ResponsiveSheetContent({ children, className }: ResponsiveSheetContentProps) {
  const { isMobile } = React.useContext(ResponsiveSheetContext);

  if (isMobile) {
    // Preserve legacy content-hugging behavior; new Drawer default is `md`.
    return <DrawerContent className={className} height="auto">{children}</DrawerContent>;
  }

  return <DialogContent className={className}>{children}</DialogContent>;
}
ResponsiveSheetContent.displayName = "ResponsiveSheetContent"

// ─────────────────────────────────────────────────────────────────────────────
// Header
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}

function ResponsiveSheetHeader({ className, ...props }: ResponsiveSheetHeaderProps) {
  const { isMobile } = React.useContext(ResponsiveSheetContext);

  if (isMobile) {
    return <DrawerHeader className={className} {...props} />;
  }

  return <DialogHeader className={className} {...props} />;
}
ResponsiveSheetHeader.displayName = "ResponsiveSheetHeader"

// ─────────────────────────────────────────────────────────────────────────────
// Title
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}

function ResponsiveSheetTitle({ className, ...props }: ResponsiveSheetTitleProps) {
  const { isMobile } = React.useContext(ResponsiveSheetContext);

  if (isMobile) {
    return <DrawerTitle className={className} {...props} />;
  }

  return <DialogTitle className={className} {...props} />;
}
ResponsiveSheetTitle.displayName = "ResponsiveSheetTitle"

// ─────────────────────────────────────────────────────────────────────────────
// Description
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}

function ResponsiveSheetDescription({ className, ...props }: ResponsiveSheetDescriptionProps) {
  const { isMobile } = React.useContext(ResponsiveSheetContext);

  if (isMobile) {
    return <DrawerDescription className={className} {...props} />;
  }

  return <DialogDescription className={className} {...props} />;
}
ResponsiveSheetDescription.displayName = "ResponsiveSheetDescription"

// ─────────────────────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────────────────────

interface ResponsiveSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {}

function ResponsiveSheetFooter({ className, ...props }: ResponsiveSheetFooterProps) {
  const { isMobile } = React.useContext(ResponsiveSheetContext);

  if (isMobile) {
    return <DrawerFooter className={className} {...props} />;
  }

  return <DialogFooter className={className} {...props} />;
}
ResponsiveSheetFooter.displayName = "ResponsiveSheetFooter"

// ─────────────────────────────────────────────────────────────────────────────
// Exports
// ─────────────────────────────────────────────────────────────────────────────

export {
  ResponsiveSheet,
  ResponsiveSheetContent,
  ResponsiveSheetHeader,
  ResponsiveSheetTitle,
  ResponsiveSheetDescription,
  ResponsiveSheetFooter,
};