// resources\assets\ts\DataPage\Filters\ListSelector.tsx
import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import { Trans } from '@lingui/macro';
import { TaskState } from '~t/DataPage/types';

type StatusTabsProps = {
  value: TaskState;
  handleTaskStateFilterChange: (state: TaskState) => void;
};

const STATUS_STYLES: Record<TaskState, { label: React.ReactNode; color: string }> = {
  done:     { label: <Trans>Done</Trans>,           color: '#2e7d32' },   // grün
  open:     { label: <Trans>Open</Trans>,           color: '#1565c0' },   // blau
  planned:  { label: <Trans>Planned</Trans>,        color: '#ef6c00' },   // orange
  upcoming: { label: <Trans>Upcoming tasks</Trans>, color: '#6d4c41' },   // braun
};

export default function StatusTabs({
  value,
  handleTaskStateFilterChange,
}: StatusTabsProps) {
  const items = (Object.keys(STATUS_STYLES) as TaskState[]);

  return (
    <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
      <Tabs
        value={value}
        onChange={(_, v) => handleTaskStateFilterChange(v as TaskState)}
        aria-label="Status filter tabs"
        sx={{
          // matcht deinen Stil (Indicator blau)
          '& .MuiTabs-indicator': {
            backgroundColor: 'var(--Google-Blau, rgba(0,153,255,1))',
          },
        }}
      >
        {items.map((key) => {
          const { label, color } = STATUS_STYLES[key];
          return (
            <Tab
              key={key}
              value={key}
              disableRipple
              iconPosition="start"
              // Label mit Dot + Text (passt zu deinen bestehenden Tabs mit Icons)
              label={
                <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}>
                  {label}
                </Box>
              }
              sx={{
                // spiegelt deine Theme-Overrides (falls Theme fehlt, haben wir Fallbacks)
                minHeight: '40px',
                textTransform: 'none',
                fontFamily: 'Roboto',
                fontWeight: 500,
                fontSize: '14px',
                padding: '6px 16px',
                '&.Mui-selected': {
                  color: 'var(--Google-Blau, rgba(0,153,255,1))',
                },
              }}
            />
          );
        })}
      </Tabs>
    </Box>
  );
}