import { useMemo, useState } from 'react';
import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
import type {
  FeatureFilters,
  FeatureMeta,
  HexagonStatsResponse,
  PostcodeFeature,
} from '../../types';
import type { TravelTimeEntry } from '../../hooks/useTravelTime';
import type { HexagonLocation } from '../../lib/external-search';
import { formatValue, formatFilterValue, calculateHistogramMean } from '../../lib/format';
import { groupFeaturesByCategory } from '../../lib/features';
import { STACKED_GROUPS, STACKED_ENUM_GROUPS } from '../../lib/consts';
import { DualHistogram, LoadingSkeleton } from './DualHistogram';
import EnumBarChart from './EnumBarChart';
import StackedBarChart from './StackedBarChart';
import StackedEnumChart from './StackedEnumChart';
import PriceHistoryChart from './PriceHistoryChart';
import ExternalSearchLinks from './ExternalSearchLinks';
import { InfoIcon } from '../ui/icons';
import { CollapsibleGroupHeader } from '../ui/CollapsibleGroupHeader';
import { FeatureInfoPopup } from '../ui/FeatureInfoPopup';
import { EmptyState } from '../ui/EmptyState';
import { FeatureLabel } from '../ui/FeatureLabel';
import StreetViewEmbed from './StreetViewEmbed';
import HistogramLegend from './HistogramLegend';
import JourneyInstructions from './JourneyInstructions';

interface AreaPaneProps {
  stats: HexagonStatsResponse | null;
  globalFeatures: FeatureMeta[];
  loading: boolean;
  hexagonId: string | null;
  isPostcode?: boolean;
  postcodeData?: PostcodeFeature | null;
  onViewProperties: () => void;
  hexagonLocation: HexagonLocation | null;
  filters: FeatureFilters;
  onNavigateToSource?: (slug: string, featureName: string) => void;
  travelTimeEntries?: TravelTimeEntry[];
}

export default function AreaPane({
  stats,
  globalFeatures,
  loading,
  hexagonId,
  isPostcode = false,
  postcodeData,
  onViewProperties,
  hexagonLocation,
  filters,
  onNavigateToSource,
  travelTimeEntries,
}: AreaPaneProps) {
  const propertyCount = isPostcode && postcodeData ? postcodeData.properties.count : stats?.count;
  const featureGroups = useMemo(() => groupFeaturesByCategory(globalFeatures), [globalFeatures]);
  const [infoFeature, setInfoFeature] = useState<FeatureMeta | null>(null);
  const [collapsedGroups, toggleGroup] = useCollapsibleGroups();

  const numericByName = useMemo(() => {
    if (!stats) return new Map();
    return new Map(stats.numeric_features.map((feature) => [feature.name, feature]));
  }, [stats]);

  const enumByName = useMemo(() => {
    if (!stats) return new Map();
    return new Map(stats.enum_features.map((feature) => [feature.name, feature]));
  }, [stats]);

  const globalFeatureByName = useMemo(
    () => new Map(globalFeatures.map((f) => [f.name, f])),
    [globalFeatures]
  );

  if (!hexagonId) {
    return (
      <EmptyState
        icon={<InfoIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
        title="No area selected"
        description="Click a hexagon or postcode to view area statistics"
        centered
      />
    );
  }

  return (
    <>
      <div className="h-full overflow-y-auto">
        <div className="p-3">
          <div className="flex items-center gap-2">
            <div>
              <h2 className="text-sm font-semibold dark:text-warm-100">
                {isPostcode ? hexagonId : 'Area Statistics'}
              </h2>
              {isPostcode && (
                <span className="text-xs text-warm-500 dark:text-warm-400">Postcode</span>
              )}
            </div>
            {loading && stats && (
              <div className="w-3 h-3 border-2 border-teal-600 dark:border-teal-400 border-t-transparent rounded-full animate-spin" />
            )}
          </div>
          {propertyCount != null && (
            <p className="text-sm text-warm-600 dark:text-warm-400 mt-1">
              {propertyCount.toLocaleString()} properties
            </p>
          )}
          <p className="text-xs text-warm-500 dark:text-warm-400 mt-1">
            Stats for {isPostcode ? 'current and historical' : 'all'} properties in this{' '}
            {isPostcode ? 'postcode' : 'area'}
            {Object.keys(filters).length > 0 ? ' matching all active filters' : ''}
          </p>
          {stats && stats.count > 0 && (
            <button
              onClick={onViewProperties}
              className="mt-2 w-full text-sm py-1.5 rounded bg-teal-600 hover:bg-teal-700 text-white font-medium"
            >
              View {stats.count.toLocaleString()} Properties
            </button>
          )}
        </div>

        {hexagonLocation && stats && (
          <ExternalSearchLinks location={hexagonLocation} filters={filters} />
        )}
        {(() => {
          const journeyPostcode = isPostcode ? hexagonId : stats?.central_postcode;
          return journeyPostcode && travelTimeEntries && travelTimeEntries.length > 0 ? (
            <JourneyInstructions
              postcode={journeyPostcode}
              entries={travelTimeEntries}
              label={!isPostcode ? journeyPostcode : undefined}
            />
          ) : null;
        })()}
        {loading && !stats ? (
          <LoadingSkeleton />
        ) : stats ? (
          <div>
            {hexagonLocation && <StreetViewEmbed location={hexagonLocation} />}
            <HistogramLegend />
            {stats.price_history &&
              (() => {
                const uniqueYears = new Set(stats.price_history.map((p) => Math.floor(p.year)));
                return uniqueYears.size > 1;
              })() && (
                <div className="mx-3 mt-2 bg-warm-50 dark:bg-warm-800 rounded p-2">
                  <span className="text-xs text-warm-700 dark:text-warm-300">Price History</span>
                  <PriceHistoryChart points={stats.price_history} />
                </div>
              )}
            {featureGroups.map((group) => {
              const hasData = group.features.some(
                (feature) => numericByName.has(feature.name) || enumByName.has(feature.name)
              );
              if (!hasData) return null;

              const stackedCharts = STACKED_GROUPS[group.name];
              const stackedEnumCharts = STACKED_ENUM_GROUPS[group.name];

              const stackedEnumFeatureNames = new Set<string>(
                stackedEnumCharts?.flatMap((c) =>
                  [c.feature, ...c.components].filter((s): s is string => Boolean(s))
                ) ?? []
              );

              const isExpanded = !collapsedGroups.has(group.name);

              return (
                <div key={group.name}>
                  <CollapsibleGroupHeader
                    name={group.name}
                    expanded={isExpanded}
                    onToggle={() => toggleGroup(group.name)}
                    className="px-3 py-2.5 text-sm font-bold text-warm-500 bg-warm-50 dark:bg-warm-900 dark:text-warm-400 sticky top-0 z-10 hover:bg-warm-100 dark:hover:bg-warm-800"
                  />
                  {isExpanded && (
                    <div className="px-3 py-2 space-y-3">
                      {stackedCharts
                        ? stackedCharts.map((chart) => {
                            const segments = chart.components
                              .map((name) => ({
                                name,
                                value: numericByName.get(name)?.mean ?? 0,
                              }))
                              .filter((s) => s.value > 0);

                            const aggregateStats = chart.feature
                              ? numericByName.get(chart.feature)
                              : undefined;
                            const total = aggregateStats
                              ? aggregateStats.mean
                              : segments.reduce((sum, s) => sum + s.value, 0);

                            const featureMeta = chart.feature
                              ? globalFeatureByName.get(chart.feature)
                              : undefined;

                            if (total === 0) return null;

                            return (
                              <div
                                key={chart.label}
                                className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                              >
                                <div className="flex justify-between items-baseline mb-1.5">
                                  {featureMeta ? (
                                    <FeatureLabel
                                      feature={{ ...featureMeta, name: chart.label }}
                                      onShowInfo={setInfoFeature}
                                      className="mr-2"
                                    />
                                  ) : (
                                    <span className="text-xs text-warm-700 dark:text-warm-300 truncate mr-2">
                                      {chart.label}
                                    </span>
                                  )}
                                  <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                    {formatValue(total)}
                                    {chart.unit ? ` ${chart.unit}` : ''}
                                  </span>
                                </div>
                                <StackedBarChart segments={segments} total={total} />
                              </div>
                            );
                          })
                        : group.features
                            .filter((f) => !stackedEnumFeatureNames.has(f.name))
                            .map((feature) => {
                              const numericStats = numericByName.get(feature.name);
                              const enumStats = enumByName.get(feature.name);

                              if (numericStats) {
                                const globalFeature = globalFeatureByName.get(feature.name);
                                const globalHistogram = globalFeature?.histogram;
                                const globalMean = globalHistogram
                                  ? calculateHistogramMean(globalHistogram)
                                  : undefined;

                                return (
                                  <div
                                    key={feature.name}
                                    className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                                  >
                                    <div className="flex justify-between items-baseline">
                                      <FeatureLabel
                                        feature={feature}
                                        onShowInfo={setInfoFeature}
                                        className="mr-2"
                                      />
                                      <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                        {formatValue(numericStats.mean, feature)}
                                      </span>
                                    </div>
                                    {numericStats.histogram &&
                                      (globalHistogram ? (
                                        <DualHistogram
                                          localCounts={numericStats.histogram.counts}
                                          globalCounts={globalHistogram.counts}
                                          p1={numericStats.histogram.p1}
                                          p99={numericStats.histogram.p99}
                                          globalMean={globalMean}
                                          formatLabel={(v) => formatFilterValue(v, feature.raw)}
                                        />
                                      ) : (
                                        <DualHistogram
                                          localCounts={numericStats.histogram.counts}
                                          globalCounts={numericStats.histogram.counts}
                                          p1={numericStats.histogram.p1}
                                          p99={numericStats.histogram.p99}
                                          formatLabel={(v) => formatFilterValue(v, feature.raw)}
                                        />
                                      ))}
                                  </div>
                                );
                              }

                              if (enumStats) {
                                return (
                                  <div
                                    key={feature.name}
                                    className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                                  >
                                    <FeatureLabel feature={feature} onShowInfo={setInfoFeature} />
                                    <EnumBarChart counts={enumStats.counts} />
                                  </div>
                                );
                              }

                              return null;
                            })}
                      {stackedEnumCharts?.map((chart) => {
                        const featureMeta = chart.feature
                          ? globalFeatureByName.get(chart.feature)
                          : undefined;

                        if (chart.components.length === 1) {
                          const stats = enumByName.get(chart.components[0]);
                          if (!stats) return null;

                          const segments = chart.valueOrder
                            .map((value) => ({ name: value, value: stats.counts[value] ?? 0 }))
                            .filter((s) => s.value > 0);
                          const total = segments.reduce((sum, s) => sum + s.value, 0);
                          if (total === 0) return null;

                          return (
                            <div
                              key={chart.label}
                              className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                            >
                              <div className="flex justify-between items-baseline mb-1.5">
                                {featureMeta ? (
                                  <FeatureLabel
                                    feature={featureMeta}
                                    onShowInfo={setInfoFeature}
                                    className="mr-2"
                                  />
                                ) : (
                                  <span className="text-xs text-warm-700 dark:text-warm-300 truncate mr-2">
                                    {chart.label}
                                  </span>
                                )}
                                <span className="text-xs font-semibold text-teal-700 dark:text-teal-400 whitespace-nowrap">
                                  {total.toLocaleString()}
                                </span>
                              </div>
                              <StackedBarChart
                                segments={segments}
                                total={total}
                                colorMap={Object.fromEntries(
                                  chart.valueOrder.map((v, i) => [v, chart.valueColors[i]])
                                )}
                              />
                            </div>
                          );
                        }

                        const components = chart.components
                          .map((name) => {
                            const stats = enumByName.get(name);
                            return stats ? { label: name, stats } : null;
                          })
                          .filter((c): c is NonNullable<typeof c> => c !== null);

                        if (components.length === 0) return null;

                        return (
                          <div
                            key={chart.label}
                            className="bg-warm-50 dark:bg-warm-800 rounded p-2"
                          >
                            <div className="mb-1.5">
                              {featureMeta ? (
                                <FeatureLabel
                                  feature={{ ...featureMeta, name: chart.label }}
                                  onShowInfo={setInfoFeature}
                                />
                              ) : (
                                <span className="text-xs text-warm-700 dark:text-warm-300">
                                  {chart.label}
                                </span>
                              )}
                            </div>
                            <StackedEnumChart
                              components={components}
                              valueOrder={chart.valueOrder}
                              valueColors={chart.valueColors}
                            />
                          </div>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        ) : null}
      </div>

      {infoFeature && (
        <FeatureInfoPopup
          feature={infoFeature}
          onClose={() => setInfoFeature(null)}
          onNavigateToSource={onNavigateToSource}
        />
      )}
    </>
  );
}