import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { PageHeader } from '@/shared/components/layout/PageHeader';
import { PageStack } from '@/shared/components/layout/PageStack';
import { ContentPanel } from '@/shared/components/layout/ContentPanel';
import { Spinner } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useMyWork } from '@/features/tickets/hooks/useMyWork';

const Widgets = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: ${({ theme }) => theme.layout.cardGap};
`;

const MyWorkPage: React.FC = () => {
  const { t } = useLocale();
  const { data, isLoading } = useMyWork();
  return (
    <AppLayout>
      <PageHeader title={t('myWork:title')} />
      {isLoading && <Spinner />}
      {data && (
        <PageStack>
          <Widgets>
            <ContentPanel>
              <strong>{t('myWork:assigned')}</strong>
              <p>{data.widgets.assigned_count}</p>
            </ContentPanel>
            <ContentPanel>
              <strong>{t('myWork:overdue')}</strong>
              <p>{data.widgets.overdue_count}</p>
            </ContentPanel>
            <ContentPanel>
              <strong>{t('myWork:dueToday')}</strong>
              <p>{data.widgets.due_today_count}</p>
            </ContentPanel>
            <ContentPanel>
              <strong>{t('myWork:estimatedMd')}</strong>
              <p>{data.widgets.estimated_md}</p>
            </ContentPanel>
          </Widgets>
          <ContentPanel>
            <h3>{t('myWork:sections.assigned')}</h3>
            {data.assigned.map((item) => (
              <div key={item.id} style={{ marginBottom: 8 }}>
                <Link to={ROUTES.TICKET_DETAIL(item.id)}>
                  {item.ticket_number} — {item.subject}
                </Link>
              </div>
            ))}
          </ContentPanel>
          <ContentPanel>
            <h3>{t('myWork:sections.collaborating')}</h3>
            {data.collaborating.map((item) => (
              <div key={item.id}>
                <Link to={ROUTES.TICKET_DETAIL(item.id)}>{item.ticket_number}</Link>
              </div>
            ))}
          </ContentPanel>
          <ContentPanel>
            <h3>{t('myWork:sections.overdue')}</h3>
            {data.overdue.map((item) => (
              <div key={item.id}>
                <Link to={ROUTES.TICKET_DETAIL(item.id)}>{item.ticket_number}</Link>
              </div>
            ))}
          </ContentPanel>
        </PageStack>
      )}
    </AppLayout>
  );
};

export default MyWorkPage;