frontend/src/components/Header.jsx

import React from 'react'
import { Group, Title, Badge, Button, Text, Box } from '@mantine/core'
import { IconRefresh } from '@tabler/icons-react'
import { useXRD } from '../context/XRDContext'

const Header = () => {
  const { filename, analysisStatus, handleReset } = useXRD()
  
  const getStatusBadge = () => {
    switch (analysisStatus) {
      case 'PROCESSING':
        return (
          <Badge color="blue" variant="light" size="lg">
            Analyzing...
          </Badge>
        )
      case 'COMPLETE':
        return (
          <Badge color="green" variant="light" size="lg">
            Analysis Complete
          </Badge>
        )
      default:
        return (
          <Badge color="gray" variant="light" size="lg">
            Ready
          </Badge>
        )
    }
  }
  
  return (
    <Box
      style={{
        borderBottom: '1px solid #e9ecef',
        backgroundColor: 'white',
        padding: '1rem 2rem',
      }}
    >
      <Group justify="space-between" align="center">
        {/* Left: Logo/App Name */}
        <Title 
          order={2} 
          style={{ 
            fontWeight: 700, 
            letterSpacing: '-0.02em',
            background: 'linear-gradient(135deg, #9775fa 0%, #1e88e5 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text'
          }}
        >
          Open AlphaDiffract Demo
        </Title>
        
        {/* Center: Filename and Status */}
        <Group gap="md">
          <Text size="sm" c="dimmed" style={{ fontFamily: 'monospace' }}>
            {filename || 'No File Loaded'}
          </Text>
          {getStatusBadge()}
        </Group>
        
        {/* Right: Action Toolbar */}
        <Group gap="sm">
          <Button
            variant="subtle"
            leftSection={<IconRefresh size={16} />}
            size="sm"
            onClick={handleReset}
          >
            Reset
          </Button>
        </Group>
      </Group>
    </Box>
  )
}

export default Header