import React, { useCallback, useEffect, useMemo, useState } from 'react';
import {
  CartesianGrid,
  Line,
  LineChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';
import { api, errorMessage } from '../services/apiClient.ts';
import type { ChickenWeight, KPI } from '../types/api.ts';
import { useFarm } from '../context/FarmContext.tsx';
import { Banner, EmptyFarm, PageHeader, Spinner } from './ui/Feedback.tsx';
import { formatNumber, formatRatio } from '../utils/format.ts';
import { buildFcrInsightContext } from '../utils/insightContextBuilders.ts';
import { PageAiInsight } from './shared/PageAiInsight.tsx';

type FcrRow = {
  day: number;
  feedTotal: number;
  iotWeight: number | null;
  chickenLife: number;
  harvestWeightKg: number;
  fcr: number | null;
};

type TrendPoint = { day: number; fcr: number | null };
type SupportPoint = {
  day: number;
  feedTotal: number;
  iotWeight: number | null;
  chickenLife: number;
  harvestWeightKg: number;
};

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

const formatNum = (value: number | null | undefined, maxDecimals = 0): string =>
  value == null || !Number.isFinite(Number(value))
    ? 'N/A'
    : formatNumber(Number(value), maxDecimals, 0, true);

const StatCard: React.FC<{ title: string; value: string; unit: string }> = ({
  title,
  value,
  unit,
}) => (
  <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <p className="text-sm font-semibold text-gray-500">{title}</p>
    <div className="mt-2 flex items-baseline gap-2">
      <span className="text-2xl font-bold text-gray-800">{value}</span>
      <span className="text-sm font-semibold text-gray-500">{unit}</span>
    </div>
  </div>
);

const FcrTrendChart: React.FC<{ data: TrendPoint[] }> = ({ data }) => (
  <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
    <h2 className="text-xl font-bold text-gray-800 mb-4">Grafik FCR</h2>
    <div className="h-80">
      {data.length === 0 ? (
        <div className="flex h-full items-center justify-center text-sm text-gray-500">
          Tidak ada data FCR tersedia.
        </div>
      ) : (
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 20, left: -10, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
            <XAxis dataKey="day" fontSize={12} tick={{ fill: '#6b7280' }} />
            <YAxis
              fontSize={12}
              tick={{ fill: '#6b7280' }}
              width={50}
              domain={[0, 'dataMax + 0.2']}
              label={{ value: 'FCR', angle: -90, position: 'insideLeft' }}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                border: '1px solid #d1d5db',
                borderRadius: '8px',
              }}
              formatter={(value) => [formatFcr(Number(value)), 'FCR']}
              labelFormatter={(label) => `Hari ${label}`}
            />
            <Line
              type="monotone"
              dataKey="fcr"
              name="FCR"
              stroke="#16a34a"
              strokeWidth={2.5}
              dot={{ r: 4 }}
              activeDot={{ r: 6 }}
              connectNulls
            />
          </LineChart>
        </ResponsiveContainer>
      )}
    </div>
  </div>
);

const SupportingMetricChart: React.FC<{
  title: string;
  data: SupportPoint[];
  dataKey: keyof Omit<SupportPoint, 'day'>;
  unit: string;
  stroke: string;
  maximumFractionDigits?: number;
}> = ({ title, data, dataKey, unit, stroke, maximumFractionDigits = 0 }) => (
  <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
    <h3 className="text-lg font-bold text-gray-800 mb-4">{title}</h3>
    <div className="h-64">
      {data.length === 0 ? (
        <div className="flex h-full items-center justify-center text-sm text-gray-500">
          Tidak ada data tersedia.
        </div>
      ) : (
        <ResponsiveContainer width="100%" height="100%">
          <LineChart data={data} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
            <XAxis dataKey="day" fontSize={12} tick={{ fill: '#6b7280' }} />
            <YAxis
              fontSize={12}
              tick={{ fill: '#6b7280' }}
              tickFormatter={(value) => formatNum(Number(value), maximumFractionDigits)}
              width={70}
            />
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                border: '1px solid #d1d5db',
                borderRadius: '8px',
              }}
              formatter={(value) => [
                `${formatNum(Number(value), maximumFractionDigits)} ${unit}`,
                title,
              ]}
              labelFormatter={(label) => `Hari ${label}`}
            />
            <Line
              type="monotone"
              dataKey={dataKey}
              name={title}
              stroke={stroke}
              strokeWidth={2.5}
              dot={{ r: 3 }}
              activeDot={{ r: 5 }}
              connectNulls
            />
          </LineChart>
        </ResponsiveContainer>
      )}
    </div>
  </div>
);

const FcrDashboardPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
  const { selectedCycle, selectedKandang } = useFarm();
  const [rows, setRows] = useState<KPI[]>([]);
  const [weightRows, setWeightRows] = useState<ChickenWeight[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

  const loadData = useCallback(async () => {
    if (!selectedCycle) return;
    setError(null);
    try {
      const [kpiRows, weightList] = await Promise.all([
        api.kpis.list({ cycle_id: selectedCycle.id }),
        api.weights.list({ cycle_id: selectedCycle.id }),
      ]);
      setRows(kpiRows);
      setWeightRows(weightList);
      setLastUpdated(new Date());
    } catch (err) {
      setError(errorMessage(err));
    }
  }, [selectedCycle]);

  useEffect(() => {
    if (!selectedCycle) {
      setRows([]);
      setWeightRows([]);
      setLastUpdated(null);
      return;
    }
    let cancelled = false;
    (async () => {
      setLoading(true);
      try {
        await loadData();
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [selectedCycle, loadData]);

  const weightByAge = useMemo(() => {
    const map = new Map<number, number>();
    for (const weight of weightRows) {
      if (weight.average_weight > 0 && !map.has(weight.age)) {
        map.set(weight.age, weight.average_weight);
      }
    }
    return map;
  }, [weightRows]);

  const fcrRows = useMemo<FcrRow[]>(
    () =>
      [...rows]
        .sort((a, b) => a.age - b.age || a.date.localeCompare(b.date))
        .map((row) => ({
          day: row.age,
          feedTotal: row.feed_total,
          iotWeight: weightByAge.get(row.age) ?? null,
          chickenLife: row.chicken_life,
          harvestWeightKg: row.harvest_weight_total / 1000,
          fcr: row.fcr > 0 ? row.fcr : null,
        })),
    [rows, weightByAge]
  );

  const trendData = useMemo<TrendPoint[]>(
    () => fcrRows.map((row) => ({ day: row.day, fcr: row.fcr })),
    [fcrRows]
  );

  const supportData = useMemo<SupportPoint[]>(
    () =>
      fcrRows.map((row) => ({
        day: row.day,
        feedTotal: row.feedTotal,
        iotWeight: row.iotWeight,
        chickenLife: row.chickenLife,
        harvestWeightKg: row.harvestWeightKg,
      })),
    [fcrRows]
  );

  const getLatestValid = <K extends keyof FcrRow>(key: K): FcrRow[K] | null => {
    for (let i = fcrRows.length - 1; i >= 0; i--) {
      const val = fcrRows[i]?.[key];
      if (val !== null && val !== undefined && val !== 0 && String(val) !== '') {
        return val;
      }
    }
    return null;
  };

  const latestFcr = getLatestValid('fcr');
  const latestIotWeight = getLatestValid('iotWeight');

  const insightContext = useMemo(() => {
    if (!selectedKandang) return null;
    return buildFcrInsightContext({
      kandangId: selectedKandang.id,
      kandangName: selectedKandang.kandang_name,
      cycleId: selectedCycle?.id,
      totalDays: selectedCycle?.total_days ?? null,
      fcrRows,
    });
  }, [selectedKandang, selectedCycle, fcrRows]);

  if (!selectedCycle) return <EmptyFarm onSettings={onSettings} />;

  return (
    <main className="mx-auto max-w-[1240px] space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <PageHeader
          title="FCR"
          subtitle="Dashboard Feed Conversion Ratio berdasarkan data pakan, bobot IoT, ayam hidup, dan panen."
          icon={<i className="fa-solid fa-chart-line" />}
        />
      </div>

      {error && (
        <div>
          <Banner kind="error">{error}</Banner>
        </div>
      )}

      {selectedKandang && insightContext ? (
        <PageAiInsight
          topic="fcr"
          cacheKey={`fcr-k${selectedKandang.id}-c${selectedCycle.id}-rows${fcrRows.length}-fcr${String(latestFcr ?? 'null').replace('.', '_')}`}
          contextData={insightContext}
          chartSpec={{
            type: 'trend',
            historyKey: 'tren_fcr_harian',
            title: 'Tren FCR',
            series: [{ field: 'fcr_aktual', label: 'FCR aktual', color: '#16a34a' }],
          }}
          scalarScope={{
            historyKey: 'tren_fcr_harian',
            derive: {
              fcrTerakhir: { field: 'fcr_aktual', agg: 'lastValid', replaces: 'latestFcr' },
              totalPakan_karung: {
                field: 'total_pakan_karung',
                agg: 'last',
                replaces: 'latestFeedTotal',
                emptyAs: 0,
              },
              bobotIot_gram: {
                field: 'bobot_iot_gram',
                agg: 'lastValid',
                replaces: 'latestIotWeight',
              },
              ayamHidup_ekor: {
                field: 'ayam_hidup_ekor',
                agg: 'last',
                replaces: 'latestChickenLife',
                emptyAs: 0,
              },
            },
            drop: [
              'latestFcr',
              'latestFeedTotal',
              'latestIotWeight',
              'latestChickenLife',
            ],
          }}
        />
      ) : (
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3">
            <i className="fa-solid fa-brain text-red-600 mr-2" />
            AI Insight FCR
          </h2>
          <Banner>Pilih kandang untuk melihat AI Insight.</Banner>
        </section>
      )}

      {loading ? (
        <Spinner />
      ) : (
        <div className="space-y-8">
          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-6">
            <StatCard title="FCR" value={formatFcr(latestFcr)} unit="" />
            <StatCard
              title="Total Pakan"
              value={formatNum(getLatestValid('feedTotal') ?? 0)}
              unit="Karung"
            />
            <StatCard title="Bobot IoT" value={formatNum(latestIotWeight, 2)} unit="g" />
            <StatCard
              title="Ayam Hidup"
              value={formatNum(getLatestValid('chickenLife') ?? 0)}
              unit="Ekor"
            />
            <StatCard
              title="Total Bobot Panen"
              value={formatNum(getLatestValid('harvestWeightKg') ?? 0, 1)}
              unit="kg"
            />
          </div>

          <FcrTrendChart data={trendData} />

          <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-6 py-4 border-b border-gray-100">
              <h2 className="text-xl font-bold text-gray-800">Data Pendukung FCR</h2>
              {lastUpdated && (
                <p className="text-sm text-gray-500">
                  Update:{' '}
                  {lastUpdated.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}
                </p>
              )}
            </div>

            <div className="p-6">
              <h2 className="text-xl font-bold text-gray-800 mb-4">Grafik Data Pendukung</h2>
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                <SupportingMetricChart
                  title="Total Pakan"
                  data={supportData}
                  dataKey="feedTotal"
                  unit="karung"
                  stroke="#dc2626"
                />
                <SupportingMetricChart
                  title="Bobot IoT"
                  data={supportData}
                  dataKey="iotWeight"
                  unit="g"
                  stroke="#16a34a"
                  maximumFractionDigits={2}
                />
                <SupportingMetricChart
                  title="Ayam Hidup"
                  data={supportData}
                  dataKey="chickenLife"
                  unit="ekor"
                  stroke="#2563eb"
                />
                <SupportingMetricChart
                  title="Total Bobot Panen"
                  data={supportData}
                  dataKey="harvestWeightKg"
                  unit="kg"
                  stroke="#9333ea"
                  maximumFractionDigits={1}
                />
              </div>
            </div>

            <div className="border-t border-gray-100">
              <div className="px-6 py-4">
                <h2 className="text-xl font-bold text-gray-800">Tabel Data Pendukung FCR</h2>
              </div>
              <div className="overflow-auto max-h-[420px] border-t border-gray-100">
                <table className="min-w-full text-sm">
                  <thead className="bg-gray-700 text-white sticky top-0 z-10">
                    <tr>
                      <th className="p-3 text-left font-semibold">Umur</th>
                      <th className="p-3 text-right font-semibold">Total Pakan</th>
                      <th className="p-3 text-right font-semibold">Bobot IoT</th>
                      <th className="p-3 text-right font-semibold">Ayam Hidup</th>
                      <th className="p-3 text-right font-semibold">Total Bobot Panen</th>
                      <th className="p-3 text-right font-semibold">FCR</th>
                    </tr>
                  </thead>
                  <tbody>
                    {fcrRows.map((row) => (
                      <tr key={row.day} className="even:bg-gray-50 hover:bg-red-50">
                        <td className="p-3 font-semibold text-gray-800">Hari {row.day}</td>
                        <td className="p-3 text-right text-gray-700">
                          {formatNum(row.feedTotal)} karung
                        </td>
                        <td className="p-3 text-right text-gray-700">
                          {formatNum(row.iotWeight, 2)}
                          {row.iotWeight != null ? ' g' : ''}
                        </td>
                        <td className="p-3 text-right text-gray-700">
                          {formatNum(row.chickenLife)} ekor
                        </td>
                        <td className="p-3 text-right text-gray-700">
                          {formatNum(row.harvestWeightKg, 1)} kg
                        </td>
                        <td className="p-3 text-right font-mono text-gray-700">
                          {formatFcr(row.fcr)}
                        </td>
                      </tr>
                    ))}
                    {fcrRows.length === 0 && (
                      <tr>
                        <td colSpan={6} className="p-8 text-center text-gray-500">
                          Tidak ada data FCR tersedia.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      )}
    </main>
  );
};

export default FcrDashboardPage;