"use client";
import { useState, useEffect } from "react";
import { databases, Query } from "../lib/appwrite";
import { DATABASE_ID, COLLECTION_ID } from "../lib/api";
import { useTheme } from "../context/ThemeContext";

export default function TokenTable({ statusFilter }) {
  // ... (keep all your existing state and functions)

  return (
    <div className={`transition-colors duration-300 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>
      <input
        type="text"
        placeholder="Search by token or name"
        className={`mb-4 p-2 border rounded w-full transition-colors ${
          darkMode 
            ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:ring-blue-500 focus:border-blue-500' 
            : 'bg-white border-gray-300 placeholder-gray-500 focus:ring-blue-500 focus:border-blue-500'
        }`}
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />

      {filteredEntries.length === 0 ? (
        <div className={`p-4 rounded ${darkMode ? 'bg-gray-800' : 'bg-gray-50'}`}>
          No entries found.
        </div>
      ) : (
        <>
          {/* Mobile View (Cards) */}
          <div className="lg:hidden space-y-3">
            {currentEntries.map((entry) => (
              <div
                key={entry.$id}
                className={`p-4 rounded-lg border ${
                  darkMode ? 'bg-gray-900 border-gray-700' : 'bg-white border-gray-200'
                }`}
              >
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <p className="font-semibold">Token: {entry.tokenNumber}</p>
                    <p className="text-sm">{entry.patientName}</p>
                  </div>
                  <span
                    className={`px-2 py-1 rounded-full text-xs font-semibold ${
                      entry.status === "done"
                        ? darkMode 
                          ? "bg-green-900 text-green-100" 
                          : "bg-green-100 text-green-800"
                        : entry.status === "booked"
                          ? darkMode 
                            ? "bg-yellow-900 text-yellow-100" 
                            : "bg-yellow-100 text-yellow-800"
                          : darkMode 
                            ? "bg-red-900 text-red-100" 
                            : "bg-red-100 text-red-800"
                    }`}
                  >
                    {entry.status === "booked" ? "In-Queue" : entry.status}
                  </span>
                </div>
                
                {entry.status === "booked" && (
                  <div className="flex gap-2 mt-3">
                    <button
                      onClick={() => updateStatus(entry.$id, "done")}
                      className={`border rounded-full px-3 py-1 text-xs transition-colors ${
                        darkMode
                          ? 'border-green-400 text-green-400 hover:bg-green-900'
                          : 'border-green-600 text-green-600 hover:bg-green-50'
                      }`}
                    >
                      Done
                    </button>
                    <button
                      onClick={() => updateStatus(entry.$id, "missed")}
                      className={`border rounded-full px-3 py-1 text-xs transition-colors ${
                        darkMode
                          ? 'border-red-400 text-red-400 hover:bg-red-900'
                          : 'border-red-600 text-red-600 hover:bg-red-50'
                      }`}
                    >
                      Missed
                    </button>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Desktop View (Table) */}
          <div className="hidden lg:block overflow-x-auto">
            <table className="w-full border-collapse">
              <thead className={darkMode ? "bg-gray-800" : "bg-gray-100"}>
                <tr>
                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Token</th>
                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Name</th>
                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Status</th>
                  <th className={`p-3 text-left ${darkMode ? 'text-gray-200' : 'text-gray-700'}`}>Actions</th>
                </tr>
              </thead>
              <tbody>
                {currentEntries.map((entry) => (
                  <tr
                    key={entry.$id}
                    className={`${darkMode ? 'bg-gray-900 border-gray-700 hover:bg-gray-800' : 'bg-white border-gray-200 hover:bg-gray-50'}`}
                  >
                    <td className="p-3 font-mono">{entry.tokenNumber}</td>
                    <td className="p-3">{entry.patientName}</td>
                    <td className="p-3">
                      <span
                        className={`px-2 py-1 rounded-full text-xs font-semibold ${
                          entry.status === "done"
                            ? darkMode 
                              ? "bg-green-900 text-green-100" 
                              : "bg-green-100 text-green-800"
                            : entry.status === "booked"
                              ? darkMode 
                                ? "bg-yellow-900 text-yellow-100" 
                                : "bg-yellow-100 text-yellow-800"
                              : darkMode 
                                ? "bg-red-900 text-red-100" 
                                : "bg-red-100 text-red-800"
                        }`}
                      >
                        {entry.status === "booked" ? "In-Queue" : entry.status}
                      </span>
                    </td>
                    <td className="p-3 flex gap-2">
                      {entry.status === "booked" && (
                        <>
                          <button
                            onClick={() => updateStatus(entry.$id, "done")}
                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${
                              darkMode
                                ? 'border-green-400 text-green-400 hover:bg-green-900'
                                : 'border-green-600 text-green-600 hover:bg-green-50'
                            }`}
                          >
                            Done
                          </button>
                          <button
                            onClick={() => updateStatus(entry.$id, "missed")}
                            className={`border rounded-full px-2 py-1 text-xs transition-colors ${
                              darkMode
                                ? 'border-red-400 text-red-400 hover:bg-red-900'
                                : 'border-red-600 text-red-600 hover:bg-red-50'
                            }`}
                          >
                            Missed
                          </button>
                        </>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Pagination (Works for both views) */}
          <div className={`flex justify-between items-center mt-4 p-2 rounded ${
            darkMode ? 'bg-gray-800' : 'bg-gray-100'
          }`}>
            <button
              disabled={currentPage === 1}
              onClick={() => setCurrentPage((prev) => prev - 1)}
              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
                darkMode 
                  ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
                  : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
              }`}
            >
              Previous
            </button>
            <span className="text-sm">
              Page {currentPage} of {totalPages}
            </span>
            <button
              disabled={currentPage === totalPages}
              onClick={() => setCurrentPage((prev) => prev + 1)}
              className={`px-3 py-1 border rounded disabled:opacity-50 transition-colors ${
                darkMode 
                  ? 'border-gray-600 hover:bg-gray-700 disabled:hover:bg-transparent' 
                  : 'border-gray-300 hover:bg-gray-200 disabled:hover:bg-transparent'
              }`}
            >
              Next
            </button>
          </div>
        </>
      )}
    </div>
  );
}