dashboard-cpsp-executive/components/KandangRankingPage.tsx

import React, { useEffect, useState } from 'react';
import { errorMessage } from '../services/apiClient.ts';
import type { View } from '../types/common.ts';
import { useFarm } from '../context/FarmContext.tsx';
import { Banner, EmptyFarm, PageHeader, Spinner } from './ui/Feedback.tsx';
import { formatDateRange, formatRatio } from '../utils/format.ts';
import {
  loadKandangRanking,
  type KandangRankingRow,
} from '../utils/kandangRanking.ts';

type ScopeMode = 'selected' | 'all';

type Props = {
  setView: (view: View) => void;
};

const MONTH_OPTIONS = Array.from({ length: 12 }, (_, i) => i + 1);

const formatMetric = (value: number | null): string =>
  value == null ? 'N/A' : formatRatio(value, 3);

const KandangRankingPage: React.FC<Props> = ({ setView }) => {
  const {
    sites,
    selectedSite,
    selectedSiteId,
    setSelectedSiteId,
    setSelectedKandangId,
    setSelectedCycleId,
  } = useFarm();

  const [scope, setScope] = useState<ScopeMode>('selected');
  const [months, setMonths] = useState(3);
  const [rows, setRows] = useState<KandangRankingRow[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const needsSite = scope === 'selected' && selectedSiteId == null;

  useEffect(() => {
    if (needsSite) {
      setRows([]);
      setError(null);
      setLoading(false);
      return;
    }

    const targetSites =
      scope === 'all' ? sites : selectedSite ? [selectedSite] : [];
    if (targetSites.length === 0) {
      setRows([]);
      return;
    }

    let cancelled = false;
    (async () => {
      setLoading(true);
      setError(null);
      try {
        const next = await loadKandangRanking({ sites: targetSites, months });
        if (!cancelled) setRows(next);
      } catch (err) {
        if (!cancelled) {
          setError(errorMessage(err));
          setRows([]);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [scope, months, sites, selectedSite, selectedSiteId, needsSite]);

  const openEef = (row: KandangRankingRow) => {
    setSelectedSiteId(row.siteId);
    setSelectedKandangId(row.kandangId);
    setSelectedCycleId(row.cycleId);
    setView('eefDashboard');
  };

  if (needsSite) {
    return (
      <div>
        <PageHeader
          title="Peringkat Kandang"
          subtitle="Peringkat siklus tertutup berdasarkan EEF"
        />
        <EmptyFarm onSettings={() => setView('kandangSettings')} />
      </div>
    );
  }

  const showSiteColumn = scope === 'all';

  return (
    <div>
      <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-4">
        <PageHeader
          title="Peringkat Kandang"
          subtitle={
            scope === 'all'
              ? 'Semua site · siklus tertutup berdasarkan EEF'
              : `${selectedSite?.site_name ?? 'Site'} · siklus tertutup berdasarkan EEF`
          }
        />
        <div className="flex flex-wrap items-center gap-3">
          <div className="inline-flex rounded-lg border border-gray-200 bg-white p-1">
            <button
              type="button"
              className={`px-3 py-1.5 text-xs font-semibold rounded-md ${
                scope === 'selected'
                  ? 'bg-red-600 text-white'
                  : 'text-gray-600 hover:bg-gray-50'
              }`}
              onClick={() => setScope('selected')}
            >
              Site terpilih
            </button>
            <button
              type="button"
              className={`px-3 py-1.5 text-xs font-semibold rounded-md ${
                scope === 'all'
                  ? 'bg-red-600 text-white'
                  : 'text-gray-600 hover:bg-gray-50'
              }`}
              onClick={() => setScope('all')}
            >
              Semua site
            </button>
          </div>
          <label className="flex items-center gap-2 text-sm text-gray-600">
            <span className="font-semibold">Rentang</span>
            <select
              className="rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-gray-800"
              value={months}
              onChange={(e) => setMonths(Number(e.target.value))}
            >
              {MONTH_OPTIONS.map((m) => (
                <option key={m} value={m}>
                  {m} bulan
                </option>
              ))}
            </select>
          </label>
        </div>
      </div>

      {error && (
        <div className="mb-4">
          <Banner kind="error">{error}</Banner>
        </div>
      )}

      {loading ? (
        <Spinner />
      ) : rows.length === 0 ? (
        <Banner>Tidak ada siklus tertutup dalam rentang ini.</Banner>
      ) : (
        <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b border-gray-100 text-left text-xs uppercase tracking-wide text-gray-500">
                <th className="px-4 py-3 font-semibold">Rank</th>
                {showSiteColumn && <th className="px-4 py-3 font-semibold">Site</th>}
                <th className="px-4 py-3 font-semibold">Kandang</th>
                <th className="px-4 py-3 font-semibold">Periode</th>
                <th className="px-4 py-3 font-semibold">Hari</th>
                <th className="px-4 py-3 font-semibold">EEF</th>
                <th className="px-4 py-3 font-semibold">FCR</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr
                  key={`${row.cycleId}-${row.kandangId}`}
                  className="border-b border-gray-50 hover:bg-gray-50 cursor-pointer"
                  onClick={() => openEef(row)}
                >
                  <td className="px-4 py-3 font-semibold text-gray-800">
                    {row.rank > 0 ? row.rank : '—'}
                  </td>
                  {showSiteColumn && (
                    <td className="px-4 py-3 text-gray-700">{row.siteName}</td>
                  )}
                  <td className="px-4 py-3 font-medium text-gray-800">{row.kandangName}</td>
                  <td className="px-4 py-3 text-gray-600">
                    {formatDateRange(row.startDate, row.endDate)}
                  </td>
                  <td className="px-4 py-3 text-gray-600">{row.totalDays || '—'}</td>
                  <td className="px-4 py-3 font-semibold text-gray-900">
                    {formatMetric(row.eef)}
                  </td>
                  <td className="px-4 py-3 text-gray-600">{formatMetric(row.fcr)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
};

export default KandangRankingPage;