"use client";

import React, { useState } from "react";
import Link from "next/link";
import { UploadCloud, FileSpreadsheet, CheckCircle2, ChevronRight, Download } from "lucide-react";
import { toast } from "sonner";

export default function BulkImportStudentsPage() {
  const [dragActive, setDragActive] = useState(false);
  const [fileName, setFileName] = useState<string | null>(null);

  const handleUpload = () => {
    if (!fileName) {
      toast.error("Please select a file to import");
      return;
    }
    toast.success("Successfully imported 120 student records from file.");
    setFileName(null);
  };

  return (
    <div className="space-y-5 font-sans max-w-4xl">
      <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/people/students" className="hover:text-[#1769E8] hover:underline">
            Students
          </Link>
          <ChevronRight className="w-3.5 h-3.5 text-[#94A3B8]" />
          <span className="text-[#071A4D] font-semibold">Bulk Import</span>
        </nav>

        <h1 className="text-3xl font-bold font-heading text-[#071A4D] tracking-tight">
          Bulk Student Data Import
        </h1>
        <p className="text-[15px] text-[#64748B] mt-1 font-normal font-sans">
          Upload batch CSV or Excel files containing student registration and roll numbers.
        </p>
      </div>

      <div className="rounded-xl bg-white border border-[#E5EAF0] p-6 shadow-2xs space-y-6">
        <div className="flex items-center justify-between p-4 rounded-lg bg-blue-50/60 border border-blue-200 text-xs text-blue-900">
          <div>
            <div className="font-bold">Need the standard NCHMCT template?</div>
            <div className="text-blue-700 mt-0.5">Download our pre-formatted CSV template with all mandatory column headers.</div>
          </div>
          <button
            onClick={() => toast.success("Downloading IHM_Student_Import_Template.csv...")}
            className="px-3 py-1.5 rounded-md bg-white border border-blue-300 text-blue-700 font-semibold hover:bg-blue-50 flex items-center gap-1.5 shrink-0 cursor-pointer"
          >
            <Download className="w-3.5 h-3.5" />
            <span>Download CSV Template</span>
          </button>
        </div>

        {/* Drag and Drop Zone */}
        <div
          onDragOver={(e) => { e.preventDefault(); setDragActive(true); }}
          onDragLeave={() => setDragActive(false)}
          onDrop={(e) => {
            e.preventDefault();
            setDragActive(false);
            if (e.dataTransfer.files[0]) {
              setFileName(e.dataTransfer.files[0].name);
            }
          }}
          className={`border-2 border-dashed rounded-xl p-10 text-center transition-all ${
            dragActive ? "border-[#1769E8] bg-blue-50/50" : "border-[#D8E0EA] hover:border-slate-300"
          }`}
        >
          <UploadCloud className="w-12 h-12 text-[#1769E8] mx-auto mb-3" />
          <div className="text-sm font-bold text-[#071A4D]">
            {fileName ? fileName : "Drag & drop your CSV or Excel file here"}
          </div>
          <div className="text-xs text-[#64748B] mt-1">
            Supports .csv, .xlsx, and .xls (Max file size: 10MB)
          </div>

          <label className="inline-block mt-4 px-4 py-2 text-xs font-semibold text-[#1769E8] bg-white border border-[#1769E8] rounded-lg hover:bg-blue-50 cursor-pointer">
            Browse File
            <input
              type="file"
              accept=".csv,.xlsx,.xls"
              className="hidden"
              onChange={(e) => {
                if (e.target.files?.[0]) setFileName(e.target.files[0].name);
              }}
            />
          </label>
        </div>

        {fileName && (
          <div className="flex items-center justify-between p-3 rounded-lg bg-emerald-50 border border-emerald-200 text-emerald-900 text-xs">
            <div className="flex items-center gap-2">
              <CheckCircle2 className="w-4 h-4 text-emerald-600" />
              <span>Selected file: <strong>{fileName}</strong> ready for parsing.</span>
            </div>
            <button
              onClick={handleUpload}
              className="px-4 py-1.5 rounded-lg bg-emerald-600 text-white font-bold hover:bg-emerald-700 cursor-pointer"
            >
              Start Import Process
            </button>
          </div>
        )}
      </div>
    </div>
  );
}