import { useAlert } from "../context/AlertContext";
import { useAuth } from "../context/AuthContext";
import Forbidden from "../components/Forbidden";
import { motion } from "framer-motion";
import ConfirmModal from "../components/ConfirmModal";
import AdminDatePicker from "../components/AdminDatePicker";
import BulkAttendanceModal from "../components/BulkAttendanceModal";
import ShiftFormModal from "../components/ShiftFormModal";
import AttendanceShiftTable from "../components/AttendanceShiftTable";
import useModalLock from "../hooks/useModalLock";
import useAttendanceAdmin from "../hooks/useAttendanceAdmin";
import FormField from "../components/FormField";
import { formatMinutes, formatHoursDecimal } from "../utils/attendanceHelpers";

interface UserTotalData {
  name: string;
  minutes: number;
  working: boolean;
  vacation_hours: number;
  sick_hours: number;
  unpaid_hours: number;
  fund: number | null;
  worked_hours: number;
  covered: number;
  missing: number;
  overtime: number;
  // mzda-style summary fields (set by computeUserTotals in useAttendanceAdmin)
  odpracovano?: number;
  vcetne_svatku?: number;
  prescas?: number;
  svatek?: number;
  worked_holiday_hours?: number;
}

function getFundBarBackground(data: UserTotalData) {
  // fondUsed mirrors the Fond "used" line in the IIFE below:
  //   real_worked + vacation + worked_holiday + free_holiday
  // (delta is fondUsed - fund; 0 means exactly at the fund).
  const realWorked = data.worked_hours_raw ?? data.worked_hours;
  const fondUsed =
    realWorked +
    (data.vacation_hours ?? 0) +
    (data.worked_holiday_hours ?? 0) +
    (data.svatek ?? 0);
  const fundVal = data.fund ?? 0;
  const delta = fondUsed - fundVal;
  if (delta > 0) return "linear-gradient(135deg, var(--warning), #d97706)";
  if (delta >= 0) return "linear-gradient(135deg, var(--success), #059669)";
  return "var(--gradient)";
}

export default function AttendanceAdmin() {
  const alert = useAlert();
  const { hasPermission } = useAuth();

  const {
    loading,
    month,
    setMonth,
    filterUserId,
    setFilterUserId,
    data,
    hasData,
    showBulkModal,
    setShowBulkModal,
    bulkSubmitting,
    bulkForm,
    setBulkForm,
    showCreateModal,
    setShowCreateModal,
    createForm,
    setCreateForm,
    showEditModal,
    setShowEditModal,
    editingRecord,
    editForm,
    setEditForm,
    deleteConfirm,
    setDeleteConfirm,
    projectList,
    createProjectLogs,
    setCreateProjectLogs,
    editProjectLogs,
    setEditProjectLogs,
    openCreateModal,
    handleCreateShiftDateChange,
    handleCreateSubmit,
    openBulkModal,
    toggleBulkUser,
    toggleAllBulkUsers,
    handleBulkSubmit,
    openEditModal,
    handleEditSubmit,
    handleDelete,
    handlePrint,
  } = useAttendanceAdmin({ alert });

  useModalLock(showBulkModal);
  useModalLock(showEditModal);
  useModalLock(showCreateModal);

  if (!hasPermission("attendance.manage")) return <Forbidden />;

  // Show spinner only on initial load (no data yet), not on filter changes
  const isInitialLoad =
    loading &&
    data.records.length === 0 &&
    Object.keys(data.user_totals).length === 0;

  if (isInitialLoad) {
    return (
      <div className="admin-loading">
        <div className="admin-spinner" />
      </div>
    );
  }

  return (
    <div>
      <motion.div
        className="admin-page-header"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25 }}
      >
        <div>
          <h1 className="admin-page-title">Správa docházky</h1>
        </div>
        <div className="admin-page-actions">
          {hasData && (
            <button
              onClick={handlePrint}
              className="admin-btn admin-btn-secondary"
              title="Tisk docházky"
            >
              <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                style={{ marginRight: "0.5rem" }}
              >
                <polyline points="6 9 6 2 18 2 18 9" />
                <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
                <rect x="6" y="14" width="12" height="8" />
              </svg>
              Tisk
            </button>
          )}
          <button
            onClick={openBulkModal}
            className="admin-btn admin-btn-secondary"
          >
            Vyplnit měsíc
          </button>
          <button
            onClick={openCreateModal}
            className="admin-btn admin-btn-primary"
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
            >
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
            Přidat záznam
          </button>
        </div>
      </motion.div>

      {/* Filters */}
      <motion.div
        className="admin-card mb-6"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <div className="admin-card-body">
          <div className="admin-form-row">
            <FormField label="Měsíc">
              <AdminDatePicker
                mode="month"
                value={month}
                onChange={(val: string) => setMonth(val)}
              />
            </FormField>
            <FormField label="Zaměstnanec">
              <select
                value={filterUserId}
                onChange={(e) => setFilterUserId(e.target.value)}
                className="admin-form-select"
              >
                <option value="">Všichni</option>
                {data.users.map((user) => (
                  <option key={user.id} value={user.id}>
                    {user.name}
                  </option>
                ))}
              </select>
            </FormField>
          </div>
        </div>
      </motion.div>

      {/* User Totals */}
      {Object.keys(data.user_totals).length > 0 && (
        <motion.div
          className="admin-grid admin-grid-3 mb-6"
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25, delay: 0.09 }}
        >
          {Object.entries(data.user_totals).map(([uid, userData]) => {
            const ut = userData as UserTotalData;
            return (
              <div key={uid} className="admin-card" style={{ display: "flex" }}>
                <div
                  className="admin-card-body"
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    flex: 1,
                  }}
                >
                  <div className="flex-row gap-2 mb-2">
                    <span style={{ fontWeight: 600 }}>{ut.name}</span>
                    <span
                      className={`attendance-working-badge ${ut.working ? "working" : "finished"}`}
                    >
                      {ut.working ? "\u2713" : "\u2717"}
                    </span>
                  </div>
                  <div className="admin-stat-value">
                    {formatMinutes(ut.minutes)}
                  </div>
                  <div className="admin-stat-label">odpracováno</div>
                  <div
                    style={{
                      marginTop: "0.5rem",
                      marginBottom: "0.75rem",
                      display: "flex",
                      flexWrap: "wrap",
                      gap: "0.4rem",
                      minHeight: "2rem",
                    }}
                  >
                    {ut.vacation_hours > 0 && (
                      <span className="attendance-leave-badge badge-vacation">
                        Dov: {ut.vacation_hours}h
                      </span>
                    )}
                    {ut.sick_hours > 0 && (
                      <span className="attendance-leave-badge badge-sick">
                        Nem: {ut.sick_hours}h
                      </span>
                    )}
                    {ut.svatek !== undefined && ut.svatek > 0 && (
                      <span className="attendance-leave-badge badge-holiday">
                        Sv: {Math.round(ut.svatek)}h
                      </span>
                    )}
                    {ut.unpaid_hours > 0 && (
                      <span className="attendance-leave-badge badge-unpaid">
                        Nep: {ut.unpaid_hours}h
                      </span>
                    )}
                  </div>
                  {ut.fund !== null &&
                    (() => {
                      // Fond "used" = real_worked + vacation + worked_holiday + free_holiday
                      // (everything the user actually got paid for this month:
                      //  raw worked time with sub-day remainders, plus
                      //  vacation days, plus hours worked on holidays, plus
                      //  the 8h per unworked holiday from the fund).
                      const realWorked = ut.worked_hours_raw ?? ut.worked_hours;
                      const fondUsed =
                        realWorked +
                        (ut.vacation_hours ?? 0) +
                        (ut.worked_holiday_hours ?? 0) +
                        (ut.svatek ?? 0);
                      const fundVal = ut.fund ?? 0;
                      const delta = fondUsed - fundVal;
                      return (
                        <div
                          className="kpi-card-footer"
                          style={{
                            marginTop: "auto",
                            paddingTop: "0.75rem",
                            borderTop: "1px solid var(--border-color)",
                          }}
                        >
                          <div
                            className="text-secondary"
                            style={{
                              display: "flex",
                              justifyContent: "space-between",
                              alignItems: "center",
                              fontSize: "0.8rem",
                            }}
                          >
                            <span>
                              Fond: {formatHoursDecimal(fondUsed * 60)}h /{" "}
                              {formatHoursDecimal(fundVal * 60)}h
                            </span>
                            {delta > 0 && (
                              <span className="text-warning fw-600">
                                +{formatHoursDecimal(delta * 60)}h
                              </span>
                            )}
                            {delta <= 0 && delta < 0 && (
                              <span className="text-danger fw-600">
                                -{formatHoursDecimal(Math.abs(delta) * 60)}h
                              </span>
                            )}
                          </div>
                          <div
                            style={{
                              marginTop: "0.375rem",
                              height: "4px",
                              background: "var(--bg-tertiary)",
                              borderRadius: "2px",
                              overflow: "hidden",
                            }}
                          >
                            <div
                              style={{
                                height: "100%",
                                width: `${Math.min(
                                  100,
                                  (fondUsed / (ut.fund || 1)) * 100,
                                )}%`,
                                background: getFundBarBackground(ut),
                                borderRadius: "2px",
                                transition: "width 0.3s ease",
                              }}
                            />
                          </div>
                        </div>
                      );
                    })()}
                  <div
                    className="text-secondary"
                    style={{ marginTop: "0.75rem", fontSize: "0.8rem" }}
                  >
                    {data.leave_balances[uid] ? (
                      <>
                        Zbývá dovolené:{" "}
                        {data.leave_balances[uid].vacation_remaining.toFixed(1)}
                        h / {data.leave_balances[uid].vacation_total}h
                      </>
                    ) : (
                      <span style={{ visibility: "hidden" }}>—</span>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </motion.div>
      )}

      {/* Records Table */}
      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.12 }}
      >
        <div className="admin-card-body">
          <AttendanceShiftTable
            records={data.records}
            onEdit={openEditModal}
            onDelete={(record) => setDeleteConfirm({ show: true, record })}
          />
        </div>
      </motion.div>

      {/* Modals */}
      <BulkAttendanceModal
        isOpen={showBulkModal}
        onClose={() => setShowBulkModal(false)}
        form={bulkForm}
        setForm={setBulkForm}
        users={data.users}
        onSubmit={handleBulkSubmit}
        submitting={bulkSubmitting}
        toggleUser={toggleBulkUser}
        toggleAllUsers={toggleAllBulkUsers}
      />

      <ShiftFormModal
        mode="create"
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        onSubmit={handleCreateSubmit}
        form={createForm}
        setForm={setCreateForm}
        projectLogs={createProjectLogs}
        setProjectLogs={setCreateProjectLogs}
        projectList={projectList}
        users={data.users}
        onShiftDateChange={handleCreateShiftDateChange}
        editingRecord={null}
      />

      <ShiftFormModal
        mode="edit"
        isOpen={showEditModal && !!editingRecord}
        onClose={() => setShowEditModal(false)}
        onSubmit={handleEditSubmit}
        form={editForm}
        setForm={setEditForm}
        projectLogs={editProjectLogs}
        setProjectLogs={setEditProjectLogs}
        projectList={projectList}
        users={data.users}
        onShiftDateChange={handleCreateShiftDateChange}
        editingRecord={
          editingRecord
            ? {
                user_name: editingRecord.user_name ?? "",
                shift_date: editingRecord.shift_date,
              }
            : null
        }
      />

      <ConfirmModal
        isOpen={deleteConfirm.show}
        onClose={() => setDeleteConfirm({ show: false, record: null })}
        onConfirm={handleDelete}
        title="Smazat záznam"
        message="Opravdu chcete smazat tento záznam docházky?"
        confirmText="Smazat"
        confirmVariant="danger"
      />
    </div>
  );
}