import { useTranslation } from 'react-i18next';

import type { TravelTimeEntry, TransportMode } from '../../../hooks/useTravelTime';
import type { FeatureMeta } from '../../../types';
import { ChevronIcon } from '../../ui/icons';
import FeatureBrowser from '../FeatureBrowser';
import { SPECIFIC_CRIMES_FILTER_NAME, isSpecificCrimeFilterName } from '../../../lib/crime-filter';
import {
  ELECTION_VOTE_SHARE_FILTER_NAME,
  isElectionVoteShareFilterName,
} from '../../../lib/election-filter';
import { ETHNICITIES_FILTER_NAME, isEthnicityFilterName } from '../../../lib/ethnicity-filter';
import { SCHOOL_FILTER_NAME, isSchoolFilterName } from '../../../lib/school-filter';
import {
  POI_DISTANCE_FILTER_NAME,
  POI_FILTER_NAMES,
  getPoiFilterName,
  isPoiDistanceFilterName,
  type PoiFilterName,
} from '../../../lib/poi-distance-filter';

interface AddFilterPanelProps {
  collapsed: boolean;
  isLicensed: boolean;
  availableFeatures: FeatureMeta[];
  allFeatures: FeatureMeta[];
  pinnedFeature: string | null;
  defaultSchoolFeatureName: string | null;
  defaultSpecificCrimeFeatureName: string | null;
  defaultElectionVoteShareFeatureName: string | null;
  defaultEthnicityFeatureName: string | null;
  defaultPoiFilterFeatureNames: Record<PoiFilterName, string | null>;
  openInfoFeature?: string | null;
  travelTimeEntries: TravelTimeEntry[];
  onToggleCollapsed: () => void;
  onAddFilter: (name: string) => void;
  onTogglePin: (name: string) => void;
  onNavigateToSource?: (slug: string, featureName: string) => void;
  onClearOpenInfoFeature?: () => void;
  onAddTravelTimeEntry: (mode: TransportMode) => void;
  onUpgradeClick?: () => void;
}

export function AddFilterPanel({
  collapsed,
  isLicensed,
  availableFeatures,
  allFeatures,
  pinnedFeature,
  defaultSchoolFeatureName,
  defaultSpecificCrimeFeatureName,
  defaultElectionVoteShareFeatureName,
  defaultEthnicityFeatureName,
  defaultPoiFilterFeatureNames,
  openInfoFeature,
  travelTimeEntries,
  onToggleCollapsed,
  onAddFilter,
  onTogglePin,
  onNavigateToSource,
  onClearOpenInfoFeature,
  onAddTravelTimeEntry,
  onUpgradeClick,
}: AddFilterPanelProps) {
  const { t } = useTranslation();

  const browserPinnedFeature =
    pinnedFeature && isSchoolFilterName(pinnedFeature)
      ? SCHOOL_FILTER_NAME
      : pinnedFeature && isSpecificCrimeFilterName(pinnedFeature)
        ? SPECIFIC_CRIMES_FILTER_NAME
        : pinnedFeature && isElectionVoteShareFilterName(pinnedFeature)
          ? ELECTION_VOTE_SHARE_FILTER_NAME
          : pinnedFeature && isEthnicityFilterName(pinnedFeature)
            ? ETHNICITIES_FILTER_NAME
            : pinnedFeature && isPoiDistanceFilterName(pinnedFeature)
              ? (getPoiFilterName(pinnedFeature) ?? POI_DISTANCE_FILTER_NAME)
              : pinnedFeature;

  const handleTogglePin = (name: string) => {
    if (name === SCHOOL_FILTER_NAME) {
      if (defaultSchoolFeatureName) onTogglePin(defaultSchoolFeatureName);
      return;
    }
    if (name === SPECIFIC_CRIMES_FILTER_NAME) {
      if (defaultSpecificCrimeFeatureName) onTogglePin(defaultSpecificCrimeFeatureName);
      return;
    }
    if (name === ELECTION_VOTE_SHARE_FILTER_NAME) {
      if (defaultElectionVoteShareFeatureName) onTogglePin(defaultElectionVoteShareFeatureName);
      return;
    }
    if (name === ETHNICITIES_FILTER_NAME) {
      if (defaultEthnicityFeatureName) onTogglePin(defaultEthnicityFeatureName);
      return;
    }
    if (POI_FILTER_NAMES.includes(name as PoiFilterName)) {
      const defaultPoiFeatureName = defaultPoiFilterFeatureNames[name as PoiFilterName];
      if (defaultPoiFeatureName) onTogglePin(defaultPoiFeatureName);
      return;
    }
    onTogglePin(name);
  };

  return (
    <div
      className={`flex flex-col md:min-h-0 border-t border-warm-200 dark:border-warm-700 ${
        collapsed && isLicensed ? 'md:[flex:0_0_auto]' : 'md:[flex:1_1_0]'
      }`}
    >
      <button
        onClick={onToggleCollapsed}
        className="shrink-0 flex items-center justify-between border-y border-teal-300 bg-teal-100 px-3 py-3 cursor-pointer hover:bg-teal-200 dark:border-teal-800 dark:bg-teal-900/50 dark:hover:bg-teal-900/70"
      >
        <span className="text-sm font-bold text-navy-950 dark:text-warm-100">
          {t('filters.addFilter')}
        </span>
        <ChevronIcon
          direction={collapsed ? 'down' : 'up'}
          className="w-4 h-4 text-warm-500 dark:text-warm-300"
        />
      </button>
      {(!collapsed || !isLicensed) && (
        <div className="flex min-h-0 flex-1 flex-col">
          {!collapsed && (
            <div className="min-h-0 flex-1 overflow-y-auto">
              <FeatureBrowser
                availableFeatures={availableFeatures}
                allFeatures={allFeatures}
                pinnedFeature={browserPinnedFeature}
                onAddFilter={onAddFilter}
                onTogglePin={handleTogglePin}
                onNavigateToSource={onNavigateToSource}
                openInfoFeature={openInfoFeature}
                onClearOpenInfoFeature={onClearOpenInfoFeature}
                travelTimeEntries={travelTimeEntries}
                onAddTravelTimeEntry={onAddTravelTimeEntry}
              />
            </div>
          )}
          {!isLicensed && (
            <div className="mt-auto shrink-0 flex flex-col items-center px-5 pt-4 pb-0 border-t border-warm-200 dark:border-warm-700">
              <p className="text-sm text-warm-600 dark:text-warm-400 text-center leading-relaxed mb-1">
                {t('filters.upgradePrompt')}
              </p>
              <p className="text-xs text-warm-400 dark:text-warm-500 text-center mb-4">
                {t('filters.oneTimeLifetime')}
              </p>
              <button
                onClick={onUpgradeClick}
                className="px-5 py-2.5 rounded-lg bg-gradient-to-r from-teal-500 to-teal-600 hover:from-teal-600 hover:to-teal-700 text-white font-medium text-sm shadow-sm hover:shadow-md"
              >
                {t('filters.upgradeToFullMap')}
              </button>
              <svg
                viewBox="0 120 1600 230"
                className="w-full mt-4 block shrink-0"
                preserveAspectRatio="xMidYMax meet"
              >
                <path
                  d="M0,350 C400,150 1200,150 1600,350 Z"
                  className="fill-green-500 dark:fill-green-600"
                />
                <path d="M100,350 C450,180 1150,180 1500,350 Z" fill="#000" opacity="0.08" />
                <path d="M250,350 C550,220 1050,220 1350,350 Z" fill="#000" opacity="0.06" />
                <image href="/house.png" x="735" y="110" width="130" height="120" />
              </svg>
            </div>
          )}
        </div>
      )}
    </div>
  );
}
