import {
  BarChart3,
  Calendar,
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Globe,
  Link2,
  UserCheck,
  Users,
} from 'lucide-react';
import { generatePath, Link } from 'react-router-dom';

import { formatAttendanceDate } from '@/business/campus-attendance/selectors';
import { AttendanceSummaryCard } from '@/components/campus-attendance/AttendanceSummaryCard';
import {
  percentageBackgroundClass,
  percentageBorderClass,
  percentageTextClass,
} from '@/components/campus-attendance/styles';
import type {
  CampusAttendancePageActions,
  CampusAttendancePageState,
} from '@/components/campus-attendance/types';
import { useScopeContext } from '@/contexts/scope-context';
import { APP_ROUTE_PATHS } from '@/shared/constants/routes';

type SuperintendentAttendanceViewProps = {
  state: CampusAttendancePageState;
  actions: CampusAttendancePageActions;
};

export function SuperintendentAttendanceView({ state, actions }: SuperintendentAttendanceViewProps) {
  const { selectedTenant } = useScopeContext();
  const {
    today,
    weekStart,
    overallStats,
    combinedStats,
    staffSummary,
    campusStats,
    attendanceChildStats,
    expandedCampus,
    scopeModel,
  } = state;
  const staffRecordTotal = staffSummary.summary
    ? Math.max(
        staffSummary.summary.staffCount,
        staffSummary.summary.present + staffSummary.summary.late + staffSummary.summary.absent,
      )
    : null;
  const staffPresentOrLate = staffSummary.summary
    ? staffSummary.summary.present + staffSummary.summary.late
    : null;
  const staffAttendanceHelper = staffRecordTotal && staffPresentOrLate !== null
    ? `${staffPresentOrLate}/${staffRecordTotal} present or late`
    : scopeModel.aggregateHelper;
  const scopeRouteState = { __scope: selectedTenant };

  return (
    <>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <AttendanceSummaryCard
          label="Combined Attendance"
          value={combinedStats.combinedTodayPct !== null ? `${combinedStats.combinedTodayPct}%` : 'N/A'}
          helper={formatAttendanceDate(today)}
          icon={Calendar}
          percentage={combinedStats.combinedTodayPct}
        />
        <AttendanceSummaryCard
          label="Student Attendance"
          value={combinedStats.studentTodayPct !== null ? `${combinedStats.studentTodayPct}%` : 'N/A'}
          helper={scopeModel.aggregateHelper}
          icon={Users}
          percentage={combinedStats.studentTodayPct}
        />
        <AttendanceSummaryCard
          label="Staff Attendance"
          value={combinedStats.staffTodayPct !== null ? `${combinedStats.staffTodayPct}%` : 'N/A'}
          helper={staffAttendanceHelper}
          icon={UserCheck}
          percentage={combinedStats.staffTodayPct}
        />
        <AttendanceSummaryCard
          label="Weekly Student Average"
          value={combinedStats.studentWeekPct !== null ? `${combinedStats.studentWeekPct}%` : 'N/A'}
          helper={`Week of ${formatAttendanceDate(weekStart)}`}
          icon={BarChart3}
          percentage={combinedStats.studentWeekPct}
        />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <AttendanceSummaryCard
          label="Students Enrolled Today"
          value={overallStats.todayEnrolled || 'N/A'}
          helper={scopeModel.aggregateHelper}
          icon={Users}
          color="blue"
        />
        <AttendanceSummaryCard
          label="Students Present Today"
          value={overallStats.todayPresent || 'N/A'}
          helper={scopeModel.aggregateHelper}
          icon={UserCheck}
          color="violet"
        />
        <AttendanceSummaryCard
          label="Staff Records Today"
          value={staffSummary.summary?.recordsCount ?? 'N/A'}
          helper={scopeModel.aggregateHelper}
          icon={UserCheck}
          color="blue"
        />
        <AttendanceSummaryCard
          label="Active Staff"
          value={staffSummary.summary?.staffCount || 'N/A'}
          helper={scopeModel.aggregateHelper}
          icon={Users}
          color="violet"
        />
      </div>

      {attendanceChildStats.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {attendanceChildStats.map((child) => (
          <div key={`${child.level}:${child.id}`} className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden hover:border-slate-600/50 transition-all">
            <Link
              to={generatePath(APP_ROUTE_PATHS.attendanceDetails, { level: child.level, tenantId: child.id })}
              state={scopeRouteState}
              className={`block bg-gradient-to-r ${child.bgGradient} p-4 focus:outline-none focus:ring-2 focus:ring-white/60`}
            >
              <div className="flex items-center justify-between">
                <div>
                    <h3 className="font-bold text-white text-lg hover:text-white/90">{child.mascot}</h3>
                    <p className="text-white/70 text-xs hover:text-white">{child.fullName}</p>
                </div>
                {child.isOnline && (
                  <span className="px-2 py-0.5 bg-white/20 text-white text-[10px] rounded-full font-medium">Online</span>
                )}
              </div>
            </Link>
            <div className="p-4 space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <div className={`rounded-xl p-3 text-center ${percentageBackgroundClass(child.todayPct)} border ${percentageBorderClass(child.todayPct)}`}>
                  <p className="text-[10px] text-slate-400 mb-1">Today</p>
                  <p className={`text-xl font-bold ${percentageTextClass(child.todayPct)}`}>
                    {child.todayPct !== null ? `${child.todayPct}%` : 'N/A'}
                  </p>
                </div>
                <div className={`rounded-xl p-3 text-center ${percentageBackgroundClass(child.weekAvg)} border ${percentageBorderClass(child.weekAvg)}`}>
                  <p className="text-[10px] text-slate-400 mb-1">Week Avg</p>
                  <p className={`text-xl font-bold ${percentageTextClass(child.weekAvg)}`}>
                    {child.weekAvg !== null ? `${child.weekAvg}%` : 'N/A'}
                  </p>
                </div>
              </div>
              {child.todayRecord && (
                <div className="grid grid-cols-3 gap-2 text-center">
                  <div className="bg-slate-700/30 rounded-lg p-2">
                    <p className="text-xs text-slate-400">Enrolled</p>
                    <p className="text-sm font-bold text-white">{child.todayRecord.total_enrolled}</p>
                  </div>
                  <div className="bg-slate-700/30 rounded-lg p-2">
                    <p className="text-xs text-slate-400">Present</p>
                    <p className="text-sm font-bold text-emerald-400">{child.todayRecord.total_present}</p>
                  </div>
                  <div className="bg-slate-700/30 rounded-lg p-2">
                    <p className="text-xs text-slate-400">Absent</p>
                    <p className="text-sm font-bold text-red-400">{child.todayRecord.total_absent}</p>
                  </div>
                </div>
              )}
              <button
                type="button"
                onClick={() => actions.setExpandedCampus(expandedCampus === child.id ? null : child.id)}
                className="w-full flex items-center justify-center gap-1 text-xs text-slate-400 hover:text-white py-1 transition-colors"
              >
                {expandedCampus === child.id ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                {expandedCampus === child.id ? 'Hide History' : 'View History'}
              </button>
              {expandedCampus === child.id && child.recentData.length > 0 && (
                <div className="space-y-1.5 max-h-48 overflow-y-auto">
                  {child.recentData.map((record) => (
                    <div key={record.id} className="flex items-center justify-between px-3 py-2 bg-slate-700/20 rounded-lg text-xs">
                      <span className="text-slate-400">{formatAttendanceDate(record.date)}</span>
                      <div className="flex items-center gap-3">
                        <span className="text-slate-500">{record.total_present}/{record.total_enrolled}</span>
                        <span className={`font-bold ${percentageTextClass(record.attendance_percentage)}`}>
                          {record.attendance_percentage.toFixed(1)}%
                        </span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
          ))}
        </div>
      ) : (
        <div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-10 text-center">
          <Users size={40} className="text-slate-600 mx-auto mb-3" />
          <p className="text-slate-400 text-sm">{scopeModel.emptyHistoryMessage}</p>
        </div>
      )}

      {campusStats.length > 0 && (
      <div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
        <h3 className="font-semibold text-white flex items-center gap-2 mb-4">
          <Link2 size={18} className="text-orange-400" />
          Campus Attendance System Links
        </h3>
        <div className="space-y-2">
          {campusStats.map((campus) => (
            <div key={campus.id} className="flex items-center justify-between p-3 bg-slate-700/20 rounded-xl">
              <div className="flex items-center gap-3">
                <div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${campus.bgGradient} flex items-center justify-center`}>
                  <span className="text-white text-xs font-bold">{campus.mascot[0]}</span>
                </div>
                <div>
                  <p className="text-sm font-medium text-white">{campus.fullName}</p>
                  {campus.config?.updated_by && (
                    <p className="text-[10px] text-slate-500">Updated by {campus.config.updated_by}</p>
                  )}
                </div>
              </div>
              {campus.config?.attendance_link ? (
                <a
                  href={campus.config.attendance_link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-lg text-xs hover:bg-orange-500/20 transition-all"
                >
                  <Globe size={12} />
                  Open Link
                  <ExternalLink size={10} />
                </a>
              ) : (
                <span className="text-xs text-slate-500 italic px-3 py-1.5">Not configured</span>
              )}
            </div>
          ))}
        </div>
      </div>
      )}
    </>
  );
}