// ❌ 型安全性のないコンポーネント
function UserCard({ user }: any) {
  return (
    <div className="card">
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      <span>{user.age}歳</span>
    </div>
  );
}

// ❌ 使用時も型チェックなし
function App() {
  const userData: any = {
    userName: "キム開発", // nameではなくuserName
    mail: "[email protected]", // emailではなくmail
    years: 30 // ageではなくyears
  };
  
  return <UserCard user={userData} />; // ランタイムでエラーを発見
}

// ✅ 明確なPropsの型定義
interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  avatar?: string; // optional property
}

interface UserCardProps {
  user: User;
  onClick?: (userId: number) => void;
  showAge?: boolean;
}

// ✅ React 19の最新関数コンポーネントパターン
function UserCard({ user, onClick, showAge = true }: UserCardProps) {
  return (
    <div 
      className="card" 
      onClick={() => onClick?.(user.id)}
      role="button"
      tabIndex={0}
    >
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {showAge && <span>{user.age}歳</span>}
      {user.avatar && <img src={user.avatar} alt={`${user.name} プロフィール`} />}
    </div>
  );
}

// ✅ 型安全な使用
function App() {
  const userData: User = {
    id: 1,
    name: "キム開発",
    email: "[email protected]",
    age: 30
  };
  
  const handleUserClick = (userId: number) => {
    console.log(`User ${userId} clicked`);
  };
  
  return (
    <UserCard 
      user={userData}
      onClick={handleUserClick}
      showAge={false}
    />
  );
}

// ✅ Genericを活用した汎用テーブルコンポーネント
interface Column<T> {
  key: keyof T;
  title: string;
  width?: string;
  render?: (value: T[keyof T], record: T, index: number) => React.ReactNode;
}

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  loading?: boolean;
  onRowClick?: (record: T, index: number) => void;
  emptyText?: string;
}

// ✅ React 19 + TypeScript 5.x 最新パターン
function DataTable<T extends Record<string, any>>({
  data,
  columns,
  loading = false,
  onRowClick,
  emptyText = "データがありません"
}: DataTableProps<T>) {
  if (loading) {
    return <div className="loading">読み込み中...</div>;
  }

  if (data.length === 0) {
    return <div className="empty">{emptyText}</div>;
  }

  return (
    <table className="data-table">
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={String(column.key)} style={{ width: column.width }}>
              {column.title}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((record, index) => (
          <tr 
            key={index}
            onClick={() => onRowClick?.(record, index)}
            className={onRowClick ? 'clickable' : ''}
          >
            {columns.map((column) => (
              <td key={String(column.key)}>
                {column.render 
                  ? column.render(record[column.key], record, index)
                  : String(record[column.key] ?? '')
                }
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// ✅ 使用例 - ユーザーテーブル
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
  lastLogin: Date;
}

function UserManagement() {
  const users: User[] = [
    { id: 1, name: "キム開発", email: "[email protected]", role: "admin", lastLogin: new Date() }
  ];

  const userColumns: Column<User>[] = [
    { key: 'name', title: '名前', width: '150px' },
    { key: 'email', title: 'メールアドレス', width: '200px' },
    { 
      key: 'role', 
      title: '権限', 
      width: '100px',
      render: (role: User['role']) => (
        <span className={`badge ${role}`}>
          {role === 'admin' ? '管理者' : 'ユーザー'}
        </span>
      )
    },
    {
      key: 'lastLogin',
      title: '最終ログイン',
      render: (date: Date) => date.toLocaleDateString('ko-KR')
    }
  ];

  return (
    <DataTable<User>
      data={users}
      columns={userColumns}
      onRowClick={(user) => console.log('選択されたユーザー:', user.name)}
      emptyText="登録されたユーザーがいません"
    />
  );
}