import React, { useMemo, useState } from "react";
import styled from "styled-components";
import {
  FiltersRow,
  FilterGroup,
  FilterLabel,
  FilterSelect,
} from "../styles";
import KpiCascadeFilter, { kpiMatchesCascadeSteps } from "../../../DataManagment/Quantative/component/KpiTagFilter";
import { PERIOD_TYPE_LABELS, formatDateRange } from "../hooks/useTriggers";

// ─── Styles ───────────────────────────────────────────────────────────────────
const Wrapper = styled.div``;

const TableWrapper = styled.div`
  margin-top: 24px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
`;

const Thead = styled.thead`
  background: #f8fafc;
`;

const Th = styled.th`
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1.5px solid #e2e8f0;
  white-space: nowrap;
`;

const Tr = styled.tr`
  &:not(:last-child) td {
    border-bottom: 1px solid #f1f5f9;
  }
  &:hover td {
    background: #f8fafc;
  }
`;

const Td = styled.td`
  padding: 10px 14px;
  color: #1e293b;
  vertical-align: middle;
`;

const Badge = styled.span`
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #e0f2fe;
  color: #0369a1;
`;

const EmptyState = styled.div`
  padding: 48px 0;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
`;

// ─── Component ────────────────────────────────────────────────────────────────
const OverviewTab = ({ hook }) => {
  const {
    sources,
    triggers,
    questions,
    selectedFinancialYear,
    ovw_periodType, setOvw_periodType,
    ovw_selectedPeriod, setOvw_selectedPeriod,
    ovw_sourceId, setOvw_sourceId,
    computePeriodSlots,
  } = hook;

  const [filterSteps, setFilterSteps] = useState([]);

  // All triggers for the selected FY (base scope — no further filtering yet).
  const fyTriggers = useMemo(
    () => triggers.filter(t => String(t.financialYearId) === String(selectedFinancialYear)),
    [triggers, selectedFinancialYear]
  );

  // Period types actually present in the FY.
  const availablePeriodTypes = useMemo(() => {
    const types = ["YEARLY", "HALF_YEARLY", "QUARTERLY", "MONTHLY"];
    return types.filter(type => {
      const slots = computePeriodSlots(type);
      return slots.some(slot =>
        fyTriggers.some(t => t.fromDate === slot.fromDate && t.toDate === slot.toDate)
      );
    });
  }, [fyTriggers, computePeriodSlots]);

  // Period slots for the selected period type that actually have triggers.
  const availablePeriodSlots = useMemo(() => {
    if (!ovw_periodType) return [];
    const slots = computePeriodSlots(ovw_periodType);
    return slots.filter(slot =>
      fyTriggers.some(t => t.fromDate === slot.fromDate && t.toDate === slot.toDate)
    );
  }, [ovw_periodType, fyTriggers, computePeriodSlots]);

  // Sources present in the current FY (optionally narrowed by period filter).
  const availableSources = useMemo(() => {
    let pool = fyTriggers;
    if (ovw_selectedPeriod) {
      pool = pool.filter(t =>
        t.fromDate === ovw_selectedPeriod.fromDate && t.toDate === ovw_selectedPeriod.toDate
      );
    } else if (ovw_periodType) {
      const slotKeys = new Set(availablePeriodSlots.map(s => `${s.fromDate}|${s.toDate}`));
      pool = pool.filter(t => slotKeys.has(`${t.fromDate}|${t.toDate}`));
    }
    const ids = [...new Set(pool.map(t => t.sourceId))];
    return sources.filter(s => ids.includes(s.id));
  }, [fyTriggers, ovw_selectedPeriod, ovw_periodType, availablePeriodSlots, sources]);

  const kpiListForFilter = useMemo(
    () => questions.map(q => ({ ...q, id: q.questionId, rawTags: q.tags })),
    [questions]
  );

  const filteredTriggers = useMemo(() => {
    if (!selectedFinancialYear) return [];
    let result = fyTriggers;
    if (ovw_periodType) {
      const slotKeys = new Set(availablePeriodSlots.map(s => `${s.fromDate}|${s.toDate}`));
      result = result.filter(t => slotKeys.has(`${t.fromDate}|${t.toDate}`));
    }
    if (ovw_selectedPeriod) {
      result = result.filter(t =>
        t.fromDate === ovw_selectedPeriod.fromDate && t.toDate === ovw_selectedPeriod.toDate
      );
    }
    if (ovw_sourceId) {
      result = result.filter(t => t.sourceId === ovw_sourceId);
    }
    const active = filterSteps.filter(s => s.values?.size);
    if (active.length > 0) {
      result = result.filter(t => {
        const q = kpiListForFilter.find(q => q.questionId === t.questionId);
        return q ? kpiMatchesCascadeSteps(q, filterSteps) : false;
      });
    }
    return result;
  }, [fyTriggers, selectedFinancialYear, ovw_periodType, ovw_selectedPeriod, ovw_sourceId, availablePeriodSlots, filterSteps, kpiListForFilter]);

  const handlePeriodTypeChange = e => {
    setOvw_periodType(e.target.value);
    setOvw_selectedPeriod(null);
  };

  const handlePeriodSlotChange = e => {
    const slot = availablePeriodSlots.find(s => s.fromDate === e.target.value);
    setOvw_selectedPeriod(slot ?? null);
  };

  const handleSourceChange = e => {
    setOvw_sourceId(e.target.value ? Number(e.target.value) : null);
  };

  const getSourceLabel = id => sources.find(s => s.id === id)?.unitCode ?? id;

  return (
    <Wrapper>
      <FiltersRow>
        {/* Period Type */}
        <FilterGroup>
          <FilterLabel>Period Type</FilterLabel>
          <FilterSelect
            value={ovw_periodType}
            onChange={handlePeriodTypeChange}
            disabled={!selectedFinancialYear}
          >
            <option value="">All types</option>
            {availablePeriodTypes.map(type => (
              <option key={type} value={type}>{PERIOD_TYPE_LABELS[type]}</option>
            ))}
          </FilterSelect>
        </FilterGroup>

        {/* Period Slot */}
        <FilterGroup>
          <FilterLabel>Period</FilterLabel>
          <FilterSelect
            value={ovw_selectedPeriod?.fromDate ?? ""}
            onChange={handlePeriodSlotChange}
            disabled={!ovw_periodType}
          >
            <option value="">All periods</option>
            {availablePeriodSlots.map(slot => (
              <option key={slot.fromDate} value={slot.fromDate}>{slot.label}</option>
            ))}
          </FilterSelect>
        </FilterGroup>

        {/* Location */}
        <FilterGroup>
          <FilterLabel>Location</FilterLabel>
          <FilterSelect
            value={ovw_sourceId ?? ""}
            onChange={handleSourceChange}
            disabled={!selectedFinancialYear}
          >
            <option value="">All locations</option>
            {availableSources.map(s => (
              <option key={s.id} value={s.id}>{s.unitCode}</option>
            ))}
          </FilterSelect>
        </FilterGroup>

        {/* KPI Tags */}
        <FilterGroup style={{ flex: "1 1 260px", minWidth: 200 }}>
          <FilterLabel>KPI Tags (optional)</FilterLabel>
          <KpiCascadeFilter
            kpiList={kpiListForFilter}
            filterSteps={filterSteps}
            onFilterStepsChange={setFilterSteps}
          />
        </FilterGroup>
      </FiltersRow>

      {/* Results table */}
      {selectedFinancialYear ? (
        <TableWrapper>
          <Table>
            <Thead>
              <tr>
                <Th>Period</Th>
                <Th>Location</Th>
                <Th>KPI</Th>
                <Th>Unit</Th>
                <Th>Min Trigger</Th>
                <Th>Max Trigger</Th>
              </tr>
            </Thead>
            <tbody>
              {filteredTriggers.length === 0 ? (
                <tr>
                  <td colSpan={6}>
                    <EmptyState>No triggers found for the selected filters.</EmptyState>
                  </td>
                </tr>
              ) : (
                filteredTriggers.map(t => (
                  <Tr key={t.id}>
                    <Td>{formatDateRange(t.fromDate, t.toDate)}</Td>
                    <Td>{getSourceLabel(t.sourceId)}</Td>
                    <Td>{t.questionTitle}</Td>
                    <Td>{t.unit || "—"}</Td>
                    <Td>{t.minTargetData ?? "—"}</Td>
                    <Td>{t.maxTargetData ?? "—"}</Td>
                  </Tr>
                ))
              )}
            </tbody>
          </Table>
        </TableWrapper>
      ) : (
        <EmptyState style={{ marginTop: 40 }}>
          Select a financial year to view triggers.
        </EmptyState>
      )}
    </Wrapper>
  );
};

export default OverviewTab;