app/src/admin/pages/LeaveApproval.tsx

import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useAuth } from "../context/AuthContext";
import { useAlert } from "../context/AlertContext";
import { motion, AnimatePresence } from "framer-motion";
import { formatDate, formatDatetime } from "../utils/attendanceHelpers";
import apiFetch from "../utils/api";
import { czechPlural } from "../utils/formatters";
import {
  leavePendingOptions,
  leaveProcessedOptions,
} from "../lib/queries/leave";
import ConfirmModal from "../components/ConfirmModal";
import Forbidden from "../components/Forbidden";
import useModalLock from "../hooks/useModalLock";
import FormField from "../components/FormField";
import { Skeleton } from "boneyard-js/react";
import LeaveApprovalFixture from "../fixtures/LeaveApprovalFixture";

const API_BASE = "/api/admin";

const leaveTypeLabels: Record<string, string> = {
  vacation: "Dovolená",
  sick: "Nemoc",
  unpaid: "Neplacené volno",
};

const leaveTypeClasses: Record<string, string> = {
  vacation: "badge-vacation",
  sick: "badge-sick",
  unpaid: "badge-unpaid",
};

const statusLabels: Record<string, string> = {
  pending: "Čeká na schválení",
  approved: "Schváleno",
  rejected: "Zamítnuto",
  cancelled: "Zrušeno",
};

const statusClasses: Record<string, string> = {
  pending: "badge-pending",
  approved: "badge-approved",
  rejected: "badge-rejected",
  cancelled: "badge-cancelled",
};

interface RawLeaveRequest {
  id: number;
  leave_type: string;
  date_from: string;
  date_to: string;
  total_days: number;
  total_hours: number;
  status: string;
  notes?: string;
  reviewer_note?: string;
  created_at: string;
  reviewed_at?: string;
  users_leave_requests_user_idTousers?: {
    first_name: string;
    last_name: string;
  };
  users_leave_requests_reviewer_idTousers?: {
    first_name: string;
    last_name: string;
  } | null;
}

interface LeaveRequest {
  id: number;
  employee_name: string;
  leave_type: string;
  date_from: string;
  date_to: string;
  total_days: number;
  total_hours: number;
  status: string;
  notes?: string;
  reviewer_name?: string;
  reviewer_note?: string;
  created_at: string;
  reviewed_at?: string;
}

function mapLeaveRequest(raw: RawLeaveRequest): LeaveRequest {
  const user = raw.users_leave_requests_user_idTousers;
  const reviewer = raw.users_leave_requests_reviewer_idTousers;
  return {
    id: raw.id,
    employee_name: user ? `${user.first_name} ${user.last_name}` : "Neznámý",
    leave_type: raw.leave_type,
    date_from: raw.date_from,
    date_to: raw.date_to,
    total_days: raw.total_days,
    total_hours: raw.total_hours,
    status: raw.status,
    notes: raw.notes,
    reviewer_name: reviewer
      ? `${reviewer.first_name} ${reviewer.last_name}`
      : undefined,
    reviewer_note: raw.reviewer_note,
    created_at: raw.created_at,
    reviewed_at: raw.reviewed_at,
  };
}

export default function LeaveApproval() {
  const { hasPermission } = useAuth();
  const alert = useAlert();
  const queryClient = useQueryClient();
  const [activeTab, setActiveTab] = useState<"pending" | "processed">(
    "pending",
  );
  const { data: pendingData, isPending: loading } = useQuery(
    leavePendingOptions(),
  );
  const { data: processedData } = useQuery({
    ...leaveProcessedOptions(),
    enabled: activeTab === "processed",
  });
  const pendingRequests =
    (pendingData as RawLeaveRequest[] | undefined)?.map(mapLeaveRequest) ?? [];
  const pendingCount = pendingRequests.length;
  const processedRequests =
    (processedData as RawLeaveRequest[] | undefined)?.map(mapLeaveRequest) ??
    [];

  const [approveModal, setApproveModal] = useState<{
    open: boolean;
    request: LeaveRequest | null;
  }>({ open: false, request: null });
  const [rejectModal, setRejectModal] = useState<{
    open: boolean;
    request: LeaveRequest | null;
  }>({ open: false, request: null });
  const [rejectNote, setRejectNote] = useState("");
  const [processing, setProcessing] = useState(false);

  useModalLock(rejectModal.open);

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

  const handleApprove = async () => {
    setProcessing(true);
    try {
      const response = await apiFetch(
        `${API_BASE}/leave-requests/${approveModal.request!.id}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: "approved" }),
        },
      );
      if (response.status === 401) return;

      const result = await response.json();
      if (result.success) {
        setApproveModal({ open: false, request: null });
        await queryClient.invalidateQueries({ queryKey: ["leave"] });
        alert.success("Žádost byla schválena");
      } else {
        alert.error(result.error);
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setProcessing(false);
    }
  };

  const handleReject = async () => {
    if (!rejectNote.trim()) {
      alert.error("Důvod zamítnutí je povinný");
      return;
    }

    setProcessing(true);
    try {
      const response = await apiFetch(
        `${API_BASE}/leave-requests/${rejectModal.request!.id}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            status: "rejected",
            reviewer_note: rejectNote,
          }),
        },
      );
      if (response.status === 401) return;

      const result = await response.json();
      if (result.success) {
        setRejectModal({ open: false, request: null });
        setRejectNote("");
        await queryClient.invalidateQueries({ queryKey: ["leave"] });
        alert.success("Žádost byla zamítnuta");
      } else {
        alert.error(result.error);
      }
    } catch {
      alert.error("Chyba připojení");
    } finally {
      setProcessing(false);
    }
  };

  return (
    <Skeleton
      name="leave-approval"
      loading={loading}
      fixture={<LeaveApprovalFixture />}
    >
      <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">Schvalování nepřítomnosti</h1>
            <p className="admin-page-subtitle">
              {pendingCount > 0
                ? `${pendingCount} ${czechPlural(pendingCount, "žádost čeká", "žádosti čekají", "žádostí čeká")} na schválení`
                : "Žádné čekající žádosti"}
            </p>
          </div>
        </motion.div>

        {/* Tabs */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.25, delay: 0.06 }}
        >
          <div className="admin-tabs mb-6">
            <button
              className={`admin-tab ${activeTab === "pending" ? "active" : ""}`}
              onClick={() => setActiveTab("pending")}
            >
              Ke schválení
              {pendingCount > 0 && (
                <span
                  className="admin-badge badge-pending"
                  style={{
                    marginLeft: "0.5rem",
                    fontSize: "0.7rem",
                    padding: "0.15rem 0.5rem",
                  }}
                >
                  {pendingCount}
                </span>
              )}
            </button>
            <button
              className={`admin-tab ${activeTab === "processed" ? "active" : ""}`}
              onClick={() => setActiveTab("processed")}
            >
              Vyřízené
            </button>
          </div>
        </motion.div>

        {/* Pending Tab */}
        {activeTab === "pending" && (
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.08 }}
          >
            {pendingRequests.length === 0 ? (
              <div className="admin-card">
                <div className="admin-card-body">
                  <div className="admin-empty-state">
                    <svg
                      width="48"
                      height="48"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      className="text-muted mb-4"
                    >
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                      <polyline points="22 4 12 14.01 9 11.01" />
                    </svg>
                    <p>Žádné čekající žádosti</p>
                  </div>
                </div>
              </div>
            ) : (
              <div
                style={{
                  display: "flex",
                  flexDirection: "column",
                  gap: "1rem",
                }}
              >
                {pendingRequests.map((req) => (
                  <div key={req.id} className="admin-card">
                    <div
                      className="admin-card-body"
                      style={{ padding: "1.25rem" }}
                    >
                      <div
                        style={{
                          display: "flex",
                          justifyContent: "space-between",
                          alignItems: "flex-start",
                          flexWrap: "wrap",
                          gap: "1rem",
                        }}
                      >
                        <div className="flex-1">
                          <div className="flex-row-gap mb-2">
                            <strong style={{ fontSize: "1rem" }}>
                              {req.employee_name}
                            </strong>
                            <span
                              className={`attendance-leave-badge ${leaveTypeClasses[req.leave_type] || ""}`}
                            >
                              {leaveTypeLabels[req.leave_type] ||
                                req.leave_type}
                            </span>
                          </div>
                          <div
                            className="text-secondary"
                            style={{
                              display: "flex",
                              gap: "1.5rem",
                              flexWrap: "wrap",
                              fontSize: "0.875rem",
                            }}
                          >
                            <span>
                              <strong>{formatDate(req.date_from)}</strong> —{" "}
                              <strong>{formatDate(req.date_to)}</strong>
                            </span>
                            <span>
                              {req.total_days}{" "}
                              {czechPlural(req.total_days, "den", "dny", "dnů")}{" "}
                              ({req.total_hours}h)
                            </span>
                            <span className="text-muted">
                              Podáno: {formatDatetime(req.created_at)}
                            </span>
                          </div>
                          {req.notes && (
                            <div
                              className="text-secondary"
                              style={{
                                marginTop: "0.5rem",
                                fontSize: "0.875rem",
                                fontStyle: "italic",
                              }}
                            >
                              {req.notes}
                            </div>
                          )}
                        </div>
                        <div
                          style={{
                            display: "flex",
                            gap: "0.5rem",
                            flexShrink: 0,
                          }}
                        >
                          <button
                            onClick={() =>
                              setApproveModal({ open: true, request: req })
                            }
                            className="admin-btn admin-btn-sm"
                            style={{
                              background: "var(--success-light)",
                              color: "var(--success)",
                              border: "none",
                            }}
                          >
                            Schválit
                          </button>
                          <button
                            onClick={() =>
                              setRejectModal({ open: true, request: req })
                            }
                            className="admin-btn admin-btn-sm"
                            style={{
                              background: "var(--danger-light)",
                              color: "var(--danger)",
                              border: "none",
                            }}
                          >
                            Zamítnout
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </motion.div>
        )}

        {/* Processed Tab */}
        {activeTab === "processed" && (
          <motion.div
            className="admin-card"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.25, delay: 0.08 }}
          >
            <div className="admin-card-body">
              {processedRequests.length === 0 ? (
                <div className="admin-empty-state">
                  <p>Zatím žádné vyřízené žádosti</p>
                </div>
              ) : (
                <div className="admin-table-responsive">
                  <table className="admin-table">
                    <thead>
                      <tr>
                        <th>Zaměstnanec</th>
                        <th>Typ</th>
                        <th>Od</th>
                        <th>Do</th>
                        <th>Dny</th>
                        <th>Stav</th>
                        <th>Schválil</th>
                        <th>Poznámka</th>
                        <th>Vyřízeno</th>
                      </tr>
                    </thead>
                    <tbody>
                      {processedRequests.map((req) => (
                        <tr key={req.id}>
                          <td>
                            <strong>{req.employee_name}</strong>
                          </td>
                          <td>
                            <span
                              className={`attendance-leave-badge ${leaveTypeClasses[req.leave_type] || ""}`}
                            >
                              {leaveTypeLabels[req.leave_type] ||
                                req.leave_type}
                            </span>
                          </td>
                          <td className="admin-mono">
                            {formatDate(req.date_from)}
                          </td>
                          <td className="admin-mono">
                            {formatDate(req.date_to)}
                          </td>
                          <td className="admin-mono">{req.total_days}</td>
                          <td>
                            <span
                              className={`admin-badge ${statusClasses[req.status] || ""}`}
                            >
                              {statusLabels[req.status] || req.status}
                            </span>
                          </td>
                          <td>{req.reviewer_name || "—"}</td>
                          <td style={{ maxWidth: "200px" }}>
                            {req.reviewer_note ? (
                              <span title={req.reviewer_note}>
                                {req.reviewer_note.length > 40
                                  ? `${req.reviewer_note.substring(0, 40)}...`
                                  : req.reviewer_note}
                              </span>
                            ) : (
                              "—"
                            )}
                          </td>
                          <td
                            className="admin-mono"
                            style={{ whiteSpace: "nowrap" }}
                          >
                            {formatDatetime(req.reviewed_at)}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </motion.div>
        )}

        {/* Approve Confirmation */}
        <ConfirmModal
          isOpen={approveModal.open}
          onClose={() => setApproveModal({ open: false, request: null })}
          onConfirm={handleApprove}
          title="Schválit žádost"
          message={
            approveModal.request
              ? `Schválit ${approveModal.request.total_days} ${czechPlural(approveModal.request.total_days, "den", "dny", "dnů")} ${leaveTypeLabels[approveModal.request.leave_type]?.toLowerCase() || ""} pro ${approveModal.request.employee_name}?`
              : ""
          }
          confirmText="Schválit"
          type="info"
          loading={processing}
        />

        {/* Reject Modal */}
        <AnimatePresence>
          {rejectModal.open && (
            <motion.div
              className="admin-modal-overlay"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            >
              <div
                className="admin-modal-backdrop"
                onClick={() => {
                  setRejectModal({ open: false, request: null });
                  setRejectNote("");
                }}
              />
              <motion.div
                className="admin-modal"
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                transition={{ duration: 0.2 }}
              >
                <div className="admin-modal-header">
                  <h2 className="admin-modal-title">Zamítnout žádost</h2>
                </div>
                <div className="admin-modal-body">
                  {rejectModal.request && (
                    <p className="text-secondary mb-4">
                      {rejectModal.request.employee_name} —{" "}
                      {leaveTypeLabels[rejectModal.request.leave_type]},{" "}
                      {formatDate(rejectModal.request.date_from)} —{" "}
                      {formatDate(rejectModal.request.date_to)} (
                      {rejectModal.request.total_days} dnů)
                    </p>
                  )}
                  <FormField label="Důvod zamítnutí" required>
                    <textarea
                      value={rejectNote}
                      onChange={(e) => setRejectNote(e.target.value)}
                      placeholder="Uveďte důvod zamítnutí..."
                      className="admin-form-textarea"
                      rows={3}
                      autoFocus
                    />
                  </FormField>
                </div>
                <div className="admin-modal-footer">
                  <button
                    type="button"
                    onClick={() => {
                      setRejectModal({ open: false, request: null });
                      setRejectNote("");
                    }}
                    className="admin-btn admin-btn-secondary"
                    disabled={processing}
                  >
                    Zrušit
                  </button>
                  <button
                    type="button"
                    onClick={handleReject}
                    disabled={processing || !rejectNote.trim()}
                    className="admin-btn admin-btn-primary"
                  >
                    {processing ? "Zpracování..." : "Zamítnout"}
                  </button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </Skeleton>
  );
}