import { Button, Typography } from 'antd';
import { StopOutlined } from '@ant-design/icons';
import SessionTimer from './SessionTimer';

interface VolunteerSessionBarProps {
  sessionCutName?: string;
  sessionStartedAt?: string;
  onEndSession: () => void;
  endingSession: boolean;
  headerGradient?: string;
}

/**
 * Slim session info bar pinned above the footer nav.
 * Only rendered when a canvass session is active.
 * Shows cut name, timer, and end button.
 */
export default function VolunteerSessionBar({
  sessionCutName,
  sessionStartedAt,
  onEndSession,
  endingSession,
  headerGradient,
}: VolunteerSessionBarProps) {
  return (
    <div
      style={{
        position: 'absolute',
        bottom: `max(60px, calc(56px + 4px + env(safe-area-inset-bottom)))`,
        paddingBottom: 'env(safe-area-inset-bottom)',
        left: 0,
        right: 0,
        height: 40,
        zIndex: 1000,
        background: headerGradient ?? 'linear-gradient(135deg, #005a9c 0%, #007acc 100%)',
        display: 'flex',
        alignItems: 'center',
        padding: '0 12px',
        gap: 8,
      }}
    >
      <Typography.Text
        strong
        style={{
          color: '#fff',
          fontSize: 13,
          flex: 1,
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          textShadow: '0 1px 2px rgba(0,0,0,0.3)',
        }}
      >
        {sessionCutName ?? 'Session'}
      </Typography.Text>
      {sessionStartedAt && <SessionTimer startedAt={sessionStartedAt} />}
      <Button
        danger
        size="middle"
        icon={<StopOutlined />}
        onClick={onEndSession}
        loading={endingSession}
        aria-label="End session"
      >
        End
      </Button>
    </div>
  );
}
