import React, { useEffect, useMemo, useState } from 'react';
import { api, ApiError, errorMessage } from '../services/apiClient.ts';
import type {
  AIInsight,
  ChickenCounting,
  ChickenWeight,
  Karung,
  KPI,
  LatestAvg,
} from '../types/api.ts';
import type { View } from '../types/common.ts';
import { useFarm } from '../context/FarmContext.tsx';
import KpiCard, { type KpiCardModel } from './KpiCard.tsx';
import { Banner, EmptyFarm, PageHeader, Spinner } from './ui/Feedback.tsx';
import { formatNumber, formatDateRange } from '../utils/format.ts';
import DashboardReportCtas from './dashboard/DashboardReportCtas.tsx';
import DashboardManualInputForm from './dashboard/DashboardManualInputForm.tsx';
import ReportPreviewOverlay from './dashboard/ReportPreviewOverlay.tsx';
import type { DashboardReportType } from '../types/dashboardReport.ts';

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

function chronological<T>(rows: T[]): T[] {
  return [...rows].reverse();
}

const Dashboard: React.FC<Props> = ({ setView }) => {
  const { selectedCycle, selectedKandang, selectedSite } = useFarm();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [kpis, setKpis] = useState<KPI[]>([]);
  const [countings, setCountings] = useState<ChickenCounting[]>([]);
  const [weights, setWeights] = useState<ChickenWeight[]>([]);
  const [karung, setKarung] = useState<Karung | null>(null);
  const [latestAvg, setLatestAvg] = useState<LatestAvg | null>(null);
  const [insights, setInsights] = useState<AIInsight[]>([]);
  const [reportOpen, setReportOpen] = useState(false);
  const [reportType, setReportType] = useState<DashboardReportType>('daily');

  useEffect(() => {
    if (!selectedCycle) {
      setKpis([]);
      setCountings([]);
      setWeights([]);
      setKarung(null);
      setLatestAvg(null);
      setInsights([]);
      return;
    }
    const cycleId = selectedCycle.id;
    let cancelled = false;
    (async () => {
      setLoading(true);
      setError(null);
      try {
        const [kpiRows, countingRows, weightRows, insightRows] = await Promise.all([
          api.kpis.list({ cycle_id: cycleId }),
          api.countings.list({ cycle_id: cycleId }),
          api.weights.list({ cycle_id: cycleId }),
          api.insights.list({ cycle_id: cycleId }),
        ]);
        let latestKarung: Karung | null = null;
        try {
          latestKarung = await api.karungs.latest({ cycle_id: cycleId });
        } catch (err) {
          if (!(err instanceof ApiError && err.status === 404)) throw err;
        }
        let avg: LatestAvg | null = null;
        try {
          avg = await api.weights.latestAvg({ cycle_id: cycleId });
        } catch (err) {
          if (!(err instanceof ApiError && err.status === 404)) throw err;
        }
        if (cancelled) return;
        setKpis(kpiRows);
        setCountings(countingRows);
        setWeights(weightRows);
        setKarung(latestKarung);
        setLatestAvg(avg);
        setInsights(insightRows);
      } catch (err) {
        if (!cancelled) setError(errorMessage(err));
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [selectedCycle]);

  const cards: KpiCardModel[] = useMemo(() => {
    const latest = kpis[0];
    const fcrTrend = chronological(kpis).map((row) => row.fcr);
    const eefTrend = chronological(kpis).map((row) => row.eef);
    const popTrend = chronological(countings).map((row) => row.total_count);
    const weightTrend = chronological(weights).map((row) => row.average_weight);
    const age = latest?.age ?? selectedCycle?.current_day ?? null;
    return [
      {
        key: 'umur',
        title: 'Umur',
        value: age,
        unit: 'hari',
        icon: '📅',
        status: age == null ? 'na' : 'ok',
      },
      {
        key: 'populasi',
        title: 'Populasi',
        value: latest?.chicken_life ?? countings[0]?.total_count ?? null,
        unit: 'ekor',
        icon: '🐔',
        trend: popTrend,
        status: 'ok',
        targetView: 'dataManagement',
      },
      {
        key: 'karung',
        title: 'Karung Dituang',
        value: karung?.out_today ?? karung?.feed_use_today ?? null,
        unit: 'karung',
        icon: '🛢️',
        status: karung ? 'ok' : 'na',
        targetView: 'feedSackCounting',
      },
      {
        key: 'weight',
        title: 'Berat AVG',
        value: latestAvg?.average_weight ?? weights[0]?.average_weight ?? null,
        unit: 'gram',
        icon: '⚖️',
        trend: weightTrend,
        status: latestAvg || weights[0] ? 'ok' : 'na',
        targetView: 'weightMonitoring',
      },
      {
        key: 'fcr',
        title: 'FCR',
        value: latest?.fcr ?? null,
        unit: '',
        icon: '📈',
        trend: fcrTrend,
        status: latest ? 'ok' : 'na',
        targetView: 'fcrDashboard',
      },
      {
        key: 'eef',
        title: 'EEF',
        value: latest?.eef ?? null,
        unit: '',
        icon: '🎯',
        trend: eefTrend,
        status: latest ? 'ok' : 'na',
        targetView: 'eefDashboard',
      },
    ];
  }, [kpis, countings, weights, karung, latestAvg, selectedCycle]);

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

  const feedTotal = kpis[0]?.feed_total ?? 0;
  const feedWeightKg = feedTotal * 50;
  const feedInitialBalance = selectedCycle?.feed_initial_balance ?? 0;
  const feedInTotal = karung?.in_total ?? feedInitialBalance;
  const feedOutTotal = karung?.out_total ?? 0;
  const feedSaldo = feedInTotal - feedTotal - feedOutTotal;
  const feedSaldoColor =
    feedSaldo > 0 ? 'text-green-600' : feedSaldo < 0 ? 'text-red-600' : 'text-gray-600';

  return (
    <div>
      <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-2">
        <PageHeader
          title="Dashboard"
          subtitle={`${selectedSite?.site_name ?? ''} · ${selectedKandang?.kandang_name ?? ''} · Siklus ${formatDateRange(selectedCycle.start_date, selectedCycle.end_date)} (${selectedCycle.status === 'active' ? 'aktif' : 'selesai'})`}
        />
        <DashboardReportCtas
          cycleClosed={selectedCycle.status === 'closed'}
          hasDailySnapshot={false}
          hasEndCycleSnapshot={false}
          onOpenDaily={() => {
            setReportType('daily');
            setReportOpen(true);
          }}
          onOpenEndCycle={() => {
            setReportType('end_cycle');
            setReportOpen(true);
          }}
        />
      </div>
      {error && (
        <div className="mb-4">
          <Banner kind="error">{error}</Banner>
        </div>
      )}
      {loading ? (
        <Spinner />
      ) : (
        <>
          <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6 gap-6">
            {cards.map((card) => (
              <KpiCard
                key={card.key}
                title={card.title}
                value={card.value}
                unit={card.unit}
                icon={card.icon}
                trend={card.trend}
                status={card.status}
                onClick={card.targetView ? () => setView(card.targetView as View) : undefined}
              />
            ))}
          </div>
          <div className="mt-6 rounded-xl border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50 p-6 shadow-sm">
            <div className="mb-4 flex items-center gap-3">
              <div className="rounded-lg bg-blue-500 p-3 text-white">
                <i className="fa-solid fa-boxes-stacked text-2xl" />
              </div>
              <div>
                <h2 className="text-xl font-bold text-gray-800">Total Pakan</h2>
                <p className="text-sm text-gray-600">Kumulatif karung pakan sejak awal siklus</p>
              </div>
            </div>
            <div className="rounded-lg border border-blue-200 bg-white p-6">
              <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                <div className="text-center">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-boxes-stacked text-blue-600" />
                    <p className="text-sm font-semibold text-gray-700">Total Pakan</p>
                  </div>
                  <p className="text-3xl font-bold text-blue-600">{formatNumber(feedTotal)}</p>
                  <p className="mt-1 text-xs text-gray-400">karung</p>
                </div>
                <div className="text-center sm:border-l-2 sm:border-blue-200 sm:pl-6">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-arrow-down text-green-600" />
                    <p className="text-sm font-semibold text-gray-700">Total Feed In</p>
                  </div>
                  <p className="text-3xl font-bold text-green-600">{formatNumber(feedInTotal)}</p>
                  <p className="mt-1 text-xs text-gray-400">karung</p>
                </div>
                <div className="text-center lg:border-l-2 lg:border-blue-200 lg:pl-6">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-arrow-right text-red-600" />
                    <p className="text-sm font-semibold text-gray-700">Total Feed Out</p>
                  </div>
                  <p className="text-3xl font-bold text-red-600">{formatNumber(feedOutTotal)}</p>
                  <p className="mt-1 text-xs text-gray-400">karung</p>
                </div>
                <div className="text-center lg:border-l-2 lg:border-blue-200 lg:pl-6">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-box-archive text-blue-600" />
                    <p className="text-sm font-semibold text-gray-700">Saldo Awal</p>
                  </div>
                  <p className="text-3xl font-bold text-blue-600">
                    {formatNumber(feedInitialBalance)}
                  </p>
                  <p className="mt-1 text-xs text-gray-400">karung</p>
                </div>
              </div>

              <div className="mt-6 grid grid-cols-1 gap-6 border-t border-blue-200 pt-6 sm:grid-cols-2">
                <div className="text-center">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-weight-scale text-blue-600" />
                    <p className="text-sm font-semibold text-gray-700">Total Berat Pakan</p>
                  </div>
                  <p className="text-3xl font-bold text-blue-600">{formatNumber(feedWeightKg)}</p>
                  <p className="mt-1 text-xs text-gray-400">kg</p>
                </div>
                <div className="text-center sm:border-l-2 sm:border-blue-200 sm:pl-6">
                  <div className="mb-2 flex items-center justify-center gap-2">
                    <i className="fa-solid fa-scale-balanced text-blue-600" />
                    <p className="text-sm font-semibold text-gray-700">Saldo Karung Pakan</p>
                  </div>
                  <p className={`text-3xl font-bold ${feedSaldoColor}`}>
                    {formatNumber(feedSaldo)}
                  </p>
                  <p className="mt-1 text-xs text-gray-400">karung</p>
                </div>
              </div>
            </div>
          </div>
          <section className="mt-8">
            <h2 className="text-lg font-bold text-gray-800 mb-3">AI Insight</h2>
            {insights.length === 0 ? (
              <Banner>Belum ada insight untuk siklus ini.</Banner>
            ) : (
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                {insights.slice(0, 4).map((item) => (
                  <article
                    key={item.id}
                    className="bg-white rounded-xl shadow-sm p-5 border border-gray-100"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="text-xs uppercase tracking-wide text-gray-400">
                          {item.section}
                        </p>
                        <h3 className="font-semibold text-gray-800 mt-1">
                          {item.alert || 'Insight'}
                        </h3>
                      </div>
                      <span className="text-xs text-gray-400">{item.session}</span>
                    </div>
                    <p className="text-sm text-gray-600 mt-3 whitespace-pre-wrap">
                      {item.insight_text}
                    </p>
                  </article>
                ))}
              </div>
            )}
          </section>
          <DashboardManualInputForm
            cycleId={selectedCycle.id}
            currentDay={selectedCycle.current_day}
            readOnly={selectedCycle.status !== 'active'}
          />
        </>
      )}
      <ReportPreviewOverlay
        open={reportOpen}
        reportType={reportType}
        onClose={() => setReportOpen(false)}
      />
    </div>
  );
};

export default Dashboard;