import AdminLayout from '@/components/layouts/AdminLayout';

export const metadata = {
  title: 'Admin Dashboard - Restaurant Management System',
  description: 'Admin dashboard for managing the restaurant',
};

const AdminDashboard = () => {
  return (
    <AdminLayout>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        {/* Stats Card: Total Orders */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
            Total Orders
          </h3>
          <p className="text-3xl font-bold">128</p>
          <div className="mt-2 flex items-center text-sm text-green-600">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-1"
            >
              <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
              <polyline points="17 6 23 6 23 12" />
            </svg>
            <span>12% increase</span>
          </div>
        </div>

        {/* Stats Card: Revenue */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
            Revenue
          </h3>
          <p className="text-3xl font-bold">$3,240</p>
          <div className="mt-2 flex items-center text-sm text-green-600">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-1"
            >
              <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
              <polyline points="17 6 23 6 23 12" />
            </svg>
            <span>8% increase</span>
          </div>
        </div>

        {/* Stats Card: Customers */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
            Customers
          </h3>
          <p className="text-3xl font-bold">64</p>
          <div className="mt-2 flex items-center text-sm text-green-600">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-1"
            >
              <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
              <polyline points="17 6 23 6 23 12" />
            </svg>
            <span>24% increase</span>
          </div>
        </div>

        {/* Stats Card: Reservations */}
        <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md">
          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">
            Reservations
          </h3>
          <p className="text-3xl font-bold">32</p>
          <div className="mt-2 flex items-center text-sm text-yellow-600">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-1"
            >
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            <span>Same as last week</span>
          </div>
        </div>
      </div>

      {/* Recent Orders */}
      <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md mb-8">
        <div className="p-6 border-b border-gray-200 dark:border-slate-700">
          <h2 className="text-lg font-semibold">Recent Orders</h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 dark:bg-slate-700">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Order ID
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Customer
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Date
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Amount
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-slate-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">#ORDER123</td>
                <td className="px-6 py-4 whitespace-nowrap">John Smith</td>
                <td className="px-6 py-4 whitespace-nowrap">Apr 28, 2025</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Completed
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">$128.50</td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">#ORDER122</td>
                <td className="px-6 py-4 whitespace-nowrap">Sarah Johnson</td>
                <td className="px-6 py-4 whitespace-nowrap">Apr 28, 2025</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800/20 dark:text-yellow-400">
                    Preparing
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">$75.20</td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">#ORDER121</td>
                <td className="px-6 py-4 whitespace-nowrap">Michael Brown</td>
                <td className="px-6 py-4 whitespace-nowrap">Apr 27, 2025</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400">
                    Delivered
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">$92.40</td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">#ORDER120</td>
                <td className="px-6 py-4 whitespace-nowrap">Emma Wilson</td>
                <td className="px-6 py-4 whitespace-nowrap">Apr 27, 2025</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Completed
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">$54.60</td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">#ORDER119</td>
                <td className="px-6 py-4 whitespace-nowrap">David Clark</td>
                <td className="px-6 py-4 whitespace-nowrap">Apr 26, 2025</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-red-100 text-red-800 dark:bg-red-800/20 dark:text-red-400">
                    Cancelled
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap">$0.00</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Today's Reservations */}
      <div className="bg-white dark:bg-slate-800 rounded-lg shadow-md">
        <div className="p-6 border-b border-gray-200 dark:border-slate-700">
          <h2 className="text-lg font-semibold">Today's Reservations</h2>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead className="bg-gray-50 dark:bg-slate-700">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Customer
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Time
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Table
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Guests
                </th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  Status
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200 dark:divide-slate-700">
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">Jessica Lee</td>
                <td className="px-6 py-4 whitespace-nowrap">12:30 PM</td>
                <td className="px-6 py-4 whitespace-nowrap">Table 5</td>
                <td className="px-6 py-4 whitespace-nowrap">4</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Confirmed
                  </span>
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">Robert Taylor</td>
                <td className="px-6 py-4 whitespace-nowrap">1:00 PM</td>
                <td className="px-6 py-4 whitespace-nowrap">Table 8</td>
                <td className="px-6 py-4 whitespace-nowrap">2</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Confirmed
                  </span>
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">Maria Rodriguez</td>
                <td className="px-6 py-4 whitespace-nowrap">7:00 PM</td>
                <td className="px-6 py-4 whitespace-nowrap">Table 12</td>
                <td className="px-6 py-4 whitespace-nowrap">6</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800/20 dark:text-yellow-400">
                    Pending
                  </span>
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">James Wilson</td>
                <td className="px-6 py-4 whitespace-nowrap">7:30 PM</td>
                <td className="px-6 py-4 whitespace-nowrap">Table 3</td>
                <td className="px-6 py-4 whitespace-nowrap">2</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Confirmed
                  </span>
                </td>
              </tr>
              <tr>
                <td className="px-6 py-4 whitespace-nowrap">Emily Davis</td>
                <td className="px-6 py-4 whitespace-nowrap">8:00 PM</td>
                <td className="px-6 py-4 whitespace-nowrap">Table 7</td>
                <td className="px-6 py-4 whitespace-nowrap">4</td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400">
                    Confirmed
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </AdminLayout>
  );
};

export default AdminDashboard;