"use client";

import React from "react";
import Link from "next/link";
import { Briefcase, ChevronRight, FileSpreadsheet } from "lucide-react";
import { toast } from "sonner";

interface PlacementStudent {
  roll: string;
  name: string;
  company: string;
  packageLPA: string;
  role: string;
  offerLetterRef: string;
}

const records: PlacementStudent[] = [
  { roll: "2341112015", name: "Rohan Bose", company: "Taj Hotels (IHCL)", packageLPA: "₹ 5.2 LPA", role: "Management Trainee", offerLetterRef: "IHCL/OL/2026/091" },
  { roll: "2341112028", name: "Sreya Sengupta", company: "The Oberoi Group", packageLPA: "₹ 5.8 LPA", role: "Executive Culinary Trainee", offerLetterRef: "OB/EC/2026/044" },
  { roll: "2341112042", name: "Anupam Pal", company: "Marriott International", packageLPA: "₹ 4.8 LPA", role: "Voyage Trainee", offerLetterRef: "MAR/V/2026/102" },
];

export default function PlacementRecordsPage() {
  return (
    <div className="space-y-5 font-sans">
      <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
        <div>
          <nav className="flex items-center gap-1.5 text-[13px] text-[#64748B] mb-1 font-medium font-sans">
            <Link href="/admin/dashboard" className="hover:text-[#1769E8] hover:underline">
              Home
            </Link>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <Link href="/admin/placements" className="hover:text-[#1769E8] hover:underline">
              Placements
            </Link>
            <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
            <span className="text-[#071A4D] font-semibold">Placement Records</span>
          </nav>

          <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
            Student Placement Offers Registry
          </h1>
          <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
            Confirmed hospitality corporate recruitment offers and compensation packages.
          </p>
        </div>

        <button
          onClick={() => toast.success("Exporting Placement Offer Letters...")}
          className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-[#071A4D] bg-white border border-[#E5EAF0] rounded-lg hover:bg-slate-50 transition-colors shadow-2xs cursor-pointer"
        >
          <FileSpreadsheet className="w-4 h-4 text-emerald-600" />
          <span>Export Offers</span>
        </button>
      </div>

      <div className="rounded-xl bg-white border border-[#E5EAF0] shadow-2xs overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full text-left text-xs border-collapse">
            <thead>
              <tr className="bg-[#F8FAFC] border-b border-[#E5EAF0] text-[#64748B] uppercase tracking-wider font-bold text-[11px]">
                <th className="py-3 px-3">Roll No</th>
                <th className="py-3 px-3">Placed Student</th>
                <th className="py-3 px-3">Company Brand</th>
                <th className="py-3 px-3">Designation</th>
                <th className="py-3 px-3 text-center">Package (CTC)</th>
                <th className="py-3 px-3 font-mono">Offer Letter Ref</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E5EAF0] text-[#334155]">
              {records.map((r) => (
                <tr key={r.roll} className="hover:bg-[#F8FAFC] transition-colors">
                  <td className="py-3.5 px-3 font-mono font-bold text-[#1769E8]">{r.roll}</td>
                  <td className="py-3.5 px-3 font-semibold text-[#071A4D]">{r.name}</td>
                  <td className="py-3.5 px-3 text-[#334155]">{r.company}</td>
                  <td className="py-3.5 px-3 text-[#64748B]">{r.role}</td>
                  <td className="py-3.5 px-3 text-center font-bold text-emerald-700">{r.packageLPA}</td>
                  <td className="py-3.5 px-3 font-mono text-xs text-[#64748B]">{r.offerLetterRef}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}