import React, { useState } from 'react';
import styled from 'styled-components';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button, Card } from '@/shared/components/ui';
import {
  fetchTicketTime,
  logTicketTime,
  pauseTimer,
  resumeTimer,
  startTicketTimer,
  stopTimer,
} from '@/features/tickets/services/ticketTimeService';

const Row = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[2]};
  margin-top: ${({ theme }) => theme.spacing[3]};
`;

interface Props {
  ticketId: string;
}

export const TicketTimeTrackingSection: React.FC<Props> = ({ ticketId }) => {
  const { t } = useLocale();
  const queryClient = useQueryClient();
  const [minutes, setMinutes] = useState('30');
  const { data } = useQuery({
    queryKey: ['tickets', ticketId, 'time'],
    queryFn: () => fetchTicketTime(ticketId),
  });

  const invalidate = () =>
    void queryClient.invalidateQueries({ queryKey: ['tickets', ticketId, 'time'] });

  const startMut = useMutation({ mutationFn: () => startTicketTimer(ticketId), onSuccess: invalidate });
  const pauseMut = useMutation({ mutationFn: pauseTimer, onSuccess: invalidate });
  const resumeMut = useMutation({ mutationFn: resumeTimer, onSuccess: invalidate });
  const stopMut = useMutation({ mutationFn: stopTimer, onSuccess: invalidate });
  const logMut = useMutation({
    mutationFn: () => logTicketTime(ticketId, parseInt(minutes, 10)),
    onSuccess: invalidate,
  });

  const summary = data?.summary;
  const state = data?.timer?.state ?? 'not_started';

  return (
    <Card variant="muted" padding="lg" header={t('tickets:time.title')}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        <div>
          <strong>{t('tickets:time.estimated')}</strong>
          <p>{summary?.estimated_hours ?? 0}h</p>
        </div>
        <div>
          <strong>{t('tickets:time.actual')}</strong>
          <p>{summary?.actual_hours ?? 0}h</p>
        </div>
        <div>
          <strong>{t('tickets:time.remaining')}</strong>
          <p>{summary?.remaining_hours ?? 0}h</p>
        </div>
        <div>
          <strong>{t('tickets:time.logged')}</strong>
          <p>{summary?.time_logged_minutes ?? 0}m</p>
        </div>
      </div>
      <Row>
        {state === 'not_started' && (
          <Button type="button" onClick={() => startMut.mutate()}>
            {t('tickets:time.start')}
          </Button>
        )}
        {state === 'running' && (
          <>
            <Button type="button" variant="secondary" onClick={() => pauseMut.mutate()}>
              {t('tickets:time.pause')}
            </Button>
            <Button type="button" onClick={() => stopMut.mutate()}>
              {t('tickets:time.stop')}
            </Button>
          </>
        )}
        {state === 'paused' && (
          <>
            <Button type="button" onClick={() => resumeMut.mutate()}>
              {t('tickets:time.resume')}
            </Button>
            <Button type="button" onClick={() => stopMut.mutate()}>
              {t('tickets:time.stop')}
            </Button>
          </>
        )}
        <input
          type="number"
          value={minutes}
          onChange={(e) => setMinutes(e.target.value)}
          style={{ width: 72 }}
        />
        <Button type="button" variant="secondary" onClick={() => logMut.mutate()}>
          {t('tickets:time.log')}
        </Button>
      </Row>
    </Card>
  );
};