"use client"

/**
 * 布局组件模板
 *
 * 包含项目中常用的各种布局组件
 */

import type React from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft } from "lucide-react"

interface PageHeaderProps {
  title: string
  onBack?: () => void
  actionButton?: React.ReactNode
}

/**
 * 页面头部组件
 * 用于页面顶部的标题和操作区
 */
export function PageHeader({ title, onBack, actionButton }: PageHeaderProps) {
  return (
    <header className="sticky top-0 z-10 bg-white border-b">
      <div className="flex items-center justify-between p-4">
        <div className="flex items-center space-x-3">
          {onBack && (
            <Button variant="ghost" size="icon" onClick={onBack}>
              <ChevronLeft className="h-5 w-5" />
            </Button>
          )}
          <h1 className="text-lg font-medium">{title}</h1>
        </div>
        {actionButton}
      </div>
    </header>
  )
}

interface StepIndicatorProps {
  steps: Array<{
    step: number
    title: string
    icon: React.ReactNode
  }>
  currentStep: number
}

/**
 * 步骤指示器组件
 * 用于多步骤流程的导航
 */
export function StepIndicator({ steps, currentStep }: StepIndicatorProps) {
  return (
    <div className="mb-6">
      <div className="flex items-center justify-between">
        {steps.map(({ step, title, icon }) => (
          <div key={step} className="flex flex-col items-center">
            <div
              className={`w-10 h-10 rounded-full flex items-center justify-center ${
                step === currentStep
                  ? "bg-blue-600 text-white"
                  : step < currentStep
                    ? "bg-green-500 text-white"
                    : "bg-gray-200 text-gray-500"
              }`}
            >
              {step < currentStep ? "✓" : icon}
            </div>
            <span className="text-xs mt-1">{title}</span>
          </div>
        ))}
      </div>
      <div className="relative mt-2">
        <div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
        <div
          className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
        ></div>
      </div>
    </div>
  )
}

interface StepNavigationProps {
  onBack: () => void
  onNext: () => void
  nextLabel?: string
  backLabel?: string
  isLastStep?: boolean
  isNextDisabled?: boolean
}

/**
 * 步骤导航组件
 * 用于多步骤流程的前进后退按钮
 */
export function StepNavigation({
  onBack,
  onNext,
  nextLabel = "下一步",
  backLabel = "上一步",
  isLastStep = false,
  isNextDisabled = false,
}: StepNavigationProps) {
  return (
    <div className="pt-4 flex justify-between">
      <Button variant="outline" onClick={onBack}>
        <ChevronLeft className="mr-2 h-4 w-4" />
        {backLabel}
      </Button>
      <Button onClick={onNext} disabled={isNextDisabled}>
        {isLastStep ? "完成" : nextLabel}
        {!isLastStep && <span className="ml-2">→</span>}
      </Button>
    </div>
  )
}