import { Drawer, Button, Space, Tag, Typography, Divider, theme } from 'antd';
import {
  ClockCircleOutlined,
  EnvironmentOutlined,
  CalendarOutlined,
  EditOutlined,
  DeleteOutlined,
  BellOutlined,
  LockOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import type { PersonalCalendarItem } from '@/types/api';
import { hexToRgba, formatTimeShort } from './calendarUtils';

const { Text, Title } = Typography;

interface CalendarItemDetailProps {
  item: PersonalCalendarItem | null;
  open: boolean;
  onClose: () => void;
  onEdit: (item: PersonalCalendarItem) => void;
  onDelete: (item: PersonalCalendarItem) => void;
}

export default function CalendarItemDetail({
  item,
  open,
  onClose,
  onEdit,
  onDelete,
}: CalendarItemDetailProps) {
  const { token } = theme.useToken();

  if (!item) return null;

  const isPersonal = item.type === 'personal';
  const isTimeBlock = item.itemType === 'TIME_BLOCK';
  const isReminder = item.itemType === 'REMINDER';
  const color = item.color || token.colorPrimary;

  return (
    <Drawer
      open={open}
      onClose={onClose}
      width={360}
      title={null}
      closable={false}
      styles={{
        body: { padding: '16px 20px', display: 'flex', flexDirection: 'column' },
      }}
    >
      {/* Color bar + title */}
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 16 }}>
        <div
          style={{
            width: 4,
            height: 40,
            borderRadius: 2,
            background: color,
            flexShrink: 0,
            marginTop: 2,
          }}
        />
        <div style={{ flex: 1, minWidth: 0 }}>
          <Title level={5} style={{ margin: 0 }}>
            {isReminder && <BellOutlined style={{ marginRight: 6, fontSize: 14 }} />}
            {isTimeBlock && item.showDetailsTo === 'NOBODY' ? (
              <>
                <LockOutlined style={{ marginRight: 6, fontSize: 14 }} />
                Busy
              </>
            ) : (
              item.title
            )}
          </Title>
          {item.type !== 'personal' && (
            <Tag
              color="blue"
              style={{ marginTop: 4, fontSize: 11, textTransform: 'capitalize' }}
            >
              {item.type}
            </Tag>
          )}
          {isTimeBlock && (
            <Tag style={{ marginTop: 4, fontSize: 11 }}>Time Block</Tag>
          )}
        </div>
      </div>

      <Divider style={{ margin: '12px 0' }} />

      {/* Date & time */}
      <DetailRow icon={<CalendarOutlined />}>
        {dayjs(item.date).format('dddd, MMMM D, YYYY')}
      </DetailRow>

      <DetailRow icon={<ClockCircleOutlined />}>
        {item.isAllDay
          ? 'All day'
          : `${formatTimeShort(item.startTime)} - ${formatTimeShort(item.endTime)}`}
      </DetailRow>

      {/* Location */}
      {item.location && (
        <DetailRow icon={<EnvironmentOutlined />}>
          {item.location}
        </DetailRow>
      )}

      {/* Busy status */}
      {item.busyStatus && item.busyStatus !== 'BUSY' && (
        <DetailRow icon={null}>
          <Tag style={{ fontSize: 11, textTransform: 'capitalize' }}>
            {item.busyStatus.toLowerCase().replace('_', ' ')}
          </Tag>
        </DetailRow>
      )}

      {/* Recurrence */}
      {item.isRecurring && (
        <DetailRow icon={null}>
          <Tag color="purple" style={{ fontSize: 11 }}>Recurring</Tag>
        </DetailRow>
      )}

      {/* Layer color indicator */}
      <div style={{ marginTop: 16 }}>
        <div
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
            padding: '4px 10px',
            borderRadius: 12,
            background: hexToRgba(color, 0.12),
            border: `1px solid ${hexToRgba(color, 0.25)}`,
            fontSize: 12,
          }}
        >
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: color }} />
          <Text style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)' }}>
            {item.type === 'personal' ? 'Personal' : item.type}
          </Text>
        </div>
      </div>

      {/* Bottom actions: Close on left, Edit/Delete on right */}
      <div style={{ marginTop: 'auto', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Button onClick={onClose}>
          Close
        </Button>
        {isPersonal && (
          <Space>
            <Button
              danger
              icon={<DeleteOutlined />}
              onClick={() => {
                onClose();
                onDelete(item);
              }}
            >
              Delete
            </Button>
            <Button
              type="primary"
              icon={<EditOutlined />}
              onClick={() => {
                onClose();
                onEdit(item);
              }}
            >
              Edit
            </Button>
          </Space>
        )}
      </div>
    </Drawer>
  );
}

function DetailRow({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
      {icon && (
        <span style={{ fontSize: 14, color: 'rgba(255,255,255,0.45)', width: 16, textAlign: 'center' }}>
          {icon}
        </span>
      )}
      <Text style={{ fontSize: 14 }}>{children}</Text>
    </div>
  );
}
