import { Card, CardContent } from "@/components/ui/card"
import { Folder, FileText, Download, PlaySquare } from "lucide-react"

export default function MaterialsPage() {
  const folders = [
    { name: "Physics Formula Sheets", items: 12, color: "text-blue-500" },
    { name: "Organic Chem Mind Maps", items: 8, color: "text-emerald-500" },
    { name: "Biology NCERT Highlights", items: 22, color: "text-rose-500" },
    { name: "Past Year Papers (2015-2025)", items: 10, color: "text-amber-500" },
  ]

  const recentFiles = [
    { name: "Kinematics 1D & 2D Rapid Revision.pdf", type: "PDF", size: "2.4 MB" },
    { name: "S-Block Elements Trick Video.mp4", type: "Video", size: "45 MB" },
    { name: "Human Reproduction Master Notes.pdf", type: "PDF", size: "8.1 MB" },
  ]

  return (
    <div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-6xl mx-auto">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Study Materials</h1>
        <p className="text-muted-foreground mt-1 font-medium">High-yield notes, mind maps, and video lectures.</p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {folders.map((folder, i) => (
          <Card key={i} className="hover:bg-secondary/50 cursor-pointer transition-colors border-border shadow-none">
            <CardContent className="p-6">
              <Folder size={40} className={`${folder.color} mb-4`} />
              <h3 className="font-bold">{folder.name}</h3>
              <p className="text-sm text-muted-foreground mt-1 font-medium">{folder.items} Files</p>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="pt-6">
        <h2 className="text-xl font-bold border-b border-border pb-2 mb-4">Recently Accessed</h2>
        <div className="bg-secondary/10 border border-border rounded-xl overflow-hidden">
          <table className="w-full text-left text-sm">
            <thead className="bg-secondary/30 text-muted-foreground border-b border-border">
              <tr>
                <th className="px-6 py-4 font-semibold">File Name</th>
                <th className="px-6 py-4 font-semibold">Type</th>
                <th className="px-6 py-4 font-semibold">Size</th>
                <th className="px-6 py-4 font-semibold text-right">Download</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-border">
              {recentFiles.map((file, i) => (
                <tr key={i} className="hover:bg-secondary/20 transition-colors cursor-pointer group">
                  <td className="px-6 py-4 font-medium flex items-center gap-3">
                    {file.type === 'PDF' ? <FileText size={18} className="text-red-400" /> : <PlaySquare size={18} className="text-blue-400" />}
                    {file.name}
                  </td>
                  <td className="px-6 py-4 text-muted-foreground">{file.type}</td>
                  <td className="px-6 py-4 text-muted-foreground">{file.size}</td>
                  <td className="px-6 py-4 text-right">
                    <button className="p-2 hover:text-[#00F0FF] hover:bg-secondary rounded-lg transition-colors inline-block"><Download size={18} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}