// components/layout/DashboardShell.tsx
import React from 'react';
import { Sidebar } from './Sidebar';
import type { NavItem } from '@/types';

interface DashboardShellProps {
  children: React.ReactNode;
  sidebarContent?: React.ReactNode;
  navItems?: NavItem[];
}

export const DashboardShell: React.FC<DashboardShellProps> = ({
  children,
  sidebarContent,
  navItems = []
}) => {
  return (
    <div className="flex h-screen bg-slate-950">
      {/* Sidebar - 240px fixed width */}
      <aside className="w-60 flex-shrink-0">
        {sidebarContent || <Sidebar items={navItems} />}
      </aside>
      
      {/* Main Content - fluid width */}
      <main className="flex-1 overflow-y-auto">
        <div className="container mx-auto px-6 py-8">
          {children}
        </div>
      </main>
    </div>
  );
};

// components/layout/Sidebar.tsx
import React, { useState } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { NavItem } from './NavItem';
import type { NavItem as NavItemType } from '@/types';

interface SidebarProps {
  items: NavItemType[];
  collapsed?: boolean;
}

export const Sidebar: React.FC<SidebarProps> = ({ 
  items, 
  collapsed: initialCollapsed = false 
}) => {
  const [collapsed, setCollapsed] = useState(initialCollapsed);

  return (
    <div 
      className={`
        h-full bg-slate-900 border-r border-slate-800
        transition-all duration-300 ease-in-out
        ${collapsed ? 'w-16' : 'w-60'}
      `}
      role="navigation"
      aria-label="Main navigation"
    >
      {/* Header */}
      <div className="h-16 flex items-center justify-between px-4 border-b border-slate-800">
        {!collapsed && (
          <h1 className="text-xl font-bold text-slate-100">
            Dashboard
          </h1>
        )}
        <button
          onClick={() => setCollapsed(!collapsed)}
          className="p-2 rounded-md hover:bg-slate-800 text-slate-400 hover:text-slate-100"
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
        >
          {collapsed ? <ChevronRight size={20} /> : <ChevronLeft size={20} />}
        </button>
      </div>

      {/* Navigation Items */}
      <nav className="mt-4 px-2">
        {items.map((item) => (
          <NavItem 
            key={item.id} 
            item={item} 
            collapsed={collapsed}
          />
        ))}
      </nav>
    </div>
  );
};

// components/layout/NavItem.tsx
import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import type { LucideIcon } from 'lucide-react';

interface NavItemType {
  id: string;
  label: string;
  href: string;
  icon: LucideIcon;
}

interface NavItemProps {
  item: NavItemType;
  collapsed: boolean;
}

export const NavItem: React.FC<NavItemProps> = ({ item, collapsed }) => {
  const pathname = usePathname();
  const isActive = pathname === item.href;
  
  const Icon = item.icon;

  return (
    <Link
      href={item.href}
      className={`
        flex items-center gap-3 px-3 py-2 rounded-lg mb-1
        transition-colors duration-200
        ${isActive 
          ? 'bg-blue-600 text-white' 
          : 'text-slate-400 hover:bg-slate-800 hover:text-slate-100'
        }
      `}
      aria-current={isActive ? 'page' : undefined}
    >
      <Icon size={20} aria-hidden="true" />
      {!collapsed && (
        <span className="text-sm font-medium">{item.label}</span>
      )}
    </Link>
  );
};

// components/data/StatCard.tsx
import React from 'react';
import type { LucideIcon } from 'lucide-react';
import { TrendingUp, TrendingDown } from 'lucide-react';

interface Trend {
  value: number;
  direction: 'up' | 'down';
}

interface StatCardProps {
  title: string;
  value: string | number;
  trend?: Trend;
  icon: LucideIcon;
}

export const StatCard: React.FC<StatCardProps> = ({
  title,
  value,
  trend,
  icon: Icon
}) => {
  return (
    <div 
      className="
        relative overflow-hidden
        bg-slate-800/50 backdrop-blur-lg
        border border-slate-700/50
        rounded-lg p-6
        shadow-glassmorphism
      "
      role="article"
      aria-labelledby={`stat-${title.replace(/\s/g, '-')}`}
    >
      {/* Icon */}
      <div className="absolute top-4 right-4 text-slate-600">
        <Icon size={32} aria-hidden="true" />
      </div>

      {/* Title */}
      <h3 
        id={`stat-${title.replace(/\s/g, '-')}`}
        className="text-sm font-medium text-slate-400 mb-2"
      >
        {title}
      </h3>

      {/* Value */}
      <p className="text-3xl font-bold text-slate-100 mb-2 font-mono">
        {value}
      </p>

      {/* Trend */}
      {trend && (
        <div 
          className={`
            flex items-center gap-1 text-sm
            ${trend.direction === 'up' ? 'text-emerald-500' : 'text-red-500'}
          `}
          aria-label={`Trend ${trend.direction} by ${Math.abs(trend.value)}%`}
        >
          {trend.direction === 'up' ? (
            <TrendingUp size={16} />
          ) : (
            <TrendingDown size={16} />
          )}
          <span className="font-medium">
            {Math.abs(trend.value)}%
          </span>
        </div>
      )}
    </div>
  );
};

// components/data/RevenueChart.tsx
import React from 'react';
import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer
} from 'recharts';

interface DataPoint {
  date: string;
  revenue: number;
}

type TimeRange = '7d' | '30d' | '90d' | '1y';

interface RevenueChartProps {
  data: DataPoint[];
  timeRange?: TimeRange;
}

export const RevenueChart: React.FC<RevenueChartProps> = ({
  data,
  timeRange = '30d'
}) => {
  return (
    <div 
      className="bg-slate-800/50 backdrop-blur-lg border border-slate-700/50 rounded-lg p-6"
      role="img"
      aria-label="Revenue trend chart"
    >
      <h3 className="text-lg font-semibold text-slate-100 mb-4">
        Revenue Trend ({timeRange})
      </h3>
      
      <ResponsiveContainer width="100%" height={300}>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="revenueGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#3B82F6" stopOpacity={0.3} />
              <stop offset="100%" stopColor="#3B82F6" stopOpacity={0} />
            </linearGradient>
          </defs>
          
          <CartesianGrid 
            strokeDasharray="3 3" 
            stroke="rgba(100, 116, 139, 0.1)" 
          />
          
          <XAxis 
            dataKey="date"
            stroke="#64748B"
            style={{ fontSize: '12px' }}
          />
          
          <YAxis 
            stroke="#64748B"
            style={{ fontSize: '12px' }}
            tickFormatter={(value) => `$${value / 1000}k`}
          />
          
          <Tooltip 
            contentStyle={{
              backgroundColor: '#1E293B',
              border: '1px solid #334155',
              borderRadius: '8px',
              color: '#F1F5F9'
            }}
            formatter={(value: number) => [`$${value.toLocaleString()}`, 'Revenue']}
          />
          
          <Area
            type="monotone"
            dataKey="revenue"
            stroke="#3B82F6"
            strokeWidth={2}
            fill="url(#revenueGradient)"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
};

// components/data/OrderTable.tsx
import React, { useState } from 'react';
import { ArrowUpDown, MoreVertical } from 'lucide-react';

interface Order {
  id: string;
  customer: string;
  amount: number;
  status: 'pending' | 'processing' | 'completed' | 'cancelled';
  date: string;
}

interface OrderTableProps {
  orders: Order[];
  onSort?: (field: keyof Order, direction: 'asc' | 'desc') => void;
  onFilter?: (filters: Record<string, any>) => void;
}

export const OrderTable: React.FC<OrderTableProps> = ({
  orders,
  onSort,
  onFilter
}) => {
  const [sortField, setSortField] = useState<keyof Order | null>(null);
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');

  const handleSort = (field: keyof Order) => {
    const newDirection = 
      sortField === field && sortDirection === 'asc' ? 'desc' : 'asc';
    setSortField(field);
    setSortDirection(newDirection);
    onSort?.(field, newDirection);
  };

  const getStatusColor = (status: Order['status']) => {
    const colors = {
      pending: 'bg-amber-500/20 text-amber-500',
      processing: 'bg-blue-500/20 text-blue-500',
      completed: 'bg-emerald-500/20 text-emerald-500',
      cancelled: 'bg-red-500/20 text-red-500'
    };
    return colors[status];
  };

  return (
    <div className="bg-slate-800/50 backdrop-blur-lg border border-slate-700/50 rounded-lg overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full" role="table">
          <thead className="bg-slate-900/50">
            <tr>
              {(['Order ID', 'Customer', 'Amount', 'Status', 'Date'] as const).map((header) => (
                <th
                  key={header}
                  className="px-6 py-4 text-left text-sm font-semibold text-slate-300"
                  scope="col"
                >
                  <button
                    onClick={() => handleSort(header.toLowerCase().replace(' ', '') as keyof Order)}
                    className="flex items-center gap-2 hover:text-slate-100 transition-colors"
                    aria-label={`Sort by ${header}`}
                  >
                    {header}
                    <ArrowUpDown size={14} />
                  </button>
                </th>
              ))}
              <th className="px-6 py-4 text-right text-sm font-semibold text-slate-300" scope="col">
                Actions
              </th>
            </tr>
          </thead>
          
          <tbody className="divide-y divide-slate-700/50">
            {orders.map((order) => (
              <tr 
                key={order.id}
                className="hover:bg-slate-800/30 transition-colors"
              >
                <td className="px-6 py-4 text-sm font-mono text-slate-300">
                  {order.id}
                </td>
                <td className="px-6 py-4 text-sm text-slate-100">
                  {order.customer}
                </td>
                <td className="px-6 py-4 text-sm font-mono font-medium text-slate-100">
                  ${order.amount.toLocaleString()}
                </td>
                <td className="px-6 py-4">
                  <span className={`
                    inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    ${getStatusColor(order.status)}
                  `}>
                    {order.status}
                  </span>
                </td>
                <td className="px-6 py-4 text-sm text-slate-400">
                  {order.date}
                </td>
                <td className="px-6 py-4 text-right">
                  <button 
                    className="text-slate-400 hover:text-slate-100 p-1 rounded hover:bg-slate-700"
                    aria-label={`Actions for order ${order.id}`}
                  >
                    <MoreVertical size={16} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

// components/data/OrderTable.tsx (수정)
import { ChevronLeft, ChevronRight } from 'lucide-react';

// ... (기존 코드)

const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage] = useState(10);

const paginatedOrders = orders.slice(
  (currentPage - 1) * itemsPerPage,
  currentPage * itemsPerPage
);

const totalPages = Math.ceil(orders.length / itemsPerPage);

// ... (테이블 렌더링)

{/* 페이지네이션 */}
<div className="flex items-center justify-between px-6 py-4 bg-slate-900/50">
  <p className="text-sm text-slate-400">
    Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, orders.length)} of {orders.length} orders
  </p>
  
  <div className="flex gap-2">
    <button
      onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
      disabled={currentPage === 1}
      className="p-2 rounded-md border border-slate-700 hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed"
      aria-label="Previous page"
    >
      <ChevronLeft size={16} />
    </button>
    
    <span className="px-4 py-2 text-sm text-slate-300">
      Page {currentPage} of {totalPages}
    </span>
    
    <button
      onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
      disabled={currentPage === totalPages}
      className="p-2 rounded-md border border-slate-700 hover:bg-slate-800 disabled:opacity-50 disabled:cursor-not-allowed"
      aria-label="Next page"
    >
      <ChevronRight size={16} />
    </button>
  </div>
</div>