"use client";

import * as React from "react";
import {
  BookOpen,
  FileText,
  Video,
  Link as LinkIcon,
  Download,
  Eye,
  Paperclip,
  Search,
  Filter,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Modal } from "@/components/ui/modal";
import { Select } from "@/components/ui/select";
import { formatDateID, formatBytes } from "@/lib/utils";

interface StudentMaterialsClientProps {
  initialMaterials: any[];
  subjects: any[];
}

export default function StudentMaterialsClient({
  initialMaterials,
  subjects,
}: StudentMaterialsClientProps) {
  const [selectedSubjectId, setSelectedSubjectId] = React.useState("ALL");
  const [search, setSearch] = React.useState("");
  const [previewMaterial, setPreviewMaterial] = React.useState<any | null>(null);

  const filteredMaterials = initialMaterials.filter((m) => {
    const matchSubject =
      selectedSubjectId === "ALL" ||
      m.teacherSubject.subjectId === selectedSubjectId;
    const matchSearch =
      m.title.toLowerCase().includes(search.toLowerCase()) ||
      (m.description || "").toLowerCase().includes(search.toLowerCase());
    return matchSubject && matchSearch;
  });

  return (
    <div className="space-y-6">
      {/* Filters */}
      <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
        <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
          <Select
            value={selectedSubjectId}
            onChange={(e) => setSelectedSubjectId(e.target.value)}
            className="w-full sm:w-60"
          >
            <option value="ALL">Semua Mata Pelajaran</option>
            {subjects.map((s) => (
              <option key={s.id} value={s.id}>
                {s.name}
              </option>
            ))}
          </Select>

          <div className="relative flex-1 sm:w-64">
            <Search className="absolute left-3 top-2.5 h-4 w-4 text-slate-400" />
            <input
              type="text"
              placeholder="Cari materi pembelajaran..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-9 pr-3 py-2 rounded-xl border border-slate-200 text-xs bg-white text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
        </div>

        <span className="text-xs text-slate-500 font-medium">
          Menampilkan {filteredMaterials.length} materi
        </span>
      </div>

      {/* Grid of Materials */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
        {filteredMaterials.map((m) => (
          <Card
            key={m.id}
            className="hover:border-blue-400 hover:shadow-md transition-all flex flex-col justify-between group"
          >
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <Badge variant="primary">Pertemuan {m.meetingNumber}</Badge>
                <span className="text-[10px] text-slate-400 font-mono">
                  {formatDateID(m.createdAt)}
                </span>
              </div>
              <p className="text-[11px] font-bold text-blue-600 mt-1">
                {m.teacherSubject.subject.name}
              </p>
              <CardTitle className="text-base text-slate-900 group-hover:text-blue-600 transition-colors line-clamp-2">
                {m.title}
              </CardTitle>
            </CardHeader>

            <CardContent className="space-y-3 pt-2">
              {m.description && (
                <p className="text-xs text-slate-500 line-clamp-2 leading-relaxed">
                  {m.description}
                </p>
              )}

              <p className="text-[11px] text-slate-400">
                Guru Pengampu: {m.teacherSubject.teacher.fullName}
              </p>

              {/* Resource Badges */}
              <div className="flex flex-wrap gap-1.5 pt-1">
                {m.attachments?.length > 0 && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-slate-600 bg-slate-100 px-2 py-0.5 rounded">
                    <FileText className="h-3 w-3 text-blue-500" />
                    {m.attachments.length} Berkas PDF
                  </span>
                )}
                {m.youtubeUrl && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-rose-600 bg-rose-50 px-2 py-0.5 rounded">
                    <Video className="h-3 w-3" />
                    Video YouTube
                  </span>
                )}
                {m.driveUrl && (
                  <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">
                    <LinkIcon className="h-3 w-3" />
                    Google Drive
                  </span>
                )}
              </div>

              {/* Button */}
              <div className="pt-2 border-t border-slate-100">
                <Button
                  size="sm"
                  className="w-full text-xs font-bold"
                  onClick={() => setPreviewMaterial(m)}
                >
                  <Eye className="mr-1.5 h-3.5 w-3.5" />
                  Buka & Pelajari Materi
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Modal Baca Modul Siswa */}
      {previewMaterial && (
        <Modal
          isOpen={!!previewMaterial}
          onClose={() => setPreviewMaterial(null)}
          title={previewMaterial.title}
          description={`Pertemuan ke-${previewMaterial.meetingNumber} • ${previewMaterial.teacherSubject.subject.name} • Guru: ${previewMaterial.teacherSubject.teacher.fullName}`}
          maxWidth="2xl"
        >
          <div className="space-y-4 text-xs text-slate-700 leading-relaxed">
            {previewMaterial.description && (
              <div className="p-3.5 rounded-xl bg-blue-50/70 border border-blue-100 text-blue-900 font-medium">
                {previewMaterial.description}
              </div>
            )}

            {previewMaterial.content && (
              <div className="whitespace-pre-wrap p-4 rounded-xl bg-slate-50 border border-slate-200 font-sans text-slate-800">
                {previewMaterial.content}
              </div>
            )}

            {/* Links */}
            <div className="space-y-2 pt-2">
              {previewMaterial.youtubeUrl && (
                <div className="flex items-center justify-between p-3 rounded-xl bg-rose-50 border border-rose-100">
                  <div className="flex items-center gap-2 text-rose-700 font-bold">
                    <Video className="h-4 w-4" />
                    <span>Tonton Video YouTube Pembelajaran</span>
                  </div>
                  <a
                    href={previewMaterial.youtubeUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-600 hover:underline font-bold"
                  >
                    Buka Video &rarr;
                  </a>
                </div>
              )}

              {previewMaterial.driveUrl && (
                <div className="flex items-center justify-between p-3 rounded-xl bg-emerald-50 border border-emerald-100">
                  <div className="flex items-center gap-2 text-emerald-700 font-bold">
                    <LinkIcon className="h-4 w-4" />
                    <span>Tautan Materi Google Drive</span>
                  </div>
                  <a
                    href={previewMaterial.driveUrl}
                    target="_blank"
                    rel="noreferrer"
                    className="text-blue-600 hover:underline font-bold"
                  >
                    Buka Drive &rarr;
                  </a>
                </div>
              )}
            </div>

            {/* Attachments */}
            {previewMaterial.attachments?.length > 0 && (
              <div className="space-y-1.5 pt-2 border-t border-slate-100">
                <p className="font-bold text-slate-800">Unduh Berkas Lampiran:</p>
                {previewMaterial.attachments.map((att: any) => (
                  <div
                    key={att.id}
                    className="flex items-center justify-between p-2.5 rounded-xl border border-slate-200 bg-white"
                  >
                    <div className="flex items-center gap-2 truncate">
                      <Paperclip className="h-4 w-4 text-blue-500 shrink-0" />
                      <span className="font-medium text-slate-800 truncate">
                        {att.fileName}
                      </span>
                      <span className="text-slate-400 font-mono">
                        ({formatBytes(att.fileSize)})
                      </span>
                    </div>
                    <a
                      href={att.filePath}
                      target="_blank"
                      rel="noreferrer"
                      className="p-1.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors shrink-0 font-bold flex items-center gap-1"
                    >
                      <Download className="h-3.5 w-3.5" />
                      <span>Unduh</span>
                    </a>
                  </div>
                ))}
              </div>
            )}

            <div className="flex justify-end pt-4 border-t border-slate-100">
              <Button size="sm" onClick={() => setPreviewMaterial(null)}>
                Selesai Membaca
              </Button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  );
}