/**
 * Time Blocks Management Page
 *
 * Allows business owners/managers to manage time blocks for business closures,
 * holidays, and resource-specific unavailability.
 */

import React, { useState, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
  TimeBlockListItem,
  BlockType,
  RecurrenceType,
} from '../types';
import {
  useTimeBlocks,
  useCreateTimeBlock,
  useUpdateTimeBlock,
  useDeleteTimeBlock,
  useToggleTimeBlock,
  useHolidays,
  usePendingReviews,
  useApproveTimeBlock,
  useDenyTimeBlock,
} from '../hooks/useTimeBlocks';
import { useResources } from '../hooks/useResources';
import Portal from '../components/Portal';
import YearlyBlockCalendar from '../components/time-blocks/YearlyBlockCalendar';
import TimeBlockCreatorModal from '../components/time-blocks/TimeBlockCreatorModal';
import {
  Building2,
  User,
  Plus,
  Pencil,
  Trash2,
  AlertTriangle,
  Clock,
  Calendar,
  CalendarDays,
  Ban,
  AlertCircle,
  Power,
  PowerOff,
  HourglassIcon,
  CheckCircle,
  XCircle,
  MessageSquare,
  ChevronDown,
  ChevronUp,
} from 'lucide-react';

type TimeBlockTab = 'business' | 'resource' | 'calendar';

const RECURRENCE_TYPE_LABELS: Record<RecurrenceType, string> = {
  NONE: 'One-time',
  WEEKLY: 'Weekly',
  MONTHLY: 'Monthly',
  YEARLY: 'Yearly',
  HOLIDAY: 'Holiday',
};

const BLOCK_TYPE_LABELS: Record<BlockType, string> = {
  HARD: 'Hard Block',
  SOFT: 'Soft Block',
};

const TimeBlocks: React.FC = () => {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<TimeBlockTab>('business');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingBlock, setEditingBlock] = useState<TimeBlockListItem | null>(null);
  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
  const [isPendingReviewsExpanded, setIsPendingReviewsExpanded] = useState(true);
  const [reviewingBlock, setReviewingBlock] = useState<TimeBlockListItem | null>(null);
  const [reviewNotes, setReviewNotes] = useState('');

  // Fetch data (include inactive blocks so users can re-enable them)
  const {
    data: businessBlocks = [],
    isLoading: businessLoading,
  } = useTimeBlocks({ level: 'business' });

  const {
    data: resourceBlocks = [],
    isLoading: resourceLoading,
  } = useTimeBlocks({ level: 'resource' });

  const { data: holidays = [] } = useHolidays('US');
  const { data: resources = [] } = useResources();
  const { data: pendingReviews } = usePendingReviews();

  // Mutations
  const createBlock = useCreateTimeBlock();
  const updateBlock = useUpdateTimeBlock();
  const deleteBlock = useDeleteTimeBlock();
  const toggleBlock = useToggleTimeBlock();
  const approveBlock = useApproveTimeBlock();
  const denyBlock = useDenyTimeBlock();

  // Current blocks based on tab
  const currentBlocks = activeTab === 'business' ? businessBlocks : resourceBlocks;
  const isLoading = activeTab === 'business' ? businessLoading : resourceLoading;

  // Group resource blocks by resource
  const resourceBlocksGrouped = useMemo(() => {
    const groups: Record<string, TimeBlockListItem[]> = {};
    resourceBlocks.forEach((block) => {
      const resourceId = block.resource || 'unassigned';
      if (!groups[resourceId]) groups[resourceId] = [];
      groups[resourceId].push(block);
    });
    return groups;
  }, [resourceBlocks]);

  // Modal handlers
  const openCreateModal = () => {
    setEditingBlock(null);
    setIsModalOpen(true);
  };

  const openEditModal = (block: TimeBlockListItem) => {
    setEditingBlock(block);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setEditingBlock(null);
  };

  const handleDelete = async (id: string) => {
    try {
      await deleteBlock.mutateAsync(id);
      setDeleteConfirmId(null);
    } catch (error) {
      console.error('Failed to delete time block:', error);
    }
  };

  const handleToggle = async (id: string) => {
    try {
      await toggleBlock.mutateAsync(id);
    } catch (error) {
      console.error('Failed to toggle time block:', error);
    }
  };

  const handleApprove = async (id: string) => {
    try {
      await approveBlock.mutateAsync({ id, notes: reviewNotes });
      setReviewingBlock(null);
      setReviewNotes('');
    } catch (error) {
      console.error('Failed to approve time block:', error);
    }
  };

  const handleDeny = async (id: string) => {
    try {
      await denyBlock.mutateAsync({ id, notes: reviewNotes });
      setReviewingBlock(null);
      setReviewNotes('');
    } catch (error) {
      console.error('Failed to deny time block:', error);
    }
  };

  // Render block type badge
  const renderBlockTypeBadge = (type: BlockType) => (
    <span
      className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${
        type === 'HARD'
          ? 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'
          : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
      }`}
    >
      {type === 'HARD' ? <Ban size={12} className="mr-1" /> : <AlertCircle size={12} className="mr-1" />}
      {BLOCK_TYPE_LABELS[type]}
    </span>
  );

  // Render recurrence type badge
  const renderRecurrenceBadge = (type: RecurrenceType) => (
    <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
      {type === 'HOLIDAY' ? (
        <CalendarDays size={12} className="mr-1" />
      ) : type === 'NONE' ? (
        <Clock size={12} className="mr-1" />
      ) : (
        <Calendar size={12} className="mr-1" />
      )}
      {RECURRENCE_TYPE_LABELS[type]}
    </span>
  );

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t('timeBlocks.title', 'Time Blocks')}
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {t('timeBlocks.subtitle', 'Manage business closures, holidays, and resource unavailability')}
          </p>
        </div>
        <button
          onClick={() => openCreateModal()}
          className="flex items-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
        >
          <Plus size={18} />
          {t('timeBlocks.addBlock', 'Add Block')}
        </button>
      </div>

      {/* Pending Reviews Section */}
      {pendingReviews && pendingReviews.count > 0 && (
        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg overflow-hidden">
          <button
            onClick={() => setIsPendingReviewsExpanded(!isPendingReviewsExpanded)}
            className="w-full px-4 py-3 flex items-center justify-between hover:bg-amber-100 dark:hover:bg-amber-900/30 transition-colors"
          >
            <div className="flex items-center gap-3">
              <div className="p-2 bg-amber-100 dark:bg-amber-800/50 rounded-lg">
                <HourglassIcon size={20} className="text-amber-600 dark:text-amber-400" />
              </div>
              <div className="text-left">
                <h3 className="font-semibold text-amber-900 dark:text-amber-100">
                  {t('timeBlocks.pendingReviews', 'Pending Time Off Requests')}
                </h3>
                <p className="text-sm text-amber-700 dark:text-amber-300">
                  {t('timeBlocks.pendingReviewsCount', '{{count}} request(s) need your review', { count: pendingReviews.count })}
                </p>
              </div>
            </div>
            {isPendingReviewsExpanded ? (
              <ChevronUp size={20} className="text-amber-600 dark:text-amber-400" />
            ) : (
              <ChevronDown size={20} className="text-amber-600 dark:text-amber-400" />
            )}
          </button>

          {isPendingReviewsExpanded && (
            <div className="border-t border-amber-200 dark:border-amber-800">
              <div className="divide-y divide-amber-200 dark:divide-amber-800">
                {pendingReviews.pending_blocks.map((block) => (
                  <div
                    key={block.id}
                    className="p-4 hover:bg-amber-100/50 dark:hover:bg-amber-900/30 cursor-pointer transition-colors"
                    onClick={() => setReviewingBlock(block)}
                  >
                    <div className="flex items-center justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-gray-900 dark:text-white">
                            {block.title}
                          </span>
                          {renderBlockTypeBadge(block.block_type)}
                          {renderRecurrenceBadge(block.recurrence_type)}
                        </div>
                        <div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                          {block.resource_name && (
                            <span className="flex items-center gap-1">
                              <User size={14} />
                              {block.resource_name}
                            </span>
                          )}
                          {block.created_by_name && (
                            <span>Requested by {block.created_by_name}</span>
                          )}
                          {block.pattern_display && (
                            <span>{block.pattern_display}</span>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-2 ml-4">
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            handleApprove(block.id);
                          }}
                          className="p-2 text-green-600 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-lg transition-colors"
                          title={t('timeBlocks.approve', 'Approve')}
                        >
                          <CheckCircle size={20} />
                        </button>
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            setReviewingBlock(block);
                          }}
                          className="p-2 text-red-600 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg transition-colors"
                          title={t('timeBlocks.deny', 'Deny')}
                        >
                          <XCircle size={20} />
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-1" aria-label="Time block tabs">
          <button
            onClick={() => setActiveTab('business')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === 'business'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <Building2 size={18} />
            {t('timeBlocks.businessTab', 'Business Blocks')}
            {businessBlocks.length > 0 && (
              <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full text-xs">
                {businessBlocks.length}
              </span>
            )}
          </button>
          <button
            onClick={() => setActiveTab('resource')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === 'resource'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <User size={18} />
            {t('timeBlocks.resourceTab', 'Resource Blocks')}
            {resourceBlocks.length > 0 && (
              <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full text-xs">
                {resourceBlocks.length}
              </span>
            )}
          </button>
          <button
            onClick={() => setActiveTab('calendar')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === 'calendar'
                ? 'border-brand-500 text-brand-600 dark:text-brand-400'
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
            }`}
          >
            <CalendarDays size={18} />
            {t('timeBlocks.calendarTab', 'Yearly View')}
          </button>
        </nav>
      </div>

      {/* Tab Content */}
      {isLoading ? (
        <div className="flex justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
        </div>
      ) : (
        <div className="space-y-4">
          {activeTab === 'business' && (
            <>
              {/* Business Blocks Info */}
              <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <p className="text-sm text-blue-800 dark:text-blue-300">
                  <Building2 size={16} className="inline mr-2" />
                  {t('timeBlocks.businessInfo', 'Business blocks apply to all resources. Use these for holidays, company closures, and business-wide events.')}
                </p>
              </div>

              {/* Business Blocks List */}
              {businessBlocks.length === 0 ? (
                <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <CalendarDays size={48} className="mx-auto text-gray-400 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                    {t('timeBlocks.noBusinessBlocks', 'No Business Blocks')}
                  </h3>
                  <p className="text-gray-500 dark:text-gray-400 mb-4">
                    {t('timeBlocks.noBusinessBlocksDesc', 'Add holidays and business closures to prevent bookings during those times.')}
                  </p>
                  <button
                    onClick={() => openCreateModal()}
                    className="btn-primary inline-flex items-center gap-2"
                  >
                    <Plus size={18} />
                    {t('timeBlocks.addFirstBlock', 'Add First Block')}
                  </button>
                </div>
              ) : (
                <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                  <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead className="bg-gray-50 dark:bg-gray-900/50">
                      <tr>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('timeBlocks.titleCol', 'Title')}
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('timeBlocks.typeCol', 'Type')}
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('timeBlocks.patternCol', 'Pattern')}
                        </th>
                        <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('timeBlocks.actionsCol', 'Actions')}
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                      {businessBlocks.map((block) => (
                        <tr key={block.id} className={`hover:bg-gray-50 dark:hover:bg-gray-700/50 ${!block.is_active ? 'opacity-50' : ''}`}>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center gap-2">
                              <span className={`font-medium ${block.is_active ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400 line-through'}`}>
                                {block.title}
                              </span>
                              {!block.is_active && (
                                <span className="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 rounded">
                                  Inactive
                                </span>
                              )}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            {renderBlockTypeBadge(block.block_type)}
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap">
                            <div className="flex items-center gap-2">
                              {renderRecurrenceBadge(block.recurrence_type)}
                              {block.pattern_display && (
                                <span className="text-sm text-gray-500 dark:text-gray-400">
                                  {block.pattern_display}
                                </span>
                              )}
                            </div>
                          </td>
                          <td className="px-6 py-4 whitespace-nowrap text-right">
                            <div className="flex items-center justify-end gap-2">
                              <button
                                onClick={() => handleToggle(block.id)}
                                className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                                title={block.is_active ? 'Deactivate' : 'Activate'}
                              >
                                {block.is_active ? <Power size={16} /> : <PowerOff size={16} />}
                              </button>
                              <button
                                onClick={() => openEditModal(block)}
                                className="p-2 text-gray-400 hover:text-blue-600"
                                title="Edit"
                              >
                                <Pencil size={16} />
                              </button>
                              <button
                                onClick={() => setDeleteConfirmId(block.id)}
                                className="p-2 text-gray-400 hover:text-red-600"
                                title="Delete"
                              >
                                <Trash2 size={16} />
                              </button>
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </>
          )}

          {activeTab === 'resource' && (
            <>
              {/* Resource Blocks Info */}
              <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
                <p className="text-sm text-purple-800 dark:text-purple-300">
                  <User size={16} className="inline mr-2" />
                  {t('timeBlocks.resourceInfo', 'Resource blocks apply to specific staff or equipment. Use these for vacations, maintenance, or personal time.')}
                </p>
              </div>

              {/* Resource Blocks List */}
              {resourceBlocks.length === 0 ? (
                <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <User size={48} className="mx-auto text-gray-400 mb-4" />
                  <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
                    {t('timeBlocks.noResourceBlocks', 'No Resource Blocks')}
                  </h3>
                  <p className="text-gray-500 dark:text-gray-400 mb-4">
                    {t('timeBlocks.noResourceBlocksDesc', 'Add time blocks for specific resources to manage their availability.')}
                  </p>
                  <button
                    onClick={() => openCreateModal()}
                    className="btn-primary inline-flex items-center gap-2"
                  >
                    <Plus size={18} />
                    {t('timeBlocks.addFirstBlock', 'Add First Block')}
                  </button>
                </div>
              ) : (
                <div className="space-y-4">
                  {resources.map((resource) => {
                    const blocks = resourceBlocksGrouped[resource.id] || [];
                    if (blocks.length === 0) return null;
                    return (
                      <div
                        key={resource.id}
                        className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
                      >
                        <div className="px-6 py-3 bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
                          <h3 className="font-medium text-gray-900 dark:text-white flex items-center gap-2">
                            <User size={16} />
                            {resource.name}
                          </h3>
                          <button
                            onClick={() => openCreateModal()}
                            className="text-sm text-brand-600 hover:text-brand-700 flex items-center gap-1"
                          >
                            <Plus size={14} />
                            Add Block
                          </button>
                        </div>
                        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                          <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                            {blocks.map((block) => (
                              <tr key={block.id} className={`hover:bg-gray-50 dark:hover:bg-gray-700/50 ${!block.is_active ? 'opacity-50' : ''}`}>
                                <td className="px-6 py-4 whitespace-nowrap">
                                  <div className="flex items-center gap-2">
                                    <span className={`font-medium ${block.is_active ? 'text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400 line-through'}`}>
                                      {block.title}
                                    </span>
                                    {!block.is_active && (
                                      <span className="px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400 rounded">
                                        Inactive
                                      </span>
                                    )}
                                  </div>
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                  {renderBlockTypeBadge(block.block_type)}
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap">
                                  <div className="flex items-center gap-2">
                                    {renderRecurrenceBadge(block.recurrence_type)}
                                    {block.pattern_display && (
                                      <span className="text-sm text-gray-500 dark:text-gray-400">
                                        {block.pattern_display}
                                      </span>
                                    )}
                                  </div>
                                </td>
                                <td className="px-6 py-4 whitespace-nowrap text-right">
                                  <div className="flex items-center justify-end gap-2">
                                    <button
                                      onClick={() => handleToggle(block.id)}
                                      className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                                      title={block.is_active ? 'Deactivate' : 'Activate'}
                                    >
                                      {block.is_active ? <Power size={16} /> : <PowerOff size={16} />}
                                    </button>
                                    <button
                                      onClick={() => openEditModal(block)}
                                      className="p-2 text-gray-400 hover:text-blue-600"
                                      title="Edit"
                                    >
                                      <Pencil size={16} />
                                    </button>
                                    <button
                                      onClick={() => setDeleteConfirmId(block.id)}
                                      className="p-2 text-gray-400 hover:text-red-600"
                                      title="Delete"
                                    >
                                      <Trash2 size={16} />
                                    </button>
                                  </div>
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    );
                  })}
                </div>
              )}
            </>
          )}

          {activeTab === 'calendar' && (
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
              <YearlyBlockCalendar
                onBlockClick={(blockId) => {
                  // Find the block and open edit modal
                  const block = [...businessBlocks, ...resourceBlocks].find(b => b.id === blockId);
                  if (block) {
                    openEditModal(block);
                  }
                }}
              />
            </div>
          )}
        </div>
      )}

      {/* Create/Edit Modal */}
      <TimeBlockCreatorModal
        isOpen={isModalOpen}
        onClose={closeModal}
        onSubmit={async (data) => {
          try {
            if (editingBlock) {
              await updateBlock.mutateAsync({ id: editingBlock.id, updates: data });
            } else {
              // Handle array of blocks (multiple holidays)
              const blocks = Array.isArray(data) ? data : [data];
              for (const block of blocks) {
                await createBlock.mutateAsync(block);
              }
            }
            closeModal();
          } catch (error) {
            console.error('Failed to save time block:', error);
          }
        }}
        isSubmitting={createBlock.isPending || updateBlock.isPending}
        editingBlock={editingBlock}
        holidays={holidays}
        resources={resources}
        isResourceLevel={activeTab === 'resource'}
      />

      {/* Delete Confirmation Modal */}
      {deleteConfirmId && (
        <Portal>
          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="p-3 bg-red-100 dark:bg-red-900/30 rounded-full">
                  <AlertTriangle size={24} className="text-red-600 dark:text-red-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {t('timeBlocks.deleteConfirmTitle', 'Delete Time Block?')}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {t('timeBlocks.deleteConfirmDesc', 'This action cannot be undone.')}
                  </p>
                </div>
              </div>
              <div className="flex justify-end gap-3">
                <button
                  onClick={() => setDeleteConfirmId(null)}
                  className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
                >
                  {t('common.cancel', 'Cancel')}
                </button>
                <button
                  onClick={() => handleDelete(deleteConfirmId)}
                  className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50"
                  disabled={deleteBlock.isPending}
                >
                  {deleteBlock.isPending ? (
                    <span className="flex items-center gap-2">
                      <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                      {t('common.deleting', 'Deleting...')}
                    </span>
                  ) : (
                    t('common.delete', 'Delete')
                  )}
                </button>
              </div>
            </div>
          </div>
        </Portal>
      )}

      {/* Review Modal */}
      {reviewingBlock && (
        <Portal>
          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full p-6">
              <div className="flex items-center gap-3 mb-6">
                <div className="p-3 bg-amber-100 dark:bg-amber-900/30 rounded-full">
                  <HourglassIcon size={24} className="text-amber-600 dark:text-amber-400" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                    {t('timeBlocks.reviewRequest', 'Review Time Off Request')}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {t('timeBlocks.reviewRequestDesc', 'Approve or deny this time off request')}
                  </p>
                </div>
              </div>

              {/* Block Details */}
              <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 mb-4 space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.titleCol', 'Title')}</span>
                  <span className="font-medium text-gray-900 dark:text-white">{reviewingBlock.title}</span>
                </div>
                {reviewingBlock.resource_name && (
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.resource', 'Resource')}</span>
                    <span className="font-medium text-gray-900 dark:text-white">{reviewingBlock.resource_name}</span>
                  </div>
                )}
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.typeCol', 'Type')}</span>
                  {renderBlockTypeBadge(reviewingBlock.block_type)}
                </div>

                {/* Schedule Details Section */}
                <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-2">
                    {t('timeBlocks.scheduleDetails', 'Schedule Details')}
                  </span>

                  {/* Recurrence Type */}
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.patternCol', 'Pattern')}</span>
                    {renderRecurrenceBadge(reviewingBlock.recurrence_type)}
                  </div>

                  {/* One-time block dates */}
                  {reviewingBlock.recurrence_type === 'NONE' && reviewingBlock.start_date && (
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.dates', 'Date(s)')}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {reviewingBlock.start_date === reviewingBlock.end_date ? (
                          new Date(reviewingBlock.start_date + 'T00:00:00').toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })
                        ) : (
                          <>
                            {new Date(reviewingBlock.start_date + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
                            {' - '}
                            {new Date((reviewingBlock.end_date || reviewingBlock.start_date) + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
                          </>
                        )}
                      </span>
                    </div>
                  )}

                  {/* Weekly: Days of week */}
                  {reviewingBlock.recurrence_type === 'WEEKLY' && reviewingBlock.recurrence_pattern?.days_of_week && (
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.daysOfWeek', 'Days')}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {reviewingBlock.recurrence_pattern.days_of_week
                          .map(d => ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d])
                          .join(', ')}
                      </span>
                    </div>
                  )}

                  {/* Monthly: Days of month */}
                  {reviewingBlock.recurrence_type === 'MONTHLY' && reviewingBlock.recurrence_pattern?.days_of_month && (
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.daysOfMonth', 'Days of Month')}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {reviewingBlock.recurrence_pattern.days_of_month.join(', ')}
                      </span>
                    </div>
                  )}

                  {/* Yearly: Month and day */}
                  {reviewingBlock.recurrence_type === 'YEARLY' && reviewingBlock.recurrence_pattern?.month && (
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.yearlyDate', 'Annual Date')}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][reviewingBlock.recurrence_pattern.month - 1]} {reviewingBlock.recurrence_pattern.day}
                      </span>
                    </div>
                  )}

                  {/* Recurrence period (start/end) for recurring blocks */}
                  {reviewingBlock.recurrence_type !== 'NONE' && (reviewingBlock.recurrence_start || reviewingBlock.recurrence_end) && (
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.effectivePeriod', 'Effective Period')}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {reviewingBlock.recurrence_start ? (
                          new Date(reviewingBlock.recurrence_start + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
                        ) : 'No start date'}
                        {' - '}
                        {reviewingBlock.recurrence_end ? (
                          new Date(reviewingBlock.recurrence_end + 'T00:00:00').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
                        ) : 'Ongoing'}
                      </span>
                    </div>
                  )}

                  {/* Time range if not all-day */}
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.timeRange', 'Time')}</span>
                    <span className="font-medium text-gray-900 dark:text-white">
                      {reviewingBlock.all_day !== false ? (
                        t('timeBlocks.allDay', 'All Day')
                      ) : (
                        <>
                          {reviewingBlock.start_time?.slice(0, 5)} - {reviewingBlock.end_time?.slice(0, 5)}
                        </>
                      )}
                    </span>
                  </div>
                </div>

                {reviewingBlock.description && (
                  <div className="pt-2 border-t border-gray-200 dark:border-gray-700">
                    <span className="text-sm text-gray-500 dark:text-gray-400 block mb-1">{t('timeBlocks.description', 'Description')}</span>
                    <p className="text-sm text-gray-700 dark:text-gray-300">{reviewingBlock.description}</p>
                  </div>
                )}
                {reviewingBlock.created_by_name && (
                  <div className="flex items-center justify-between pt-2 border-t border-gray-200 dark:border-gray-700">
                    <span className="text-sm text-gray-500 dark:text-gray-400">{t('timeBlocks.requestedBy', 'Requested by')}</span>
                    <span className="font-medium text-gray-900 dark:text-white">{reviewingBlock.created_by_name}</span>
                  </div>
                )}
              </div>

              {/* Notes */}
              <div className="mb-6">
                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  <MessageSquare size={14} className="inline mr-1" />
                  {t('timeBlocks.reviewNotes', 'Notes (optional)')}
                </label>
                <textarea
                  value={reviewNotes}
                  onChange={(e) => setReviewNotes(e.target.value)}
                  placeholder={t('timeBlocks.reviewNotesPlaceholder', 'Add a note for the requester...')}
                  className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-brand-500 focus:border-transparent"
                  rows={3}
                />
              </div>

              {/* Actions */}
              <div className="flex justify-end gap-3">
                <button
                  onClick={() => {
                    setReviewingBlock(null);
                    setReviewNotes('');
                  }}
                  className="px-4 py-2 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
                >
                  {t('common.cancel', 'Cancel')}
                </button>
                <button
                  onClick={() => handleDeny(reviewingBlock.id)}
                  disabled={denyBlock.isPending}
                  className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2"
                >
                  {denyBlock.isPending ? (
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
                  ) : (
                    <XCircle size={18} />
                  )}
                  {t('timeBlocks.deny', 'Deny')}
                </button>
                <button
                  onClick={() => handleApprove(reviewingBlock.id)}
                  disabled={approveBlock.isPending}
                  className="px-4 py-2 bg-green-600 text-white hover:bg-green-700 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2"
                >
                  {approveBlock.isPending ? (
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
                  ) : (
                    <CheckCircle size={18} />
                  )}
                  {t('timeBlocks.approve', 'Approve')}
                </button>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </div>
  );
};

export default TimeBlocks;