"use client";

import React from "react";
import { Bell, Calendar, AlertTriangle, FileText, Pin } from "lucide-react";

interface NoticeItem {
  id: string;
  title: string;
  category: "STATUTORY" | "EXAMINATION" | "HOLIDAY" | "GENERAL";
  date: string;
  isPinned?: boolean;
  content: string;
}

const mockNotices: NoticeItem[] = [
  {
    id: "not-1",
    title: "NCHMCT Mid-Term Attendance Condonation Submission Deadline",
    category: "STATUTORY",
    date: "05-Oct-2026",
    isPinned: true,
    content:
      "All students falling in the Warning and Critical tiers (65%–74.9%) are hereby advised to submit medical fitness certificates and institutional duty slips to the Academic Office by 15-Oct-2026. No claims will be entertained after the cutoff date.",
  },
  {
    id: "not-2",
    title: "Dussehra & Autumn Term Break Calendar Notification",
    category: "HOLIDAY",
    date: "02-Oct-2026",
    isPinned: true,
    content:
      "The institute will remain closed on 19-Oct-2026 on the occasion of Dussehra. All scheduled classes are marked with 'H' (Holiday) on the attendance register with zero shortage impact.",
  },
  {
    id: "not-3",
    title: "Semester III Practical Culinary Chef Uniform & Grooming Audit",
    category: "GENERAL",
    date: "25-Sep-2026",
    content:
      "Students attending Food Production practicals (BTK-B) must be in complete chef whites with toque and safety shoes. Incomplete uniform will result in denial of kitchen entry.",
  },
];

export default function StudentNoticesPage() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="border-b border-slate-200 pb-4 dark:border-slate-800">
        <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
          <Bell className="w-3.5 h-3.5" />
          <span>Official Bulletins</span>
        </div>
        <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Institutional Notices & Statutory Circulars
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Official notifications regarding exam eligibility, attendance cutoff dates, and holiday declarations.
        </p>
      </div>

      <div className="space-y-3">
        {mockNotices.map((notice) => (
          <div
            key={notice.id}
            className={`p-4 rounded-lg border bg-white shadow-sm space-y-2 dark:bg-slate-900 ${
              notice.isPinned
                ? "border-blue-200 bg-blue-50/20 dark:border-blue-900 dark:bg-blue-950/20"
                : "border-slate-200 dark:border-slate-800"
            }`}
          >
            <div className="flex items-center justify-between gap-2">
              <div className="flex items-center gap-2">
                {notice.isPinned && (
                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800">
                    <Pin className="w-2.5 h-2.5" />
                    PINNED
                  </span>
                )}
                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-2 py-0.5 rounded dark:bg-slate-800 dark:text-slate-400">
                  {notice.category}
                </span>
              </div>
              <span className="text-[11px] font-mono text-slate-500">{notice.date}</span>
            </div>

            <h3 className="text-sm font-bold text-slate-900 tracking-tight dark:text-slate-100">
              {notice.title}
            </h3>

            <p className="text-xs text-slate-600 leading-relaxed dark:text-slate-300">
              {notice.content}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}