// Author: fruit.com.cn
import { Link } from 'react-router-dom';
import { useLocale } from '../../app/providers/AppProviders';
import { HistoryGridSkeleton } from '../../shared/components/skeletons';
import { useMutation } from '../../shared/hooks/useMutation';
import { useRequest } from '../../shared/hooks/useRequest';
import { normalizePage } from '../../shared/lib/pagination';
import { watchApi } from '../../shared/api/watch';
import { normalizeProgress } from '../../entities/drama/model';

function episodeLabel(record, localeCode) {
  if (!record.episodeNumber) return '';
  return localeCode === 'zh' ? `第${record.episodeNumber}集` : `Episode ${record.episodeNumber}`;
}

export function HistoryPage() {
  const { locale } = useLocale();
  const history = useRequest(
    ({ signal }) => watchApi.recent(1, 20, { signal }).then((payload) => normalizePage(payload).list.map((item) => normalizeProgress(item, locale.code))),
    [locale.code],
  );
  const clearHistory = useMutation(() => watchApi.clear());
  const records = history.data;
  const errorMessage = history.error?.message || clearHistory.error?.message || '';

  const clearAll = async () => {
    if (!window.confirm(`${locale.clearHistory}?`)) return;
    try {
      await clearHistory.run();
      history.refetch();
    } catch {
      // 错误由 clearHistory.error 呈现
    }
  };

  return (
    <section className="history-page">
      <div className="history-heading">
        <h1>{locale.history}</h1>
        {!!records?.length && <button type="button" onClick={clearAll}>{locale.clearHistory}</button>}
      </div>
      {history.loading && records === null && <HistoryGridSkeleton count={6} label={locale.loading} />}
      {errorMessage && <div className="api-note warning">{errorMessage}</div>}
      {records && !records.length && !errorMessage && <div className="api-note">{locale.historyEmpty}</div>}
      {!!records?.length && (
        <div className="video-grid">
          {records.map((record) => {
            const percent = Math.round(record.fraction * 100);
            const meta = [episodeLabel(record, locale.code), record.durationMs > 0 ? `${percent}%` : ''].filter(Boolean).join(' · ');
            return (
              <article className="history-card" key={record.id}>
                <Link to={`/watch/${record.id}`} className="history-thumb">
                  <img src={record.image} alt={record.title} loading="lazy" />
                  {record.durationMs > 0 && <span className="history-progress"><i style={{ width: `${percent}%` }} /></span>}
                </Link>
                <Link to={`/watch/${record.id}`} className="history-title">{record.title}</Link>
                {meta && <small>{meta}</small>}
              </article>
            );
          })}
        </div>
      )}
    </section>
  );
}