Nextjs Shadcn Builder

/**
 * Complex Multi-Step Form Component
 *
 * Demonstrates advanced form patterns:
 * - Multi-step wizard with progress indication
 * - Form validation using react-hook-form + zod
 * - Conditional fields based on user input
 * - File upload with preview
 * - Responsive layout (single column mobile, multi-column desktop)
 *
 * shadcn/ui components used: Form, Input, Select, Checkbox, RadioGroup, Button, Card, Progress
 * Best practices: Type-safe validation, error handling, accessibility
 */

"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import {
  ChevronLeft,
  ChevronRight,
  Check,
  Upload,
  X,
  FileText,
  AlertCircle,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Textarea } from "@/components/ui/textarea"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { cn } from "@/lib/utils"

// Form schema with validation
const formSchema = z.object({
  // Step 1: Personal Information
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  phone: z.string().regex(/^\+?[\d\s\-()]+$/, "Invalid phone number"),
  dateOfBirth: z.string().min(1, "Date of birth is required"),

  // Step 2: Professional Information
  occupation: z.string().min(1, "Please select your occupation"),
  company: z.string().optional(),
  yearsOfExperience: z.string().min(1, "Please select years of experience"),
  employmentType: z.enum(["full-time", "part-time", "contract", "freelance"], {
    required_error: "Please select employment type",
  }),
  isCurrentlyEmployed: z.boolean(),

  // Step 3: Preferences & Additional Info
  interests: z.array(z.string()).min(1, "Select at least one interest"),
  skillLevel: z.enum(["beginner", "intermediate", "advanced", "expert"], {
    required_error: "Please select your skill level",
  }),
  bio: z.string().min(10, "Bio must be at least 10 characters").max(500, "Bio must not exceed 500 characters"),
  newsletter: z.boolean().default(false),
  terms: z.boolean().refine((val) => val === true, {
    message: "You must accept the terms and conditions",
  }),

  // File upload (optional in schema, but can be required)
  resume: z.any().optional(),
})

type FormData = z.infer<typeof formSchema>

// Step configuration
const steps = [
  {
    id: 1,
    title: "Personal Info",
    description: "Basic information about you",
  },
  {
    id: 2,
    title: "Professional",
    description: "Your work experience",
  },
  {
    id: 3,
    title: "Preferences",
    description: "Interests and settings",
  },
]

// Interest options
const interestOptions = [
  { id: "technology", label: "Technology" },
  { id: "design", label: "Design" },
  { id: "marketing", label: "Marketing" },
  { id: "sales", label: "Sales" },
  { id: "management", label: "Management" },
  { id: "analytics", label: "Analytics" },
]

interface ComplexFormProps {
  onSubmit?: (data: FormData) => void | Promise<void>
}

export function ComplexForm({ onSubmit }: ComplexFormProps) {
  const [currentStep, setCurrentStep] = React.useState(1)
  const [isSubmitting, setIsSubmitting] = React.useState(false)
  const [uploadedFile, setUploadedFile] = React.useState<File | null>(null)

  const form = useForm<FormData>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      dateOfBirth: "",
      occupation: "",
      company: "",
      yearsOfExperience: "",
      employmentType: "full-time",
      isCurrentlyEmployed: true,
      interests: [],
      skillLevel: "intermediate",
      bio: "",
      newsletter: false,
      terms: false,
    },
  })

  const isCurrentlyEmployed = form.watch("isCurrentlyEmployed")

  // Calculate progress percentage
  const progress = (currentStep / steps.length) * 100

  // Handle next step
  const handleNext = async () => {
    let fieldsToValidate: (keyof FormData)[] = []

    switch (currentStep) {
      case 1:
        fieldsToValidate = ["firstName", "lastName", "email", "phone", "dateOfBirth"]
        break
      case 2:
        fieldsToValidate = ["occupation", "yearsOfExperience", "employmentType"]
        if (isCurrentlyEmployed) {
          fieldsToValidate.push("company")
        }
        break
      case 3:
        fieldsToValidate = ["interests", "skillLevel", "bio", "terms"]
        break
    }

    const isValid = await form.trigger(fieldsToValidate)
    if (isValid) {
      setCurrentStep((prev) => Math.min(prev + 1, steps.length))
    }
  }

  // Handle previous step
  const handlePrevious = () => {
    setCurrentStep((prev) => Math.max(prev - 1, 1))
  }

  // Handle file upload
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      // Validate file size (max 5MB)
      if (file.size > 5 * 1024 * 1024) {
        form.setError("resume", {
          type: "manual",
          message: "File size must be less than 5MB",
        })
        return
      }

      // Validate file type
      const allowedTypes = [
        "application/pdf",
        "application/msword",
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      ]
      if (!allowedTypes.includes(file.type)) {
        form.setError("resume", {
          type: "manual",
          message: "Only PDF and DOC/DOCX files are allowed",
        })
        return
      }

      setUploadedFile(file)
      form.setValue("resume", file)
      form.clearErrors("resume")
    }
  }

  // Handle form submission
  const handleSubmit = async (data: FormData) => {
    setIsSubmitting(true)
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 2000))

      if (onSubmit) {
        await onSubmit(data)
      } else {
        console.log("Form submitted:", data)
      }

      // Reset form on success
      form.reset()
      setCurrentStep(1)
      setUploadedFile(null)
    } catch (error) {
      console.error("Form submission error:", error)
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <div className="w-full max-w-4xl mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Registration Form</CardTitle>
          <CardDescription>
            Complete all steps to finish your registration
          </CardDescription>
        </CardHeader>

        <CardContent className="space-y-6">
          {/* Progress Bar */}
          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="font-medium">
                Step {currentStep} of {steps.length}
              </span>
              <span className="text-muted-foreground">{Math.round(progress)}%</span>
            </div>
            <Progress value={progress} className="h-2" />
          </div>

          {/* Step Indicators */}
          <div className="flex items-center justify-between">
            {steps.map((step, index) => (
              <React.Fragment key={step.id}>
                <div className="flex flex-col items-center gap-2">
                  <div
                    className={cn(
                      "flex h-10 w-10 items-center justify-center rounded-full border-2 transition-colors",
                      currentStep > step.id
                        ? "border-primary bg-primary text-primary-foreground"
                        : currentStep === step.id
                        ? "border-primary bg-background text-primary"
                        : "border-muted bg-background text-muted-foreground"
                    )}
                  >
                    {currentStep > step.id ? (
                      <Check className="h-5 w-5" />
                    ) : (
                      <span className="text-sm font-medium">{step.id}</span>
                    )}
                  </div>
                  <div className="text-center hidden sm:block">
                    <p className="text-sm font-medium">{step.title}</p>
                    <p className="text-xs text-muted-foreground hidden md:block">
                      {step.description}
                    </p>
                  </div>
                </div>
                {index < steps.length - 1 && (
                  <Separator
                    className={cn(
                      "flex-1 mx-2",
                      currentStep > step.id ? "bg-primary" : "bg-muted"
                    )}
                  />
                )}
              </React.Fragment>
            ))}
          </div>

          <Separator />

          {/* Form */}
          <Form {...form}>
            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
              {/* Step 1: Personal Information */}
              {currentStep === 1 && (
                <div className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="firstName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>First Name</FormLabel>
                          <FormControl>
                            <Input placeholder="John" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="lastName"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Last Name</FormLabel>
                          <FormControl>
                            <Input placeholder="Doe" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={form.control}
                    name="email"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Email</FormLabel>
                        <FormControl>
                          <Input
                            type="email"
                            placeholder="john.doe@example.com"
                            {...field}
                          />
                        </FormControl>
                        <FormDescription>
                          We'll never share your email with anyone else
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="phone"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Phone Number</FormLabel>
                          <FormControl>
                            <Input placeholder="+1 (555) 123-4567" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="dateOfBirth"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Date of Birth</FormLabel>
                          <FormControl>
                            <Input type="date" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>
                </div>
              )}

              {/* Step 2: Professional Information */}
              {currentStep === 2 && (
                <div className="space-y-4">
                  <FormField
                    control={form.control}
                    name="occupation"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Occupation</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Select your occupation" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="software-engineer">
                              Software Engineer
                            </SelectItem>
                            <SelectItem value="designer">Designer</SelectItem>
                            <SelectItem value="product-manager">
                              Product Manager
                            </SelectItem>
                            <SelectItem value="data-scientist">
                              Data Scientist
                            </SelectItem>
                            <SelectItem value="marketing">Marketing</SelectItem>
                            <SelectItem value="other">Other</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="isCurrentlyEmployed"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel>I am currently employed</FormLabel>
                          <FormDescription>
                            Check this if you're working at a company
                          </FormDescription>
                        </div>
                      </FormItem>
                    )}
                  />

                  {/* Conditional field - only show if employed */}
                  {isCurrentlyEmployed && (
                    <FormField
                      control={form.control}
                      name="company"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Company Name</FormLabel>
                          <FormControl>
                            <Input placeholder="Acme Inc." {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  )}

                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="yearsOfExperience"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Years of Experience</FormLabel>
                          <Select
                            onValueChange={field.onChange}
                            defaultValue={field.value}
                          >
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue placeholder="Select years" />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="0-1">0-1 years</SelectItem>
                              <SelectItem value="2-5">2-5 years</SelectItem>
                              <SelectItem value="6-10">6-10 years</SelectItem>
                              <SelectItem value="10+">10+ years</SelectItem>
                            </SelectContent>
                          </Select>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    <FormField
                      control={form.control}
                      name="employmentType"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Employment Type</FormLabel>
                          <Select
                            onValueChange={field.onChange}
                            defaultValue={field.value}
                          >
                            <FormControl>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                            </FormControl>
                            <SelectContent>
                              <SelectItem value="full-time">Full-time</SelectItem>
                              <SelectItem value="part-time">Part-time</SelectItem>
                              <SelectItem value="contract">Contract</SelectItem>
                              <SelectItem value="freelance">Freelance</SelectItem>
                            </SelectContent>
                          </Select>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  {/* File Upload */}
                  <FormField
                    control={form.control}
                    name="resume"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Resume (Optional)</FormLabel>
                        <FormControl>
                          <div className="space-y-2">
                            <div className="flex items-center gap-2">
                              <Input
                                type="file"
                                accept=".pdf,.doc,.docx"
                                onChange={handleFileChange}
                                className="hidden"
                                id="resume-upload"
                              />
                              <label htmlFor="resume-upload">
                                <Button
                                  type="button"
                                  variant="outline"
                                  className="cursor-pointer"
                                  asChild
                                >
                                  <span>
                                    <Upload className="mr-2 h-4 w-4" />
                                    Choose File
                                  </span>
                                </Button>
                              </label>
                              {uploadedFile && (
                                <div className="flex items-center gap-2 text-sm">
                                  <FileText className="h-4 w-4 text-muted-foreground" />
                                  <span className="truncate max-w-[200px]">
                                    {uploadedFile.name}
                                  </span>
                                  <Button
                                    type="button"
                                    variant="ghost"
                                    size="icon"
                                    className="h-6 w-6"
                                    onClick={() => {
                                      setUploadedFile(null)
                                      form.setValue("resume", undefined)
                                    }}
                                  >
                                    <X className="h-4 w-4" />
                                  </Button>
                                </div>
                              )}
                            </div>
                          </div>
                        </FormControl>
                        <FormDescription>
                          Upload your resume (PDF, DOC, or DOCX, max 5MB)
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              )}

              {/* Step 3: Preferences & Additional Info */}
              {currentStep === 3 && (
                <div className="space-y-4">
                  <FormField
                    control={form.control}
                    name="interests"
                    render={() => (
                      <FormItem>
                        <FormLabel>Areas of Interest</FormLabel>
                        <FormDescription>
                          Select all that apply to you
                        </FormDescription>
                        <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-2">
                          {interestOptions.map((option) => (
                            <FormField
                              key={option.id}
                              control={form.control}
                              name="interests"
                              render={({ field }) => (
                                <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                                  <FormControl>
                                    <Checkbox
                                      checked={field.value?.includes(option.id)}
                                      onCheckedChange={(checked) => {
                                        return checked
                                          ? field.onChange([...field.value, option.id])
                                          : field.onChange(
                                              field.value?.filter(
                                                (value) => value !== option.id
                                              )
                                            )
                                      }}
                                    />
                                  </FormControl>
                                  <FormLabel className="font-normal cursor-pointer">
                                    {option.label}
                                  </FormLabel>
                                </FormItem>
                              )}
                            />
                          ))}
                        </div>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="skillLevel"
                    render={({ field }) => (
                      <FormItem className="space-y-3">
                        <FormLabel>Skill Level</FormLabel>
                        <FormControl>
                          <RadioGroup
                            onValueChange={field.onChange}
                            defaultValue={field.value}
                            className="flex flex-col space-y-2"
                          >
                            <FormItem className="flex items-center space-x-3 space-y-0">
                              <FormControl>
                                <RadioGroupItem value="beginner" />
                              </FormControl>
                              <FormLabel className="font-normal cursor-pointer">
                                Beginner - Just starting out
                              </FormLabel>
                            </FormItem>
                            <FormItem className="flex items-center space-x-3 space-y-0">
                              <FormControl>
                                <RadioGroupItem value="intermediate" />
                              </FormControl>
                              <FormLabel className="font-normal cursor-pointer">
                                Intermediate - Comfortable with basics
                              </FormLabel>
                            </FormItem>
                            <FormItem className="flex items-center space-x-3 space-y-0">
                              <FormControl>
                                <RadioGroupItem value="advanced" />
                              </FormControl>
                              <FormLabel className="font-normal cursor-pointer">
                                Advanced - Proficient and experienced
                              </FormLabel>
                            </FormItem>
                            <FormItem className="flex items-center space-x-3 space-y-0">
                              <FormControl>
                                <RadioGroupItem value="expert" />
                              </FormControl>
                              <FormLabel className="font-normal cursor-pointer">
                                Expert - Master of the craft
                              </FormLabel>
                            </FormItem>
                          </RadioGroup>
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="bio"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Bio</FormLabel>
                        <FormControl>
                          <Textarea
                            placeholder="Tell us a bit about yourself..."
                            className="resize-none min-h-[120px]"
                            {...field}
                          />
                        </FormControl>
                        <FormDescription>
                          {field.value.length}/500 characters
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="newsletter"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel>Subscribe to newsletter</FormLabel>
                          <FormDescription>
                            Receive updates and news via email
                          </FormDescription>
                        </div>
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="terms"
                    render={({ field }) => (
                      <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                        <FormControl>
                          <Checkbox
                            checked={field.value}
                            onCheckedChange={field.onChange}
                          />
                        </FormControl>
                        <div className="space-y-1 leading-none">
                          <FormLabel className="text-sm">
                            I accept the{" "}
                            <a
                              href="#"
                              className="underline underline-offset-4 hover:text-primary"
                            >
                              terms and conditions
                            </a>
                          </FormLabel>
                          <FormMessage />
                        </div>
                      </FormItem>
                    )}
                  />

                  {isSubmitting && (
                    <Alert>
                      <AlertCircle className="h-4 w-4" />
                      <AlertDescription>
                        Submitting your registration...
                      </AlertDescription>
                    </Alert>
                  )}
                </div>
              )}
            </form>
          </Form>
        </CardContent>

        <CardFooter className="flex flex-col-reverse sm:flex-row sm:justify-between gap-2">
          <Button
            type="button"
            variant="outline"
            onClick={handlePrevious}
            disabled={currentStep === 1 || isSubmitting}
            className="w-full sm:w-auto"
          >
            <ChevronLeft className="mr-2 h-4 w-4" />
            Previous
          </Button>

          {currentStep < steps.length ? (
            <Button
              type="button"
              onClick={handleNext}
              disabled={isSubmitting}
              className="w-full sm:w-auto"
            >
              Next
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          ) : (
            <Button
              type="button"
              onClick={form.handleSubmit(handleSubmit)}
              disabled={isSubmitting}
              className="w-full sm:w-auto"
            >
              {isSubmitting ? "Submitting..." : "Submit"}
              <Check className="ml-2 h-4 w-4" />
            </Button>
          )}
        </CardFooter>
      </Card>
    </div>
  )
}

/**
 * Usage Example:
 *
 * ```tsx
 * import { ComplexForm } from "@/components/complex-form"
 *
 * export default function RegistrationPage() {
 *   const handleFormSubmit = async (data) => {
 *     // Send data to your API
 *     const response = await fetch("/api/register", {
 *       method: "POST",
 *       body: JSON.stringify(data),
 *     })
 *
 *     if (response.ok) {
 *       // Handle success (redirect, show message, etc.)
 *       router.push("/dashboard")
 *     }
 *   }
 *
 *   return (
 *     <div className="container py-8">
 *       <ComplexForm onSubmit={handleFormSubmit} />
 *     </div>
 *   )
 * }
 * ```
 *
 * Key Features:
 *
 * 1. Multi-Step Wizard:
 *    - Visual progress indicator with steps
 *    - Step validation before proceeding
 *    - Navigation between steps
 *    - Progress percentage display
 *
 * 2. Form Validation:
 *    - react-hook-form for form state management
 *    - Zod schema for type-safe validation
 *    - Real-time field validation
 *    - Custom error messages
 *    - Conditional validation (company field)
 *
 * 3. Conditional Fields:
 *    - Company field shown only if currently employed
 *    - Dynamic validation based on selections
 *    - Reactive form behavior
 *
 * 4. File Upload:
 *    - Custom file input with button trigger
 *    - File type validation (PDF, DOC, DOCX)
 *    - File size validation (5MB max)
 *    - File preview with name display
 *    - Remove file functionality
 *
 * 5. Responsive Layout:
 *    - Single column on mobile (< 768px)
 *    - Multi-column grid on desktop (>= 768px)
 *    - Flexible button layout
 *    - Touch-friendly mobile experience
 *
 * Advanced Patterns:
 *
 * 1. Checkbox Arrays:
 *    - Multiple selection with interests
 *    - Array validation (min 1 selection)
 *    - Proper checked state management
 *
 * 2. Radio Groups:
 *    - Skill level selection
 *    - Single choice from options
 *    - Descriptive labels for each option
 *
 * 3. Textarea with Character Count:
 *    - Bio field with 500 char limit
 *    - Live character counter
 *    - Validation for min/max length
 *
 * 4. Terms & Conditions:
 *    - Required checkbox validation
 *    - Link to T&C document
 *    - Custom validation message
 *
 * Accessibility Features:
 * - Semantic form structure
 * - ARIA labels via shadcn Form components
 * - Keyboard navigation support
 * - Focus management between steps
 * - Error announcements
 * - Screen reader friendly
 * - Proper label associations
 *
 * shadcn/ui Best Practices:
 * - All colors use CSS variables
 * - No hardcoded values
 * - Proper Form component usage
 * - FormField, FormItem, FormLabel, FormControl pattern
 * - FormMessage for error display
 * - FormDescription for help text
 * - Lucide React icons only
 * - cn() utility for conditional classes
 * - Responsive Tailwind utilities
 *
 * Validation Best Practices:
 * - Type-safe with Zod + TypeScript
 * - Clear, actionable error messages
 * - Progressive validation (per step)
 * - Immediate feedback on blur
 * - Prevent submission with invalid data
 * - Custom validation logic support
 *
 * Performance Considerations:
 * - React Hook Form minimizes re-renders
 * - Zod validation is fast and efficient
 * - File size check before upload
 * - Debounce search/filter fields if needed
 * - Consider React.memo for complex steps
 */

/**
 * Example Feature Card Component
 *
 * Demonstrates shadcn/ui best practices:
 * - Uses standard shadcn components (Card, Button, Badge)
 * - No hardcoded colors or spacing
 * - CSS variables via Tailwind classes
 * - Proper TypeScript types
 * - Clean composition pattern
 */

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowRight } from "lucide-react"

interface Feature {
  id: string
  title: string
  description: string
  category: string
  status: "active" | "beta" | "coming-soon"
}

interface FeatureCardProps {
  feature: Feature
  onLearnMore?: (featureId: string) => void
}

export function FeatureCard({ feature, onLearnMore }: FeatureCardProps) {
  const statusVariant = {
    active: "default" as const,
    beta: "secondary" as const,
    "coming-soon": "outline" as const,
  }

  return (
    <Card className="w-full max-w-md hover:shadow-lg transition-shadow">
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="space-y-1">
            <CardTitle className="text-2xl">{feature.title}</CardTitle>
            <CardDescription>{feature.category}</CardDescription>
          </div>
          <Badge variant={statusVariant[feature.status]}>
            {feature.status.replace("-", " ")}
          </Badge>
        </div>
      </CardHeader>

      <CardContent>
        <p className="text-sm text-muted-foreground leading-relaxed">
          {feature.description}
        </p>
      </CardContent>

      <CardFooter>
        <Button
          className="w-full"
          onClick={() => onLearnMore?.(feature.id)}
          variant="default"
        >
          Learn More
          <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}

/**
 * Usage Example:
 *
 * const features: Feature[] = [
 *   {
 *     id: "1",
 *     title: "Dark Mode",
 *     description: "Automatic dark mode support with theme toggle",
 *     category: "Theming",
 *     status: "active"
 *   }
 * ]
 *
 * <FeatureCard
 *   feature={features[0]}
 *   onLearnMore={(id) => console.log(`Learning about ${id}`)}
 * />
 */

/**
 * Example User Profile Component
 *
 * Demonstrates:
 * - Complex component composition with shadcn primitives
 * - Avatar, Badge, Button, Card usage
 * - Responsive design with Tailwind
 * - No hardcoded values
 * - Semantic color usage
 */

import { Card, CardContent, CardDescription, CardHeader } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"
import { Mail, MapPin, Calendar } from "lucide-react"

interface UserProfileProps {
  user: {
    id: string
    name: string
    email: string
    avatar?: string
    role: string
    location: string
    joinedDate: string
    isVerified: boolean
  }
  onMessage?: () => void
  onViewProfile?: () => void
}

export function UserProfile({ user, onMessage, onViewProfile }: UserProfileProps) {
  // Get initials for avatar fallback
  const getInitials = (name: string) => {
    return name
      .split(" ")
      .map((n) => n[0])
      .join("")
      .toUpperCase()
      .slice(0, 2)
  }

  return (
    <Card className="w-full max-w-md">
      <CardHeader className="pb-4">
        <div className="flex items-start gap-4">
          <Avatar className="h-16 w-16">
            <AvatarImage src={user.avatar} alt={user.name} />
            <AvatarFallback className="bg-primary text-primary-foreground text-lg">
              {getInitials(user.name)}
            </AvatarFallback>
          </Avatar>

          <div className="flex-1 space-y-1">
            <div className="flex items-center gap-2">
              <h3 className="text-xl font-semibold">{user.name}</h3>
              {user.isVerified && (
                <Badge variant="secondary" className="text-xs">
                  Verified
                </Badge>
              )}
            </div>
            <CardDescription className="text-sm">{user.role}</CardDescription>
          </div>
        </div>
      </CardHeader>

      <Separator />

      <CardContent className="pt-6 space-y-4">
        {/* Contact Information */}
        <div className="space-y-3">
          <div className="flex items-center gap-3 text-sm">
            <Mail className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">{user.email}</span>
          </div>

          <div className="flex items-center gap-3 text-sm">
            <MapPin className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">{user.location}</span>
          </div>

          <div className="flex items-center gap-3 text-sm">
            <Calendar className="h-4 w-4 text-muted-foreground" />
            <span className="text-muted-foreground">
              Joined {new Date(user.joinedDate).toLocaleDateString()}
            </span>
          </div>
        </div>

        {/* Actions */}
        <div className="flex gap-2 pt-2">
          <Button
            variant="default"
            className="flex-1"
            onClick={onMessage}
          >
            <Mail className="mr-2 h-4 w-4" />
            Message
          </Button>
          <Button
            variant="outline"
            className="flex-1"
            onClick={onViewProfile}
          >
            View Profile
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}

/**
 * Usage Example:
 *
 * const user = {
 *   id: "1",
 *   name: "Jane Doe",
 *   email: "jane@example.com",
 *   avatar: "https://github.com/janedoe.png",
 *   role: "Senior Developer",
 *   location: "San Francisco, CA",
 *   joinedDate: "2024-01-15",
 *   isVerified: true
 * }
 *
 * <UserProfile
 *   user={user}
 *   onMessage={() => console.log("Send message")}
 *   onViewProfile={() => console.log("View profile")}
 * />
 */

/**
 * Responsive Dashboard Component
 *
 * Demonstrates mobile-first responsive dashboard layout:
 * - Mobile (< 768px): Single column stacked layout
 * - Tablet (768px - 1024px): 2-column grid layout
 * - Desktop (>= 1024px): 3-4 column grid layout with dynamic sizing
 *
 * shadcn/ui components used: Card, Button, Badge, Progress, Separator, Avatar
 * Best practices: Responsive grids, CSS variables, accessible charts placeholder
 */

"use client"

import * as React from "react"
import {
  TrendingUp,
  TrendingDown,
  Users,
  DollarSign,
  ShoppingCart,
  Activity,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal,
  Download,
} from "lucide-react"

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Separator } from "@/components/ui/separator"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"

// Dashboard data types
interface StatCardData {
  title: string
  value: string
  change: number
  changeLabel: string
  icon: React.ComponentType<{ className?: string }>
}

interface RecentActivity {
  id: string
  user: string
  action: string
  timestamp: string
  avatar?: string
}

interface Goal {
  id: string
  title: string
  progress: number
  target: string
  current: string
}

interface ResponsiveDashboardProps {
  stats?: StatCardData[]
  recentActivity?: RecentActivity[]
  goals?: Goal[]
}

// Default mock data
const defaultStats: StatCardData[] = [
  {
    title: "Total Revenue",
    value: "$45,231.89",
    change: 20.1,
    changeLabel: "from last month",
    icon: DollarSign,
  },
  {
    title: "Active Users",
    value: "2,350",
    change: 15.3,
    changeLabel: "from last month",
    icon: Users,
  },
  {
    title: "Sales",
    value: "12,234",
    change: -4.5,
    changeLabel: "from last month",
    icon: ShoppingCart,
  },
  {
    title: "Active Now",
    value: "573",
    change: 12.0,
    changeLabel: "from last hour",
    icon: Activity,
  },
]

const defaultActivity: RecentActivity[] = [
  {
    id: "1",
    user: "Olivia Martin",
    action: "Made a purchase of $299.00",
    timestamp: "2 minutes ago",
    avatar: "https://avatar.vercel.sh/olivia",
  },
  {
    id: "2",
    user: "Jackson Lee",
    action: "Subscribed to Pro plan",
    timestamp: "15 minutes ago",
    avatar: "https://avatar.vercel.sh/jackson",
  },
  {
    id: "3",
    user: "Isabella Nguyen",
    action: "Updated profile information",
    timestamp: "1 hour ago",
    avatar: "https://avatar.vercel.sh/isabella",
  },
  {
    id: "4",
    user: "William Kim",
    action: "Created a new project",
    timestamp: "2 hours ago",
    avatar: "https://avatar.vercel.sh/william",
  },
  {
    id: "5",
    user: "Sofia Davis",
    action: "Left a review (5 stars)",
    timestamp: "3 hours ago",
    avatar: "https://avatar.vercel.sh/sofia",
  },
]

const defaultGoals: Goal[] = [
  {
    id: "1",
    title: "Monthly Revenue Goal",
    progress: 72,
    target: "$50,000",
    current: "$36,000",
  },
  {
    id: "2",
    title: "New User Signups",
    progress: 45,
    target: "1,000 users",
    current: "450 users",
  },
  {
    id: "3",
    title: "Customer Satisfaction",
    progress: 88,
    target: "90%",
    current: "88%",
  },
]

// Stat Card Component
function StatCard({ data }: { data: StatCardData }) {
  const Icon = data.icon
  const isPositive = data.change >= 0

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0">
        <CardTitle className="text-sm font-medium">{data.title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{data.value}</div>
        <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
          {isPositive ? (
            <ArrowUpRight className="h-3 w-3 text-green-500" />
          ) : (
            <ArrowDownRight className="h-3 w-3 text-red-500" />
          )}
          <span className={isPositive ? "text-green-500" : "text-red-500"}>
            {Math.abs(data.change)}%
          </span>
          <span>{data.changeLabel}</span>
        </div>
      </CardContent>
    </Card>
  )
}

// Recent Activity Card Component
function RecentActivityCard({ activities }: { activities: RecentActivity[] }) {
  return (
    <Card className="flex flex-col">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Recent Activity</CardTitle>
            <CardDescription>Latest user actions and events</CardDescription>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" className="h-8 w-8">
                <MoreHorizontal className="h-4 w-4" />
                <span className="sr-only">Open menu</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <DropdownMenuItem>View all</DropdownMenuItem>
              <DropdownMenuItem>Export</DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>Settings</DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      <CardContent className="flex-1">
        <div className="space-y-4">
          {activities.map((activity, index) => (
            <div key={activity.id}>
              <div className="flex items-start gap-3">
                <Avatar className="h-9 w-9">
                  <AvatarImage src={activity.avatar} alt={activity.user} />
                  <AvatarFallback>
                    {activity.user.split(" ").map((n) => n[0]).join("")}
                  </AvatarFallback>
                </Avatar>
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium">{activity.user}</p>
                  <p className="text-sm text-muted-foreground">
                    {activity.action}
                  </p>
                  <p className="text-xs text-muted-foreground">
                    {activity.timestamp}
                  </p>
                </div>
              </div>
              {index < activities.length - 1 && (
                <Separator className="mt-4" />
              )}
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter>
        <Button variant="ghost" className="w-full">
          View all activity
          <ArrowUpRight className="ml-2 h-4 w-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}

// Goals Card Component
function GoalsCard({ goals }: { goals: Goal[] }) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Goals Progress</CardTitle>
            <CardDescription>Track your monthly objectives</CardDescription>
          </div>
          <Button variant="outline" size="sm">
            <Download className="mr-2 h-4 w-4" />
            Export
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {goals.map((goal) => (
          <div key={goal.id} className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="font-medium">{goal.title}</span>
              <span className="text-muted-foreground">{goal.progress}%</span>
            </div>
            <Progress value={goal.progress} className="h-2" />
            <div className="flex items-center justify-between text-xs text-muted-foreground">
              <span>{goal.current}</span>
              <span>Target: {goal.target}</span>
            </div>
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

// Sales Chart Placeholder Card Component
function SalesChartCard() {
  return (
    <Card className="flex flex-col">
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Sales Overview</CardTitle>
            <CardDescription>Monthly sales performance</CardDescription>
          </div>
          <Badge variant="secondary">This Month</Badge>
        </div>
      </CardHeader>
      <CardContent className="flex-1">
        {/* Placeholder for chart - integrate with recharts, chart.js, etc. */}
        <div className="h-[200px] md:h-[250px] flex items-center justify-center rounded-lg border border-dashed">
          <div className="text-center">
            <TrendingUp className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
            <p className="text-sm text-muted-foreground">
              Chart placeholder
            </p>
            <p className="text-xs text-muted-foreground mt-1">
              Integrate with your preferred charting library
            </p>
          </div>
        </div>
      </CardContent>
      <CardFooter className="flex-col items-start gap-2">
        <div className="flex w-full items-center justify-between text-sm">
          <div className="flex items-center gap-2">
            <div className="h-2 w-2 rounded-full bg-primary" />
            <span className="text-muted-foreground">Revenue</span>
          </div>
          <span className="font-medium">$45,231</span>
        </div>
        <div className="flex w-full items-center justify-between text-sm">
          <div className="flex items-center gap-2">
            <div className="h-2 w-2 rounded-full bg-muted" />
            <span className="text-muted-foreground">Expenses</span>
          </div>
          <span className="font-medium">$18,942</span>
        </div>
      </CardFooter>
    </Card>
  )
}

// Main Dashboard Component
export function ResponsiveDashboard({
  stats = defaultStats,
  recentActivity = defaultActivity,
  goals = defaultGoals,
}: ResponsiveDashboardProps) {
  return (
    <div className="w-full space-y-4 md:space-y-6">
      {/* Dashboard Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground mt-1">
            Welcome back! Here's your business overview.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline">
            <Download className="mr-2 h-4 w-4" />
            Export
          </Button>
          <Button>View Report</Button>
        </div>
      </div>

      {/* Stats Grid - Responsive columns */}
      {/* Mobile: 1 col, Tablet: 2 cols, Desktop: 4 cols */}
      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat, index) => (
          <StatCard key={index} data={stat} />
        ))}
      </div>

      {/* Main Content Grid - Responsive layout */}
      {/* Mobile: 1 col, Tablet: 2 cols, Desktop: 3 cols with span variations */}
      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
        {/* Sales Chart - Spans 2 columns on tablet+, 1 on mobile */}
        <div className="md:col-span-2 lg:col-span-2">
          <SalesChartCard />
        </div>

        {/* Recent Activity - Spans 1 column on all breakpoints */}
        <div className="md:col-span-2 lg:col-span-1">
          <RecentActivityCard activities={recentActivity} />
        </div>

        {/* Goals - Spans full width on mobile, 1 col on tablet+ */}
        <div className="md:col-span-2 lg:col-span-1">
          <GoalsCard goals={goals} />
        </div>

        {/* Additional cards can be added here with responsive spanning */}
        <div className="md:col-span-2 lg:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Additional Metrics</CardTitle>
              <CardDescription>
                Space for more dashboard components
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[200px] flex items-center justify-center rounded-lg border border-dashed">
                <p className="text-sm text-muted-foreground">
                  Add more cards as needed
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

/**
 * Usage Example:
 *
 * ```tsx
 * import { ResponsiveDashboard } from "@/components/responsive-dashboard"
 *
 * export default function DashboardPage() {
 *   // Fetch your real data here
 *   const stats = await fetchDashboardStats()
 *   const activity = await fetchRecentActivity()
 *   const goals = await fetchGoals()
 *
 *   return (
 *     <div className="container py-6">
 *       <ResponsiveDashboard
 *         stats={stats}
 *         recentActivity={activity}
 *         goals={goals}
 *       />
 *     </div>
 *   )
 * }
 * ```
 *
 * Key Responsive Patterns:
 *
 * 1. Mobile (< 640px):
 *    - Single column layout (grid-cols-1)
 *    - Stats cards stacked vertically
 *    - All content full width
 *    - Compact spacing (space-y-4)
 *    - Touch-friendly buttons
 *
 * 2. Tablet (640px - 1024px):
 *    - 2-column stats grid (sm:grid-cols-2)
 *    - 2-column main grid (md:grid-cols-2)
 *    - Sales chart spans 2 columns (md:col-span-2)
 *    - Better use of horizontal space
 *    - Increased spacing (md:space-y-6)
 *
 * 3. Desktop (>= 1024px):
 *    - 4-column stats grid (lg:grid-cols-4)
 *    - 3-column main grid (lg:grid-cols-3)
 *    - Dynamic column spanning:
 *      - Sales chart: 2/3 width (lg:col-span-2)
 *      - Recent activity: 1/3 width (lg:col-span-1)
 *      - Goals: 1/3 width (lg:col-span-1)
 *    - Optimal information density
 *
 * Grid Spanning Strategies:
 *
 * Use col-span to create asymmetric, visually interesting layouts:
 * ```tsx
 * // Wide chart on desktop, full width on mobile
 * <div className="md:col-span-2 lg:col-span-2">
 *
 * // Sidebar card on desktop, full width on tablet
 * <div className="md:col-span-2 lg:col-span-1">
 *
 * // Full width on all breakpoints
 * <div className="col-span-full">
 * ```
 *
 * Chart Integration:
 *
 * Replace the SalesChartCard placeholder with real charts:
 * - Recharts (recommended for shadcn/ui)
 * - Chart.js with react-chartjs-2
 * - Victory charts
 * - D3.js with custom React wrapper
 *
 * Example with Recharts:
 * ```tsx
 * import { LineChart, Line, ResponsiveContainer } from "recharts"
 *
 * <ResponsiveContainer width="100%" height={250}>
 *   <LineChart data={salesData}>
 *     <Line
 *       type="monotone"
 *       dataKey="revenue"
 *       stroke="hsl(var(--primary))"
 *       strokeWidth={2}
 *     />
 *   </LineChart>
 * </ResponsiveContainer>
 * ```
 *
 * Accessibility Features:
 * - Semantic HTML structure
 * - ARIA labels for screen readers (sr-only)
 * - Keyboard navigation support
 * - Focus visible states
 * - Proper heading hierarchy (h1, CardTitle)
 * - Descriptive CardDescription elements
 *
 * shadcn/ui Best Practices:
 * - All colors use CSS variables (bg-primary, text-muted-foreground)
 * - No hardcoded values
 * - Proper component composition (Card, Button, Badge, Progress)
 * - Lucide React icons only
 * - cn() utility for conditional classes
 * - Responsive Tailwind utilities (sm:, md:, lg:)
 * - Consistent spacing scale (gap-4, space-y-4)
 *
 * Performance Considerations:
 * - Use React.memo() for StatCard if stats update frequently
 * - Lazy load chart libraries with dynamic imports
 * - Virtualize long activity lists if needed
 * - Consider skeleton loading states
 * - Optimize avatar images with Next.js Image component
 */

/**
 * Responsive Data Table Component
 *
 * Demonstrates mobile-first responsive data table patterns:
 * - Mobile (< 768px): Card-based layout with key information
 * - Tablet (768px - 1024px): Scrollable table with priority columns
 * - Desktop (>= 1024px): Full table with sorting, filtering, pagination
 *
 * shadcn/ui components used: Table, Card, Button, Badge, Input, Select, Avatar
 * Best practices: Mobile-first design, touch-friendly targets, responsive overflow
 */

"use client"

import * as React from "react"
import {
  ChevronLeft,
  ChevronRight,
  ChevronsLeft,
  ChevronsRight,
  Search,
  ArrowUpDown,
  ArrowUp,
  ArrowDown,
  MoreHorizontal,
  Mail,
  Phone,
} from "lucide-react"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"

// User data type
interface User {
  id: string
  name: string
  email: string
  phone: string
  role: "admin" | "user" | "manager"
  status: "active" | "inactive" | "pending"
  avatar?: string
  joinedAt: string
  lastActive: string
}

// Sort configuration
type SortKey = keyof User
type SortDirection = "asc" | "desc" | null

interface ResponsiveDataTableProps {
  data: User[]
  itemsPerPage?: number
}

// Status badge variant mapping
const statusVariant = {
  active: "default" as const,
  inactive: "secondary" as const,
  pending: "outline" as const,
}

// Role badge variant mapping
const roleVariant = {
  admin: "destructive" as const,
  manager: "default" as const,
  user: "secondary" as const,
}

export function ResponsiveDataTable({
  data,
  itemsPerPage = 10,
}: ResponsiveDataTableProps) {
  const [searchQuery, setSearchQuery] = React.useState("")
  const [currentPage, setCurrentPage] = React.useState(1)
  const [sortKey, setSortKey] = React.useState<SortKey | null>(null)
  const [sortDirection, setSortDirection] = React.useState<SortDirection>(null)

  // Filter data based on search query
  const filteredData = React.useMemo(() => {
    if (!searchQuery) return data

    const query = searchQuery.toLowerCase()
    return data.filter(
      (user) =>
        user.name.toLowerCase().includes(query) ||
        user.email.toLowerCase().includes(query) ||
        user.role.toLowerCase().includes(query)
    )
  }, [data, searchQuery])

  // Sort data
  const sortedData = React.useMemo(() => {
    if (!sortKey || !sortDirection) return filteredData

    return [...filteredData].sort((a, b) => {
      const aValue = a[sortKey]
      const bValue = b[sortKey]

      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1
      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1
      return 0
    })
  }, [filteredData, sortKey, sortDirection])

  // Paginate data
  const paginatedData = React.useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage
    return sortedData.slice(startIndex, startIndex + itemsPerPage)
  }, [sortedData, currentPage, itemsPerPage])

  const totalPages = Math.ceil(sortedData.length / itemsPerPage)

  // Handle sort
  const handleSort = (key: SortKey) => {
    if (sortKey === key) {
      if (sortDirection === "asc") {
        setSortDirection("desc")
      } else if (sortDirection === "desc") {
        setSortKey(null)
        setSortDirection(null)
      }
    } else {
      setSortKey(key)
      setSortDirection("asc")
    }
  }

  // Render sort icon
  const renderSortIcon = (key: SortKey) => {
    if (sortKey !== key) {
      return <ArrowUpDown className="ml-2 h-4 w-4 opacity-50" />
    }
    if (sortDirection === "asc") {
      return <ArrowUp className="ml-2 h-4 w-4" />
    }
    return <ArrowDown className="ml-2 h-4 w-4" />
  }

  return (
    <div className="w-full space-y-4">
      {/* Search and filter controls */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="relative flex-1 max-w-sm">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search users..."
            value={searchQuery}
            onChange={(e) => {
              setSearchQuery(e.target.value)
              setCurrentPage(1) // Reset to first page on search
            }}
            className="pl-8"
          />
        </div>
        <div className="flex items-center gap-2">
          <span className="text-sm text-muted-foreground whitespace-nowrap">
            {sortedData.length} users
          </span>
        </div>
      </div>

      {/* Mobile Card View (< 768px) */}
      <div className="md:hidden space-y-3">
        {paginatedData.length === 0 ? (
          <Card>
            <CardContent className="py-8 text-center text-sm text-muted-foreground">
              No users found
            </CardContent>
          </Card>
        ) : (
          paginatedData.map((user) => (
            <Card key={user.id} className="overflow-hidden">
              <CardHeader className="pb-3">
                <div className="flex items-start justify-between gap-2">
                  <div className="flex items-center gap-3">
                    <Avatar className="h-10 w-10">
                      <AvatarImage src={user.avatar} alt={user.name} />
                      <AvatarFallback>
                        {user.name.split(" ").map((n) => n[0]).join("")}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <CardTitle className="text-base">{user.name}</CardTitle>
                      <p className="text-sm text-muted-foreground">{user.email}</p>
                    </div>
                  </div>
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Open menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
                      <DropdownMenuItem>View profile</DropdownMenuItem>
                      <DropdownMenuItem>Send message</DropdownMenuItem>
                      <DropdownMenuSeparator />
                      <DropdownMenuItem className="text-destructive">
                        Deactivate
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              </CardHeader>
              <CardContent className="space-y-2">
                <div className="flex items-center gap-2">
                  <Phone className="h-3.5 w-3.5 text-muted-foreground" />
                  <span className="text-sm">{user.phone}</span>
                </div>
                <div className="flex flex-wrap gap-2">
                  <Badge variant={roleVariant[user.role]}>{user.role}</Badge>
                  <Badge variant={statusVariant[user.status]}>{user.status}</Badge>
                </div>
                <div className="pt-2 text-xs text-muted-foreground">
                  <p>Joined: {new Date(user.joinedAt).toLocaleDateString()}</p>
                  <p>Last active: {new Date(user.lastActive).toLocaleDateString()}</p>
                </div>
              </CardContent>
            </Card>
          ))
        )}
      </div>

      {/* Tablet/Desktop Table View (>= 768px) */}
      <div className="hidden md:block rounded-md border">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[250px]">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("name")}
                  >
                    User
                    {renderSortIcon("name")}
                  </Button>
                </TableHead>
                <TableHead className="hidden lg:table-cell">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("email")}
                  >
                    Contact
                    {renderSortIcon("email")}
                  </Button>
                </TableHead>
                <TableHead>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("role")}
                  >
                    Role
                    {renderSortIcon("role")}
                  </Button>
                </TableHead>
                <TableHead>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("status")}
                  >
                    Status
                    {renderSortIcon("status")}
                  </Button>
                </TableHead>
                <TableHead className="hidden xl:table-cell">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("joinedAt")}
                  >
                    Joined
                    {renderSortIcon("joinedAt")}
                  </Button>
                </TableHead>
                <TableHead className="hidden xl:table-cell">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 px-2"
                    onClick={() => handleSort("lastActive")}
                  >
                    Last Active
                    {renderSortIcon("lastActive")}
                  </Button>
                </TableHead>
                <TableHead className="w-[50px]">
                  <span className="sr-only">Actions</span>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {paginatedData.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={7}
                    className="h-24 text-center text-muted-foreground"
                  >
                    No users found
                  </TableCell>
                </TableRow>
              ) : (
                paginatedData.map((user) => (
                  <TableRow key={user.id}>
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <Avatar className="h-8 w-8">
                          <AvatarImage src={user.avatar} alt={user.name} />
                          <AvatarFallback>
                            {user.name.split(" ").map((n) => n[0]).join("")}
                          </AvatarFallback>
                        </Avatar>
                        <div className="flex flex-col">
                          <span className="font-medium">{user.name}</span>
                          <span className="text-sm text-muted-foreground lg:hidden">
                            {user.email}
                          </span>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell className="hidden lg:table-cell">
                      <div className="flex flex-col gap-1">
                        <div className="flex items-center gap-2 text-sm">
                          <Mail className="h-3.5 w-3.5 text-muted-foreground" />
                          {user.email}
                        </div>
                        <div className="flex items-center gap-2 text-sm">
                          <Phone className="h-3.5 w-3.5 text-muted-foreground" />
                          {user.phone}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant={roleVariant[user.role]}>{user.role}</Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant={statusVariant[user.status]}>
                        {user.status}
                      </Badge>
                    </TableCell>
                    <TableCell className="hidden xl:table-cell text-sm">
                      {new Date(user.joinedAt).toLocaleDateString()}
                    </TableCell>
                    <TableCell className="hidden xl:table-cell text-sm">
                      {new Date(user.lastActive).toLocaleDateString()}
                    </TableCell>
                    <TableCell>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">Open menu</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
                          <DropdownMenuItem>View profile</DropdownMenuItem>
                          <DropdownMenuItem>Send message</DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem className="text-destructive">
                            Deactivate
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </div>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="text-sm text-muted-foreground">
            Showing{" "}
            <span className="font-medium">
              {(currentPage - 1) * itemsPerPage + 1}
            </span>{" "}
            to{" "}
            <span className="font-medium">
              {Math.min(currentPage * itemsPerPage, sortedData.length)}
            </span>{" "}
            of <span className="font-medium">{sortedData.length}</span> results
          </div>

          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              onClick={() => setCurrentPage(1)}
              disabled={currentPage === 1}
            >
              <ChevronsLeft className="h-4 w-4" />
              <span className="sr-only">First page</span>
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
              disabled={currentPage === 1}
            >
              <ChevronLeft className="h-4 w-4" />
              <span className="sr-only">Previous page</span>
            </Button>

            <div className="flex items-center gap-2">
              <span className="text-sm">
                Page {currentPage} of {totalPages}
              </span>
            </div>

            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              onClick={() =>
                setCurrentPage((prev) => Math.min(totalPages, prev + 1))
              }
              disabled={currentPage === totalPages}
            >
              <ChevronRight className="h-4 w-4" />
              <span className="sr-only">Next page</span>
            </Button>
            <Button
              variant="outline"
              size="icon"
              className="h-8 w-8"
              onClick={() => setCurrentPage(totalPages)}
              disabled={currentPage === totalPages}
            >
              <ChevronsRight className="h-4 w-4" />
              <span className="sr-only">Last page</span>
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}

/**
 * Usage Example:
 *
 * ```tsx
 * import { ResponsiveDataTable } from "@/components/responsive-data-table"
 *
 * const users = [
 *   {
 *     id: "1",
 *     name: "John Doe",
 *     email: "john@example.com",
 *     phone: "+1 (555) 123-4567",
 *     role: "admin",
 *     status: "active",
 *     avatar: "https://avatar.example.com/john.jpg",
 *     joinedAt: "2024-01-15T10:00:00Z",
 *     lastActive: "2024-03-20T14:30:00Z",
 *   },
 *   // ... more users
 * ]
 *
 * export default function UsersPage() {
 *   return (
 *     <div className="container py-6">
 *       <h1 className="text-3xl font-bold mb-6">Users</h1>
 *       <ResponsiveDataTable data={users} itemsPerPage={10} />
 *     </div>
 *   )
 * }
 * ```
 *
 * Key Responsive Patterns:
 *
 * 1. Mobile (< 768px):
 *    - Card-based layout for better mobile UX
 *    - Avatar + name as card header
 *    - Key information prominently displayed
 *    - Dropdown menu for actions
 *    - Touch-friendly tap targets (minimum 44px)
 *    - Vertical stacking of information
 *
 * 2. Tablet (768px - 1024px):
 *    - Traditional table layout
 *    - Priority columns visible (User, Role, Status, Actions)
 *    - Contact info hidden (shown in user column)
 *    - Horizontal scrolling if needed
 *    - Sortable column headers
 *
 * 3. Desktop (>= 1024px):
 *    - Full table with all columns
 *    - Separate Contact column (lg:table-cell)
 *    - Date columns visible (xl:table-cell)
 *    - Better spacing and readability
 *    - Hover states on rows
 *
 * Features:
 * - Client-side search filtering
 * - Column sorting (asc/desc/none)
 * - Pagination with page controls
 * - Responsive column visibility
 * - Dropdown menus for row actions
 * - Badge components for status/role
 * - Avatar components with fallbacks
 *
 * Accessibility Features:
 * - Semantic table structure
 * - Screen reader labels (sr-only)
 * - Keyboard navigation support
 * - ARIA labels for icon buttons
 * - Focus visible states
 * - Proper heading hierarchy
 *
 * shadcn/ui Best Practices:
 * - All colors use CSS variables
 * - No hardcoded spacing or colors
 * - Proper component composition
 * - Lucide React icons only
 * - cn() utility for conditional classes
 * - Tailwind utility classes throughout
 * - Responsive utility classes (md:, lg:, xl:)
 */