import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";
import { PageLayout } from "../organisms/PageLayout";
import { PageHeader } from "../organisms/PageHeader";
import { DetailSection } from "../organisms/DetailSection";
import { TabViewContainer } from "../organisms/TabViewContainer";
import { Button } from "../ui/button";
import { ArrowLeft, Edit, Trash2, Copy, MoreVertical } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";

interface DetailField {
  label: string;
  value: ReactNode;
  fullWidth?: boolean;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };
}

interface DetailSectionData {
  title: string;
  icon?: LucideIcon;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };
  fields: DetailField[];
  actions?: ReactNode;
  columns?: 1 | 2 | 3 | 4;
}

interface TabItemData {
  id: string;
  label: string;
  icon?: LucideIcon;
  badge?: string | number;
  content: ReactNode;
}

interface ActionButton {
  label: string;
  icon?: LucideIcon;
  onClick: () => void;
  variant?: "default" | "outline" | "destructive" | "secondary" | "ghost";
  className?: string;
}

interface DetailViewTemplateProps {
  // Header
  title: string;
  description?: string;
  icon?: LucideIcon;
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "destructive" | "outline";
  };

  // Navigation
  onBack: () => void;
  backLabel?: string;

  // Main Actions (데스크탑)
  primaryActions?: ActionButton[];

  // More Actions (모바일 드롭다운)
  moreActions?: Array<{
    label: string;
    icon?: LucideIcon;
    onClick: () => void;
    variant?: "default" | "destructive";
    separator?: boolean;
  }>;

  // Content
  sections?: DetailSectionData[];
  tabs?: TabItemData[];

  // Custom content
  customContent?: ReactNode;
}

export function DetailViewTemplate({
  title,
  description,
  icon,
  badge,
  onBack,
  backLabel = "목록으로",
  primaryActions,
  moreActions,
  sections,
  tabs,
  customContent,
}: DetailViewTemplateProps) {
  return (
    <PageLayout>
      <PageHeader
        title={title}
        description={description}
        icon={icon}
        badge={badge}
        actions={
          <>
            {/* 데스크탑: 모든 액션 버튼 표시 */}
            <div className="hidden md:flex items-center gap-2">
              <Button variant="outline" onClick={onBack}>
                <ArrowLeft className="h-4 w-4 mr-2" />
                {backLabel}
              </Button>
              {primaryActions?.map((action, index) => (
                <Button
                  key={index}
                  variant={action.variant || "default"}
                  onClick={action.onClick}
                  className={action.className}
                >
                  {action.icon && <action.icon className="h-4 w-4 mr-2" />}
                  {action.label}
                </Button>
              ))}
            </div>

            {/* 모바일: 뒤로가기 + 더보기 메뉴 */}
            <div className="flex md:hidden items-center gap-2">
              <Button variant="outline" size="sm" onClick={onBack}>
                <ArrowLeft className="h-4 w-4" />
              </Button>
              {(moreActions || primaryActions) && (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm">
                      <MoreVertical className="h-4 w-4" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-48">
                    {primaryActions?.map((action, index) => (
                      <DropdownMenuItem
                        key={`primary-${index}`}
                        onClick={action.onClick}
                      >
                        {action.icon && (
                          <action.icon className="h-4 w-4 mr-2" />
                        )}
                        {action.label}
                      </DropdownMenuItem>
                    ))}
                    {primaryActions && moreActions && <DropdownMenuSeparator />}
                    {moreActions?.map((action, index) => (
                      <div key={`more-${index}`}>
                        {action.separator && <DropdownMenuSeparator />}
                        <DropdownMenuItem
                          onClick={action.onClick}
                          className={
                            action.variant === "destructive"
                              ? "text-red-600"
                              : ""
                          }
                        >
                          {action.icon && (
                            <action.icon className="h-4 w-4 mr-2" />
                          )}
                          {action.label}
                        </DropdownMenuItem>
                      </div>
                    ))}
                  </DropdownMenuContent>
                </DropdownMenu>
              )}
            </div>
          </>
        }
      />

      {/* Custom Content */}
      {customContent}

      {/* Sections */}
      {sections && (
        <div className="space-y-4">
          {sections.map((section, index) => (
            <DetailSection key={index} {...section} />
          ))}
        </div>
      )}

      {/* Tabs */}
      {tabs && <TabViewContainer tabs={tabs} />}
    </PageLayout>
  );
}
