import { useState, useEffect, useCallback } from 'react'
import { useAlert } from '../context/AlertContext'
import { useAuth } from '../context/AuthContext'
import { motion } from 'framer-motion'
import Forbidden from '../components/Forbidden'
import { formatDate, formatDatetime } from '../utils/attendanceHelpers'
import apiFetch from '../utils/api'
import ConfirmModal from '../components/ConfirmModal'

const API_BASE = '/api/admin'

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

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'
}

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

interface LeaveRequest {
  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
}

export default function LeaveRequests() {
  const alert = useAlert()
  const { hasPermission } = useAuth()
  const [loading, setLoading] = useState(true)
  const [requests, setRequests] = useState<LeaveRequest[]>([])
  const [cancelModal, setCancelModal] = useState<{ open: boolean; id: number | null }>({ open: false, id: null })
  const [cancelling, setCancelling] = useState(false)

  const fetchRequests = useCallback(async () => {
    try {
      const response = await apiFetch(`${API_BASE}/leave-requests`)
      if (response.status === 401) return
      const result = await response.json()
      if (result.success) {
        setRequests(result.data)
      }
    } catch {
      alert.error('Nepodařilo se načíst žádosti')
    } finally {
      setLoading(false)
    }
  }, [alert])

  useEffect(() => {
    fetchRequests()
  }, [fetchRequests])

  if (!hasPermission('attendance.record')) return <Forbidden />

  const handleCancel = async () => {
    setCancelling(true)
    try {
      const response = await apiFetch(`${API_BASE}/leave-requests/${cancelModal.id}`, {
        method: 'DELETE',
      })
      if (response.status === 401) return

      const result = await response.json()
      if (result.success) {
        setCancelModal({ open: false, id: null })
        await fetchRequests()
        alert.success(result.message)
      } else {
        alert.error(result.error)
      }
    } catch {
      alert.error('Chyba připojení')
    } finally {
      setCancelling(false)
    }
  }

  if (loading) {
    return (
      <div>
        <div className="admin-skeleton" style={{ padding: 0, gap: '1.5rem' }}>
          <div className="admin-skeleton-row" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="admin-skeleton-line h-8" style={{ width: '200px', marginBottom: '0.5rem' }} />
              <div className="admin-skeleton-line" style={{ width: '140px' }} />
            </div>
            <div className="admin-skeleton-line h-10" style={{ width: '140px', borderRadius: '8px' }} />
          </div>
          <div className="admin-card">
            <div className="admin-skeleton" style={{ gap: '1.25rem' }}>
              {[0, 1, 2, 3, 4].map(i => (
                <div key={i} className="admin-skeleton-row">
                  <div className="admin-skeleton-line circle" />
                  <div className="flex-1">
                    <div className="admin-skeleton-line w-1/3 mb-2" />
                    <div className="admin-skeleton-line w-1/4" style={{ height: '10px' }} />
                  </div>
                  <div className="admin-skeleton-line w-1/4" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

  function renderNoteCell(req: LeaveRequest) {
    const truncate = (text: string) => text.length > 40 ? `${text.substring(0, 40)}...` : text
    if (req.status === 'rejected' && req.reviewer_note) {
      return (
        <span style={{ color: 'var(--danger)', fontSize: '0.875rem' }} title={req.reviewer_note}>
          {truncate(req.reviewer_note)}
        </span>
      )
    }
    if (req.notes) {
      return (
        <span className="text-secondary" style={{ fontSize: '0.875rem' }} title={req.notes}>
          {truncate(req.notes)}
        </span>
      )
    }
    return <span className="text-muted">—</span>
  }

  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">Moje žádosti</h1>
          <p className="admin-page-subtitle">Přehled žádostí o nepřítomnost</p>
        </div>
      </motion.div>

      <motion.div
        className="admin-card"
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.25, delay: 0.06 }}
      >
        <div className="admin-card-body">
          {requests.length === 0 ? (
            <div className="admin-empty-state">
              <div className="admin-empty-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
                  <line x1="16" y1="2" x2="16" y2="6" />
                  <line x1="8" y1="2" x2="8" y2="6" />
                  <line x1="3" y1="10" x2="21" y2="10" />
                </svg>
              </div>
              <p>Zatím nemáte žádné žádosti</p>
              <p style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>
                Novou žádost můžete podat na stránce Docházka
              </p>
            </div>
          ) : (
            <div className="admin-table-responsive">
              <table className="admin-table">
                <thead>
                  <tr>
                    <th>Typ</th>
                    <th>Od</th>
                    <th>Do</th>
                    <th>Dny</th>
                    <th>Hodiny</th>
                    <th>Stav</th>
                    <th>Poznámka</th>
                    <th>Podáno</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  {requests.map((req) => (
                    <tr key={req.id}>
                      <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 className="admin-mono">{req.total_hours}h</td>
                      <td>
                        <span className={`admin-badge ${statusClasses[req.status] || ''}`}>
                          {statusLabels[req.status] || req.status}
                        </span>
                      </td>
                      <td style={{ maxWidth: '200px' }}>
                        {renderNoteCell(req)}
                      </td>
                      <td className="admin-mono" style={{ whiteSpace: 'nowrap' }}>
                        {formatDatetime(req.created_at)}
                      </td>
                      <td>
                        {req.status === 'pending' && (
                          <button
                            onClick={() => setCancelModal({ open: true, id: req.id })}
                            className="admin-btn admin-btn-secondary admin-btn-sm"
                          >
                            Zrušit
                          </button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </motion.div>

      <ConfirmModal
        isOpen={cancelModal.open}
        onClose={() => setCancelModal({ open: false, id: null })}
        onConfirm={handleCancel}
        title="Zrušit žádost"
        message="Opravdu chcete zrušit tuto žádost o nepřítomnost?"
        confirmText="Zrušit žádost"
        type="warning"
        loading={cancelling}
      />
    </div>
  )
}