import type { WatchListView } from '@dorfteich/shared';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { EyeOff } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';

import { apiDelete, apiGet } from '../lib/api';

/**
 * The account's watch list (issue #93): everything the user follows, with
 * links to the targets and an unwatch action per entry.
 */
export function WatchesSection(): React.JSX.Element {
  const { t } = useTranslation('watches');
  const queryClient = useQueryClient();
  const list = useQuery({
    queryKey: ['watches'],
    queryFn: () => apiGet<WatchListView>('/users/me/watches'),
  });

  const unwatch = async (targetType: string, targetId: string): Promise<void> => {
    await apiDelete(`/watches/${targetType}/${targetId}`);
    await queryClient.invalidateQueries({ queryKey: ['watches'] });
    await queryClient.invalidateQueries({ queryKey: ['watch', targetType, targetId] });
  };

  return (
    <section className="settings-section">
      <h2>{t('settings.title')}</h2>
      {list.data && list.data.watches.length === 0 && <p>{t('settings.empty')}</p>}
      {list.data && list.data.watches.length > 0 && (
        <ul className="watches-list">
          {list.data.watches.map((watch) => (
            <li key={watch.id}>
              <Link
                to={
                  watch.targetType === 'pond'
                    ? `/p/${watch.pondSlug}`
                    : `/p/${watch.pondSlug}/${watch.slug}`
                }
              >
                {watch.name}
              </Link>
              <span className="watches-list__type">{t(`settings.types.${watch.targetType}`)}</span>
              <button
                type="button"
                className="icon-button watches-list__unwatch"
                aria-label={t('settings.unwatch')}
                title={t('settings.unwatch')}
                onClick={() => void unwatch(watch.targetType, watch.targetId)}
              >
                <EyeOff aria-hidden />
              </button>
            </li>
          ))}
        </ul>
      )}
    </section>
  );
}