'use client';

import React from 'react';
import {
  Document,
  Page,
  StyleSheet,
  Text,
  View,
  Image,
} from '@react-pdf/renderer';

import { formatDate, formatNumber } from '@/lib/helper';
import { BaseProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
import { ProductionResult } from '@/types/api/report/production-result';

type MappedProductionResultsItem = {
  projectFlockKandang: BaseProjectFlockKandang;
  productionResult: ProductionResult[] | null;
};

interface ProductionResultReportPDFProps {
  mappedProductionResults?: MappedProductionResultsItem[];
}

const styles = StyleSheet.create({
  page: {
    paddingTop: 24,
    paddingBottom: 52,
    paddingHorizontal: 16,
  },

  companyInfoHeader: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 8,
  },
  companyLogo: {
    width: 64,
    height: 'auto',
  },
  companyInfoHeaderDate: {
    paddingTop: 8,
    fontSize: 10,
  },
  companyName: {
    fontSize: 12,
    fontWeight: 'bold',
    marginBottom: 4,
  },
  companyAddress: {
    fontSize: 8,
    maxWidth: 420,
    marginBottom: 10,
  },
  doubleDivider: {
    width: '100%',
    height: 6,
    borderTopWidth: 2,
    borderTopColor: '#000',
    borderBottomWidth: 2,
    borderBottomColor: '#000',
  },

  title: {
    marginTop: 14,
    fontSize: 14,
    lineHeight: '150%',
    textAlign: 'center',
    fontFamily: 'Times-Roman',
    fontWeight: 'bold',
  },

  footer: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    position: 'absolute',
    fontSize: 8,
    bottom: 22,
    left: 0,
    right: 0,
    textAlign: 'center',
    color: 'grey',
  },

  section: {
    marginTop: 12,
    borderWidth: 1,
    borderColor: '#000',
    padding: 8,
  },

  sectionHeader: {
    marginBottom: 6,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'baseline',
  },
  sectionTitle: {
    fontSize: 10,
    fontWeight: 'bold',
  },
  sectionSubtitle: {
    fontSize: 8,
    color: '#444',
  },

  // Simple grid table (label/value pairs)
  grid: {
    width: '100%',
    borderWidth: 1,
    borderColor: '#000',
  },
  gridRow: {
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomColor: '#000',
  },
  gridRowLast: {
    borderBottomWidth: 0,
  },
  gridCellLabel: {
    width: '40%',
    paddingVertical: 3,
    paddingHorizontal: 6,
    fontSize: 8,
    borderRightWidth: 1,
    borderRightColor: '#000',
    fontWeight: 'bold',
  },
  gridCellValue: {
    width: '60%',
    paddingVertical: 3,
    paddingHorizontal: 6,
    fontSize: 8,
    textAlign: 'right',
  },

  // Subsection headings
  groupTitle: {
    marginTop: 8,
    marginBottom: 4,
    fontSize: 9,
    fontWeight: 'bold',
  },

  emptyText: {
    fontSize: 8,
    color: '#666',
    fontStyle: 'italic',
  },
});

function safeNum(v: unknown): number {
  const n = typeof v === 'number' ? v : Number(v);
  return Number.isFinite(n) ? n : 0;
}

function valueText(v: unknown) {
  if (v === null || v === undefined) return '-';
  if (typeof v === 'number') return formatNumber(v);
  return String(v);
}

/**
 * Render label/value table for one ProductionResult.
 * Uses a compact grid to keep page readable.
 */
function ProductionResultGrid({ pr }: { pr: ProductionResult }) {
  const rows: Array<[string, string]> = [
    ['WOA', valueText(pr.woa)],

    // BW
    ['BW', valueText(pr.bw)],
    ['Std BW', valueText(pr.std_bw)],
    ['Uniformity', valueText(pr.uniformity)],
    ['Std Uniformity', valueText(pr.std_uniformity)],

    // Dep
    ['Dep Kum', valueText(pr.dep_kum)],
    ['Dep Std', valueText(pr.dep_std)],

    // Butiran
    ['Butiran Utuh', valueText(pr.butiran_utuh)],
    ['Butiran Putih', valueText(pr.butiran_putih)],
    ['Butiran Retak', valueText(pr.butiran_retak)],
    ['Butiran Pecah', valueText(pr.butiran_pecah)],
    ['Butiran Jumlah', valueText(pr.butiran_jumlah)],
    ['Total Butir', valueText(pr.total_butir)],

    // Kg
    ['Kg Utuh', valueText(pr.kg_utuh)],
    ['Kg Putih', valueText(pr.kg_putih)],
    ['Kg Retak', valueText(pr.kg_retak)],
    ['Kg Pecah', valueText(pr.kg_pecah)],
    ['Kg Jumlah', valueText(pr.kg_jumlah)],
    ['Total Kg', valueText(pr.total_kg)],

    // %
    ['% Utuh', valueText(pr.persen_utuh)],
    ['% Putih', valueText(pr.persen_putih)],
    ['% Retak', valueText(pr.persen_retak)],
    ['% Pecah', valueText(pr.persen_pecah)],

    // Produksi
    ['HD', valueText(pr.hd)],
    ['HD Std', valueText(pr.hd_std)],
    ['FI', valueText(pr.fi)],
    ['FI Std', valueText(pr.fi_std)],
    ['EM', valueText(pr.em)],
    ['EM Std', valueText(pr.em_std)],
    ['EW', valueText(pr.ew)],
    ['EW Std', valueText(pr.ew_std)],
    ['FCR', valueText(pr.fcr)],
    ['FCR Std', valueText(pr.fcr_std)],
    ['HH', valueText(pr.hh)],
    ['HH Std', valueText(pr.hh_std)],
  ];

  return (
    <View style={styles.grid}>
      {rows.map(([label, value], idx) => {
        const isLast = idx === rows.length - 1;
        return (
          <View
            key={label}
            style={[styles.gridRow, ...(isLast ? [styles.gridRowLast] : [])]}
          >
            <Text style={styles.gridCellLabel}>{label}</Text>
            <Text style={styles.gridCellValue}>{value}</Text>
          </View>
        );
      })}
    </View>
  );
}

/**
 * If there are multiple ProductionResult entries for a kandang,
 * we show them sequentially with a small header per result.
 *
 * You can later change this to render only the latest WOA, or group by week.
 */
function ProductionResultList({
  productionResults,
}: {
  productionResults: ProductionResult[];
}) {
  return (
    <View>
      {productionResults.map((pr, idx) => {
        const kandangName =
          pr.project_flock?.kandang?.name ||
          pr.project_flock?.kandang?.id?.toString() ||
          '';

        // Optional: show a compact subheader
        const headerLeft = `Data #${idx + 1}`;
        const headerRight =
          kandangName && pr.woa !== undefined
            ? `${kandangName} • WOA ${safeNum(pr.woa)}`
            : pr.woa !== undefined
              ? `WOA ${safeNum(pr.woa)}`
              : '';

        return (
          <View
            key={`${pr.project_flock?.id ?? 'pf'}-${idx}`}
            style={{ marginTop: idx === 0 ? 0 : 10 }}
            wrap={false}
          >
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionTitle}>{headerLeft}</Text>
              <Text style={styles.sectionSubtitle}>{headerRight}</Text>
            </View>

            <ProductionResultGrid pr={pr} />
          </View>
        );
      })}
    </View>
  );
}

/**
 * ✅ Main PDF Component
 */
const ProductionResultReportPDF = ({
  mappedProductionResults = [],
}: ProductionResultReportPDFProps) => {
  return (
    <Document>
      <Page style={styles.page} size='A4'>
        {/* Header */}
        <View>
          <View style={styles.companyInfoHeader}>
            <Image style={styles.companyLogo} src='/assets/img/lti-logo.png' />
            <Text style={styles.companyInfoHeaderDate}>
              {formatDate(Date.now(), 'DD MMMM YYYY')}
            </Text>
          </View>

          <View>
            <Text style={styles.companyName}>PT LUMBUNG TELUR INDONESIA</Text>
            <Text style={styles.companyAddress}>
              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
              Cipedes, Kec. Sukajadi, Kota Bandung 40162
            </Text>

            <View style={styles.doubleDivider} />
          </View>
        </View>

        <Text style={styles.title}>Laporan Production Result</Text>

        {/* Sections per ProjectFlockKandang */}
        {mappedProductionResults.length === 0 ? (
          <View style={{ marginTop: 16 }}>
            <Text style={styles.emptyText}>Tidak ada data.</Text>
          </View>
        ) : (
          mappedProductionResults.map((item, idx) => {
            const pfk = item.projectFlockKandang;

            // Try to display meaningful identifiers.
            // Adjust these fields based on your real BaseProjectFlockKandang structure.
            const kandangName =
              pfk?.kandang?.name ?? `Kandang #${pfk?.kandang_id ?? idx + 1}`;

            const projectName = pfk?.project_flock?.name ?? '';

            const locationName = pfk?.project_flock?.location?.name ?? '';

            const areaName = pfk?.project_flock?.area?.name ?? '';

            return (
              <View
                key={`pfk-${pfk?.id ?? idx}`}
                style={styles.section}
                break={idx > 0} // each kandang starts on a new page for clarity
              >
                <View style={styles.sectionHeader}>
                  <Text style={styles.sectionTitle}>
                    {projectName
                      ? `${projectName} • ${kandangName}`
                      : kandangName}
                  </Text>
                  <Text style={styles.sectionSubtitle}>
                    {[areaName, locationName].filter(Boolean).join(' • ')}
                  </Text>
                </View>

                {item.productionResult && item.productionResult.length > 0 ? (
                  <ProductionResultList
                    productionResults={item.productionResult}
                  />
                ) : (
                  <Text style={styles.emptyText}>
                    Tidak ada production result untuk kandang ini.
                  </Text>
                )}
              </View>
            );
          })
        )}

        {/* Footer */}
        <View style={styles.footer} fixed>
          <Text
            render={({ pageNumber, totalPages }) =>
              `${pageNumber} / ${totalPages}`
            }
            fixed
          />
        </View>
      </Page>
    </Document>
  );
};

export default ProductionResultReportPDF;
