"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import axiosInstance from "@/lib/axiosInstance";
import { fmt12 } from "@/lib/timeslot-utils";

interface TodayClass {
  id: number;
  start_time: string;
  end_time: string;
  student_name: string;
  student_id: string;
}
interface Enquiry {
  id: string;
  name: string;
  email: string;
  subject: string | null;
  status: string | null;
  created_at: string;
}
interface ChangeRequest {
  id: number;
  student_name: string;
  student_id: string;
  requested_date: string;
  requested_start_time: string;
  requested_end_time: string;
  created_at: string;
}
interface DashboardData {
  stats: {
    totalStudents: number;
    activeStudents: number;
    totalEvents: number;
    activeEvents: number;
    totalEnquiries: number;
    pendingEnquiries: number;
    totalChangeRequests: number;
    pendingChangeRequests: number;
    todaysClassCount: number;
  };
  todaysClasses: TodayClass[];
  recentEnquiries: Enquiry[];
  recentChangeRequests: ChangeRequest[];
}

const enquiryBadgeClass = (status: string | null) => {
  switch (status) {
    case "Resolved": return "bg-success";
    case "In Progress": return "bg-info text-dark";
    case "Pending": return "bg-warning text-dark";
    default: return "bg-secondary";
  }
};

export default function Dashboard() {
  const router = useRouter();
  const [data, setData] = useState<DashboardData | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadDashboard();
  }, []);

  const loadDashboard = async () => {
    setLoading(true);
    try {
      const { data } = await axiosInstance.get("/admin/dashboard");
      setData(data.data);
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = async () => {
    try {
      const res = await fetch("/api/admin/logout", { method: "POST" });
      const result = await res.json();
      if (result.success) {
        router.push("/admin/login");
      }
    } catch (err) {
      console.log(err);
    }
  };

  const stats = data?.stats;

  return (
    <div className="dashboard-page">
      <div className="admin-page-wrapper">
        {/* <div className="admin-page-header mb-4">
          <div className="d-flex justify-content-between align-items-center">
            <div>
              <h2 className="admin-page-title">Admin Dashboard</h2>
              <p className="admin-page-subtitle">Overview of students, events, enquiries, and schedule requests</p>
            </div>
            <button className="btn btn-light btn-sm" onClick={handleLogout}>
              <i className="bi bi-box-arrow-right me-1" />
              Logout
            </button>
          </div>
        </div> */}

        {/* Stat cards */}
        <div className="row gx-3 gx-lg-4 mb-4">
          {/* Students */}
          <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 mb-3">
            <Link href="/admin/students" className="text-decoration-none">
              <div className="card stat-orb orb-indigo">
                <div className="card-body">
                  <div className="orb-icon">
                    <i className="bi bi-people"></i>
                  </div>
                  <div className="orb-value">{loading ? "—" : stats?.totalStudents ?? 0}</div>
                  <div className="orb-label">Total Students</div>
                  <div className="orb-change up">
                    <i className="bi bi-check-circle me-1" />
                    {loading ? "—" : stats?.activeStudents ?? 0} active
                  </div>
                </div>
              </div>
            </Link>
          </div>

          {/* Events */}
          <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 mb-3">
            <Link href="/admin/events" className="text-decoration-none">
              <div className="card stat-orb orb-emerald">
                <div className="card-body">
                  <div className="orb-icon">
                    <i className="bi bi-calendar4-week"></i>
                  </div>
                  <div className="orb-value">{loading ? "—" : stats?.totalEvents ?? 0}</div>
                  <div className="orb-label">Events</div>
                  <div className="orb-change up">
                    <i className="bi bi-check-circle me-1" />
                    {loading ? "—" : stats?.activeEvents ?? 0} active
                  </div>
                </div>
              </div>
            </Link>
          </div>

          {/* Contact Enquiries */}
          <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 mb-3">
            <Link href="/admin/contact-enquiries" className="text-decoration-none">
              <div className="card stat-orb orb-amber">
                <div className="card-body">
                  <div className="orb-icon">
                    <i className="bi bi-chat-text"></i>
                  </div>
                  <div className="orb-value">{loading ? "—" : stats?.totalEnquiries ?? 0}</div>
                  <div className="orb-label">Contact Enquiries</div>
                  <div className="orb-change down">
                    <i className="bi bi-hourglass-split me-1" />
                    {loading ? "—" : stats?.pendingEnquiries ?? 0} pending
                  </div>
                </div>
              </div>
            </Link>
          </div>

          {/* Schedule Change Requests */}
          <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6 col-6 mb-3">
            <Link href="/admin/schedule-requests" className="text-decoration-none">
              <div className="card stat-orb orb-cyan">
                <div className="card-body">
                  <div className="orb-icon">
                    <i className="bi bi-arrow-repeat"></i>
                  </div>
                  <div className="orb-value">{loading ? "—" : stats?.totalChangeRequests ?? 0}</div>
                  <div className="orb-label">Schedule Change Requests</div>
                  <div className="orb-change down">
                    <i className="bi bi-hourglass-split me-1" />
                    {loading ? "—" : stats?.pendingChangeRequests ?? 0} pending
                  </div>
                </div>
              </div>
            </Link>
          </div>
        </div>

        <div className="row g-4">
          {/* Today's classes */}
          <div className="col-lg-4">
            <div className="card-theme p-4 h-100">
              <h6 className="mb-3">Today's Classes</h6>

              {loading && <p className="text-muted small mb-0">Loading...</p>}

              {!loading && (!data || data.todaysClasses.length === 0) && (
                <p className="text-muted small mb-0">No classes scheduled for today.</p>
              )}

              {!loading &&
                data?.todaysClasses.map((c) => (
                  <div key={c.id} className="border rounded p-2 mb-2 d-flex justify-content-between align-items-center">
                    <div>
                      <p className="fw-medium mb-0 small">{c.student_name}</p>
                      <p className="text-muted mb-0" style={{ fontSize: 11 }}>{c.student_id}</p>
                    </div>
                    <span className="badge bg-primary-subtle text-primary">
                      {fmt12(c.start_time)} - {fmt12(c.end_time)}
                    </span>
                  </div>
                ))}
            </div>
          </div>

          {/* Recent contact enquiries */}
          <div className="col-lg-4">
            <div className="card-theme p-4 h-100">
              <div className="d-flex justify-content-between align-items-center mb-3">
                <h6 className="mb-0">Recent Enquiries</h6>
                <Link href="/admin/contact-enquiries" className="small">View all</Link>
              </div>

              {loading && <p className="text-muted small mb-0">Loading...</p>}

              {!loading && (!data || data.recentEnquiries.length === 0) && (
                <p className="text-muted small mb-0">No enquiries yet.</p>
              )}

              {!loading &&
                data?.recentEnquiries.map((e) => (
                  <div key={e.id} className="border rounded p-2 mb-2">
                    <div className="d-flex justify-content-between align-items-start">
                      <p className="fw-medium mb-0 small">{e.name}</p>
                      <span className={`badge ${enquiryBadgeClass(e.status)}`} style={{ fontSize: 10 }}>
                        {e.status ?? "Pending"}
                      </span>
                    </div>
                    <p className="text-muted mb-0" style={{ fontSize: 11 }}>{e.subject || e.email}</p>
                  </div>
                ))}
            </div>
          </div>

          {/* Pending schedule change requests */}
          <div className="col-lg-4">
            <div className="card-theme p-4 h-100">
              <div className="d-flex justify-content-between align-items-center mb-3">
                <h6 className="mb-0">Pending Change Requests</h6>
                <Link href="/admin/schedule-requests" className="small">View all</Link>
              </div>

              {loading && <p className="text-muted small mb-0">Loading...</p>}

              {!loading && (!data || data.recentChangeRequests.length === 0) && (
                <p className="text-muted small mb-0">No pending requests.</p>
              )}

              {!loading &&
                data?.recentChangeRequests.map((r) => (
                  <div key={r.id} className="border rounded p-2 mb-2 d-flex justify-content-between align-items-center">
                    <div>
                      <p className="fw-medium mb-0 small">{r.student_name}</p>
                      <p className="text-muted mb-0" style={{ fontSize: 11 }}>{r.requested_date}</p>
                    </div>
                    <span className="badge bg-warning-subtle text-warning-emphasis">
                      {fmt12(r.requested_start_time)} - {fmt12(r.requested_end_time)}
                    </span>
                  </div>
                ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}