import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Search, Plus, Filter, MoreHorizontal, Edit, Trash } from "lucide-react"

export default function QuestionsPage() {
  const questions = [
    { id: "Q-NEET-2026-001", subject: "Physics", chapter: "Thermodynamics", type: "MCQ", difficulty: "Hard", status: "Active" },
    { id: "Q-NEET-2026-002", subject: "Chemistry", chapter: "Organic Chemistry", type: "Assertion/Reason", difficulty: "Medium", status: "Active" },
    { id: "Q-JEE-2026-003", subject: "Mathematics", chapter: "Calculus", type: "Numerical", difficulty: "Expert", status: "Review" },
    { id: "Q-NEET-2026-004", subject: "Biology", chapter: "Genetics", type: "MCQ", difficulty: "Easy", status: "Active" },
    { id: "Q-JEE-2026-005", subject: "Physics", chapter: "Mechanics", type: "MCQ", difficulty: "Medium", status: "Draft" },
  ]

  return (
    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Question Bank</h1>
          <p className="text-muted-foreground mt-1">Manage and curate the global repository for NEET/JEE.</p>
        </div>
        <div className="flex gap-4">
          <Button variant="outline" className="border-border hover:bg-secondary"><Filter size={16} className="mr-2"/> Filter</Button>
          <Button className="bg-[#00F0FF] text-background hover:bg-[#00F0FF]/90 font-bold"><Plus size={16} className="mr-2"/> Add Question</Button>
        </div>
      </div>

      <div className="bg-secondary/10 border border-border rounded-xl overflow-hidden backdrop-blur-sm">
        <div className="p-4 border-b border-border flex items-center gap-4">
          <div className="relative flex-1 max-w-md">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
            <input 
              type="text" 
              placeholder="Search by ID, concept, or chapter..." 
              className="w-full bg-background border border-border rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-[#00F0FF]"
            />
          </div>
        </div>
        
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm whitespace-nowrap">
            <thead className="bg-secondary/30 text-muted-foreground border-b border-border">
              <tr>
                <th className="px-6 py-4 font-semibold">Question ID</th>
                <th className="px-6 py-4 font-semibold">Subject</th>
                <th className="px-6 py-4 font-semibold">Chapter</th>
                <th className="px-6 py-4 font-semibold">Type</th>
                <th className="px-6 py-4 font-semibold">Difficulty</th>
                <th className="px-6 py-4 font-semibold">Status</th>
                <th className="px-6 py-4 font-semibold text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {questions.map((q) => (
                <tr key={q.id} className="hover:bg-secondary/20 transition-colors">
                  <td className="px-6 py-4 font-mono font-medium">{q.id}</td>
                  <td className="px-6 py-4">
                    <Badge variant="outline" className="bg-background">{q.subject}</Badge>
                  </td>
                  <td className="px-6 py-4">{q.chapter}</td>
                  <td className="px-6 py-4 text-muted-foreground">{q.type}</td>
                  <td className="px-6 py-4">
                    <Badge className={
                      q.difficulty === "Expert" ? "bg-red-500/10 text-red-500 border-red-500/20" :
                      q.difficulty === "Hard" ? "bg-orange-500/10 text-orange-500 border-orange-500/20" :
                      q.difficulty === "Medium" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" :
                      "bg-green-500/10 text-green-500 border-green-500/20"
                    } variant="outline">
                      {q.difficulty}
                    </Badge>
                  </td>
                  <td className="px-6 py-4">
                    <Badge className={
                      q.status === "Active" ? "bg-[#00F0FF]/10 text-[#00F0FF] border-[#00F0FF]/20" :
                      q.status === "Review" ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20" :
                      "bg-muted/50 text-muted-foreground border-border"
                    } variant="outline">
                      {q.status}
                    </Badge>
                  </td>
                  <td className="px-6 py-4 text-right">
                    <div className="flex justify-end gap-2 text-muted-foreground">
                      <button className="p-1.5 hover:text-[#00F0FF] hover:bg-secondary rounded"><Edit size={16} /></button>
                      <button className="p-1.5 hover:text-red-500 hover:bg-secondary rounded"><Trash size={16} /></button>
                      <button className="p-1.5 hover:text-foreground hover:bg-secondary rounded"><MoreHorizontal size={16} /></button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="p-4 border-t border-border flex justify-between items-center text-sm text-muted-foreground">
          <span>Showing 1 to 5 of 12,405 entries</span>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" disabled>Previous</Button>
            <Button variant="outline" size="sm">Next</Button>
          </div>
        </div>
      </div>
    </div>
  )
}