/**
 * My Availability Page
 *
 * Staff-facing page to view and manage their own time blocks.
 * Uses the same UI as TimeBlocks but locked to the staff's own resource.
 * Shows business-level blocks (read-only) and personal blocks (editable).
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useOutletContext } from 'react-router-dom';
import {
  TimeBlockListItem,
  BlockType,
  RecurrenceType,
  User,
} from '../types';
import {
  useMyBlocks,
  useCreateTimeBlock,
  useUpdateTimeBlock,
  useDeleteTimeBlock,
  useToggleTimeBlock,
  useHolidays,
} from '../hooks/useTimeBlocks';
import Portal from '../components/Portal';
import YearlyBlockCalendar from '../components/time-blocks/YearlyBlockCalendar';
import TimeBlockCreatorModal from '../components/time-blocks/TimeBlockCreatorModal';
import {
  Calendar,
  Building2,
  User as UserIcon,
  Plus,
  Pencil,
  Trash2,
  AlertTriangle,
  Clock,
  CalendarDays,
  Ban,
  AlertCircle,
  Power,
  PowerOff,
  Info,
  CheckCircle,
  XCircle,
  HourglassIcon,
} from 'lucide-react';

type AvailabilityTab = 'blocks' | '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',
};

interface MyAvailabilityProps {
  user?: User;
}

const MyAvailability: React.FC<MyAvailabilityProps> = (props) => {
  const { t } = useTranslation();
  const contextUser = useOutletContext<{ user?: User }>()?.user;
  const user = props.user || contextUser;

  const [activeTab, setActiveTab] = useState<AvailabilityTab>('blocks');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingBlock, setEditingBlock] = useState<TimeBlockListItem | null>(null);
  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);

  // Fetch data
  const { data: myBlocksData, isLoading } = useMyBlocks();
  const { data: holidays = [] } = useHolidays('US');

  // Mutations
  const createBlock = useCreateTimeBlock();
  const updateBlock = useUpdateTimeBlock();
  const deleteBlock = useDeleteTimeBlock();
  const toggleBlock = useToggleTimeBlock();

  // 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);
    }
  };

  // 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 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>
  );

  // Render approval status badge
  const renderApprovalBadge = (status: string | undefined) => {
    if (!status || status === 'APPROVED') {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
          <CheckCircle size={12} className="mr-1" />
          {t('myAvailability.approved', 'Approved')}
        </span>
      );
    }
    if (status === 'PENDING') {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
          <HourglassIcon size={12} className="mr-1" />
          {t('myAvailability.pending', 'Pending Review')}
        </span>
      );
    }
    if (status === 'DENIED') {
      return (
        <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300">
          <XCircle size={12} className="mr-1" />
          {t('myAvailability.denied', 'Denied')}
        </span>
      );
    }
    return null;
  };

  // Handle no linked resource
  if (!isLoading && !myBlocksData?.resource_id) {
    return (
      <div className="space-y-6 p-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {t('myAvailability.title', 'My Availability')}
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {t('myAvailability.subtitle', 'Manage your time off and unavailability')}
          </p>
        </div>

        <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
          <AlertTriangle size={48} className="mx-auto text-yellow-500 mb-4" />
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            {t('myAvailability.noResource', 'No Resource Linked')}
          </h3>
          <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
            {t('myAvailability.noResourceDesc', 'Your account is not linked to a resource. Please contact your manager to set up your availability.')}
          </p>
        </div>
      </div>
    );
  }

  // Create a mock resource for the modal
  const staffResource = myBlocksData?.resource_id ? {
    id: myBlocksData.resource_id,
    name: myBlocksData.resource_name || 'My Resource',
  } : null;

  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('myAvailability.title', 'My Availability')}
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {t('myAvailability.subtitle', 'Manage your time off and 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('myAvailability.addBlock', 'Block Time')}
        </button>
      </div>

      {/* Approval Required Banner */}
      {myBlocksData?.can_self_approve === false && (
        <div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <HourglassIcon size={20} className="text-amber-600 dark:text-amber-400 mt-0.5" />
            <div>
              <h3 className="font-medium text-amber-900 dark:text-amber-100">
                {t('myAvailability.approvalRequired', 'Approval Required')}
              </h3>
              <p className="text-sm text-amber-700 dark:text-amber-300 mt-1">
                {t('myAvailability.approvalRequiredInfo', 'Your time off requests require manager or owner approval. New blocks will show as "Pending Review" until approved.')}
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Business Blocks Info Banner */}
      {myBlocksData?.business_blocks && myBlocksData.business_blocks.length > 0 && (
        <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
          <div className="flex items-start gap-3">
            <Building2 size={20} className="text-blue-600 dark:text-blue-400 mt-0.5" />
            <div>
              <h3 className="font-medium text-blue-900 dark:text-blue-100">
                {t('myAvailability.businessBlocks', 'Business Closures')}
              </h3>
              <p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
                {t('myAvailability.businessBlocksInfo', 'These blocks are set by your business and apply to everyone:')}
              </p>
              <div className="mt-2 flex flex-wrap gap-2">
                {myBlocksData.business_blocks.map((block) => (
                  <span
                    key={block.id}
                    className="inline-flex items-center gap-1 px-2 py-1 bg-blue-100 dark:bg-blue-800/50 text-blue-800 dark:text-blue-200 rounded text-sm"
                  >
                    {block.title}
                    {renderRecurrenceBadge(block.recurrence_type)}
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Tabs */}
      <div className="border-b border-gray-200 dark:border-gray-700">
        <nav className="flex gap-1" aria-label="Availability tabs">
          <button
            onClick={() => setActiveTab('blocks')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
              activeTab === 'blocks'
                ? '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'
            }`}
          >
            <UserIcon size={18} />
            {t('myAvailability.myBlocksTab', 'My Time Blocks')}
            {myBlocksData?.my_blocks && myBlocksData.my_blocks.length > 0 && (
              <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded-full text-xs">
                {myBlocksData.my_blocks.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('myAvailability.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 === 'blocks' && (
            <>
              {/* Resource Info Banner */}
              <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 flex items-center gap-2">
                  <UserIcon size={16} />
                  {t('myAvailability.resourceInfo', 'Managing blocks for:')}
                  <span className="font-semibold">{myBlocksData?.resource_name}</span>
                </p>
              </div>

              {/* My Blocks List */}
              {myBlocksData?.my_blocks && myBlocksData.my_blocks.length === 0 ? (
                <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <Calendar 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('myAvailability.noBlocks', 'No Time Blocks')}
                  </h3>
                  <p className="text-gray-500 dark:text-gray-400 mb-4">
                    {t('myAvailability.noBlocksDesc', 'Add time blocks for vacations, lunch breaks, or any time you need off.')}
                  </p>
                  <button
                    onClick={openCreateModal}
                    className="inline-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('myAvailability.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('myAvailability.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('myAvailability.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('myAvailability.patternCol', 'Pattern')}
                        </th>
                        <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('myAvailability.statusCol', 'Status')}
                        </th>
                        <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                          {t('myAvailability.actionsCol', 'Actions')}
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
                      {myBlocksData?.my_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">
                            <div className="flex flex-col gap-1">
                              {renderApprovalBadge((block as any).approval_status)}
                              {(block as any).review_notes && (
                                <span className="text-xs text-gray-500 dark:text-gray-400 italic">
                                  "{(block as any).review_notes}"
                                </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 === 'calendar' && (
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
              <YearlyBlockCalendar
                resourceId={myBlocksData?.resource_id}
                onBlockClick={(blockId) => {
                  // Find the block and open edit modal if it's my block
                  const block = myBlocksData?.my_blocks.find(b => b.id === blockId);
                  if (block) {
                    openEditModal(block);
                  }
                }}
              />
            </div>
          )}
        </div>
      )}

      {/* Create/Edit Modal - Using TimeBlockCreatorModal in staff mode */}
      <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={staffResource ? [staffResource as any] : []}
        isResourceLevel={true}
        staffMode={true}
        staffResourceId={myBlocksData?.resource_id}
      />

      {/* 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('myAvailability.deleteConfirmTitle', 'Delete Time Block?')}
                  </h3>
                  <p className="text-sm text-gray-500 dark:text-gray-400">
                    {t('myAvailability.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>
      )}
    </div>
  );
};

export default MyAvailability;