import { useState, useEffect } from 'react';
import { Helmet } from 'react-helmet-async';
import { FiTrendingUp, FiTrendingDown, FiStar } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { AreaChart, Area, ResponsiveContainer, YAxis } from 'recharts';
import { useNavigate } from 'react-router-dom';
import { slugify } from '../utils/slugify';
import { useFavorites } from '../hooks/useFavorites';
import { CircularProgress } from './CircularProgress';
import { Tooltip } from './Tooltip';
import { TbSwimming, TbSailboat } from 'react-icons/tb';

interface Lake {
  id: string;
  name: string;
  river: string;
  priority: boolean;
  level: number;
  capacity: number;
  storageDiff?: number;
  inflow: number;
  outflow: number;
  volume: number;
  maxVolume: number;
  navigationForbidden: boolean;
  sparkline: number[];
  country?: string;
  area?: number;
  depth?: number;
}

const getFlagEmoji = (countryCode?: string) => {
  const code = countryCode || 'CZ';
  const codePoints = code
    .toUpperCase()
    .split('')
    .map(char => 127397 + char.charCodeAt(0));
  return String.fromCodePoint(...codePoints);
};

const LakeCard = ({ lake, language, isFav, onToggleFav }: { lake: Lake, language: Language, isFav: boolean, onToggleFav: (id: string) => void }) => {
  const navigate = useNavigate();
  const chartData = lake.sparkline.map((val, i) => ({ name: i, value: val }));
  
  const minVal = Math.min(...lake.sparkline);
  const maxVal = Math.max(...lake.sparkline);
  const diff = maxVal - minVal;
  const padding = diff === 0 ? 0.1 : diff * 0.1; // dynamic 10% padding
  const yDomain = [minVal - padding, maxVal + padding];
  
  const firstVal = lake.sparkline[0] || 0;
  const lastVal = lake.sparkline[lake.sparkline.length - 1] || 0;
  const trendDiff = lastVal - firstVal;
  
  // Dynamic color based on trend direction: stable=cyan, rising=green, falling=red
  let trendColor = 'var(--color-cyan)';
  if (trendDiff > 0.01) trendColor = 'var(--color-green)';
  else if (trendDiff < -0.01) trendColor = 'var(--color-red)';

  return (
    <div
      className="kpi-card priority-lake-card"
      onClick={() => navigate(`/${slugify(lake.name)}`)}
      style={{ cursor: 'pointer', flex: 1, padding: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative' }}
    >
      {/* Star / Favorite button */}
      <button
        onClick={(e) => { e.stopPropagation(); onToggleFav(lake.id); }}
        title={isFav ? (language === 'cs' ? 'Odepnout' : 'Unpin') : (language === 'cs' ? 'Připnout jako oblíbené' : 'Pin to favorites')}
        style={{
          position: 'absolute', top: '1rem', right: '1rem',
          background: 'none', border: 'none', cursor: 'pointer',
          color: isFav ? '#f59e0b' : 'var(--text-muted)',
          opacity: isFav ? 1 : 0.4,
          transition: 'color 0.2s, opacity 0.2s, transform 0.15s',
          padding: '4px',
          display: 'flex', alignItems: 'center',
          zIndex: 2,
        }}
        onMouseOver={(e) => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.transform = 'scale(1.2)'; }}
        onMouseOut={(e) => { e.currentTarget.style.opacity = isFav ? '1' : '0.4'; e.currentTarget.style.transform = 'scale(1)'; }}
      >
        <FiStar size={18} fill={isFav ? '#f59e0b' : 'none'} />
      </button>

      {/* Flag / Country badge */}
      {lake.country && lake.country !== 'CZ' && (
        <span style={{
          position: 'absolute', top: '1rem', right: '2.5rem',
          fontSize: '0.7rem', padding: '0.15rem 0.4rem', borderRadius: '4px',
          backgroundColor: 'rgba(255,255,255,0.08)', color: 'var(--text-muted)',
          border: '1px solid var(--border-color)', fontWeight: 'bold'
        }}>
          {lake.country}
        </span>
      )}

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', paddingRight: '2.5rem' }}>
        <h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', margin: 0, lineHeight: '1.3' }}>
          <span style={{ marginRight: '0.5rem', fontSize: '1.4rem', verticalAlign: 'middle', display: 'inline-block', lineHeight: 1 }}>{getFlagEmoji(lake.country)}</span>
          <span style={{ verticalAlign: 'middle' }}>{lake.name} {lake.river ? `- ${lake.river}` : ''}</span>
        </h3>
        <div style={{ display: 'flex', gap: '0.4rem', flexShrink: 0 }}>
          <Tooltip content={lake.navigationForbidden ? (language === 'cs' ? 'Koupání zakázáno' : 'Swimming forbidden') : (language === 'cs' ? 'Koupání (bez omezení)' : 'Swimming allowed')}>
            <TbSwimming size={20} color={lake.navigationForbidden ? 'var(--color-red)' : 'var(--color-green)'} style={{ opacity: lake.navigationForbidden ? 0.5 : 0.8 }} />
          </Tooltip>
          <Tooltip content={lake.navigationForbidden ? (language === 'cs' ? 'Plavba zakázána' : 'Navigation forbidden') : (language === 'cs' ? 'Plavba (i bezmotorová) povolena' : 'Navigation allowed')}>
            <TbSailboat size={20} color={lake.navigationForbidden ? 'var(--color-red)' : 'var(--color-green)'} style={{ opacity: lake.navigationForbidden ? 0.5 : 0.8 }} />
          </Tooltip>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1rem' }}>
        <CircularProgress value={lake.capacity} size={70} strokeWidth={6} />
        <div>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>Water level</div>
          <div style={{ fontSize: '2rem', fontWeight: 'bold', display: 'flex', alignItems: 'baseline', gap: '0.25rem', lineHeight: '1.1' }}>
            {lake.level} <span style={{ fontSize: '1rem', fontWeight: 'normal', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>m n.m.</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginTop: '0.25rem' }}>
            {lake.storageDiff !== undefined && (
              <div style={{ fontSize: '1rem', color: lake.storageDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', fontWeight: 'bold', whiteSpace: 'nowrap' }}>
                {lake.storageDiff > 0 ? '+' : ''}{lake.storageDiff.toFixed(2)} m
              </div>
            )}
            {lake.maxVolume > 0 && (
              <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>
                {lake.volume.toFixed(1)} / {lake.maxVolume.toFixed(1)} mil. m³
              </div>
            )}
          </div>
          {((lake.area !== undefined && lake.area > 0) || (lake.depth !== undefined && lake.depth > 0)) && (
            <div style={{ display: 'flex', gap: '0.75rem', marginTop: '0.35rem', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
              {lake.area !== undefined && lake.area > 0 && (
                <span>{language === 'cs' ? 'Rozloha:' : 'Area:'} <strong style={{ color: 'var(--text-main)' }}>{lake.area} km²</strong></span>
              )}
              {lake.depth !== undefined && lake.depth > 0 && (
                <span>{language === 'cs' ? 'Hloubka:' : 'Depth:'} <strong style={{ color: 'var(--text-main)' }}>{lake.depth} m</strong></span>
              )}
            </div>
          )}
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ flex: 1, height: '40px', marginRight: '2rem' }}>
          <ResponsiveContainer width="100%" height="100%">
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id={`colorSpark-${lake.id}`} x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={trendColor} stopOpacity={0.8} />
                  <stop offset="95%" stopColor={trendColor} stopOpacity={0} />
                </linearGradient>
              </defs>
              <YAxis domain={yDomain} hide />
              <Area type="monotone" dataKey="value" stroke={trendColor} fillOpacity={1} fill={`url(#colorSpark-${lake.id})`} baseValue={yDomain[0]} />
            </AreaChart>
          </ResponsiveContainer>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.85rem' }}>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <FiTrendingUp color="var(--color-green)" />
            <span style={{ color: 'var(--text-muted)' }}>Inflow <span style={{ color: 'var(--color-green)' }}>{lake.inflow} m³/s</span></span>
          </div>
          <div style={{ display: 'flex', gap: '0.5rem' }}>
            <FiTrendingDown color="var(--color-red)" />
            <span style={{ color: 'var(--text-muted)' }}>Outflow <span style={{ color: 'var(--color-red)' }}>{lake.outflow} m³/s</span></span>
          </div>
        </div>
      </div>
    </div>
  );
};

interface Props {
  language: Language;
  windUnit?: 'kmh' | 'ms';
}

const LakesOverview = ({ language }: Props) => {
  const [lakes, setLakes] = useState<Lake[]>([]);
  const [selectedCountry, setSelectedCountry] = useState<string>(() => sessionStorage.getItem('lakes_selectedCountry') || 'ALL');
  const [sortBy, setSortBy] = useState<string>(() => sessionStorage.getItem('lakes_sortBy') || 'name-asc');
  const { isFavorite, toggleFavorite } = useFavorites();

  useEffect(() => {
    sessionStorage.setItem('lakes_selectedCountry', selectedCountry);
  }, [selectedCountry]);

  useEffect(() => {
    sessionStorage.setItem('lakes_sortBy', sortBy);
  }, [sortBy]);

  useEffect(() => {
    const loadData = () => {
      fetch(`/data/lakes_index.json?t=${Date.now()}`)
        .then(res => res.json())
        .then(data => setLakes(data.filter((l: Lake & { type?: string }) => l.type !== 'river')))
        .catch(err => console.error(err));
    };

    loadData();
    const intervalId = setInterval(loadData, 60 * 1000); // Poll every 1 minute
    return () => clearInterval(intervalId);
  }, []);

  const countries = Array.from(new Set(lakes.map(l => l.country || 'CZ'))).filter(Boolean).sort();

  const sortLakes = (list: Lake[]) => {
    return [...list].sort((a, b) => {
      switch (sortBy) {
        case 'volume-desc':
          return (b.maxVolume || 0) - (a.maxVolume || 0);
        case 'area-desc':
          return (b.area || 0) - (a.area || 0);
        case 'depth-desc':
          return (b.depth || 0) - (a.depth || 0);
        case 'name-desc':
          return b.name.localeCompare(a.name);
        case 'capacity-desc':
          return b.capacity - a.capacity;
        case 'inflow-desc':
          return parseFloat(b.inflow as any) - parseFloat(a.inflow as any);
        case 'outflow-desc':
          return parseFloat(b.outflow as any) - parseFloat(a.outflow as any);
        case 'name-asc':
        default:
          return a.name.localeCompare(b.name);
      }
    });
  };

  // Filter based on country
  const countryFiltered = lakes.filter(l => selectedCountry === 'ALL' || (l.country || 'CZ') === selectedCountry);

  // Filter based on sorting preset requirements if needed
  const preFiltered = (() => {
    if (sortBy === 'area-desc') {
      return countryFiltered.filter(l => l.area !== undefined && l.area > 0);
    }
    if (sortBy === 'depth-desc') {
      return countryFiltered.filter(l => l.depth !== undefined && l.depth > 0);
    }
    if (sortBy === 'volume-desc') {
      return countryFiltered.filter(l => l.maxVolume !== undefined && l.maxVolume > 0);
    }
    return countryFiltered;
  })();

  const sortedLakes = sortLakes(preFiltered);

  const isPhysicalRank = ['volume-desc', 'area-desc', 'depth-desc'].includes(sortBy);
  const priorityLakes = !isPhysicalRank ? sortedLakes.filter(l => l.priority) : [];
  const otherLakes = !isPhysicalRank ? sortedLakes.filter(l => !l.priority) : [];
  const rankedLakes = isPhysicalRank ? sortedLakes : [];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
      <Helmet>
        <title>{t[language].seo.homeTitle}</title>
        <meta name="description" content={t[language].seo.homeDesc} />
        <meta property="og:title" content={t[language].seo.homeTitle} />
        <meta property="og:description" content={t[language].seo.homeDesc} />
      </Helmet>
      
      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
        <h1 style={{ fontSize: '1.75rem', fontWeight: 'bold', margin: '0', color: 'var(--text-main)' }}>{t[language].sidebar.lakes} ({lakes.length})</h1>
        <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.95rem', lineHeight: '1.5' }}>
          {t[language].seo.homeDesc}
        </p>
      </div>

      {/* FILTER PANEL */}
      <div style={{ 
        display: 'flex', 
        gap: '1.5rem', 
        flexWrap: 'wrap', 
        padding: '1.25rem', 
        backgroundColor: 'var(--bg-card)', 
        borderRadius: '0.75rem', 
        border: '1px solid var(--border-color)',
        alignItems: 'center'
      }}>
        {/* SORT BY FILTER (MAIN / FIRST) */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
          <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
            {language === 'cs' ? 'Seřadit podle' : 'Sort by'}
          </label>
          <select
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
            style={{
              backgroundColor: 'var(--bg-dark)',
              color: 'var(--text-main)',
              border: '1px solid var(--border-color)',
              borderRadius: '0.375rem',
              padding: '0.5rem 2rem 0.5rem 0.75rem',
              fontSize: '0.9rem',
              outline: 'none',
              cursor: 'pointer',
              fontWeight: 500,
              minWidth: '220px'
            }}
          >
            <option value="volume-desc">{language === 'cs' ? 'Největší objem' : 'Largest volume'}</option>
            <option value="area-desc">{language === 'cs' ? 'Největší rozloha' : 'Largest area'}</option>
            <option value="depth-desc">{language === 'cs' ? 'Největší hloubka' : 'Largest depth'}</option>
            <option value="name-asc">{language === 'cs' ? 'Název (A-Z)' : 'Name (A-Z)'}</option>
            <option value="name-desc">{language === 'cs' ? 'Název (Z-A)' : 'Name (Z-A)'}</option>
            <option value="inflow-desc">{language === 'cs' ? 'Přítok (nejvyšší)' : 'Inflow (highest)'}</option>
            <option value="outflow-desc">{language === 'cs' ? 'Odtok (nejvyšší)' : 'Outflow (highest)'}</option>
          </select>
        </div>

        {/* COUNTRY FILTER (SECOND) */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
          <label style={{ fontSize: '0.75rem', color: 'var(--text-muted)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px' }}>
            {language === 'cs' ? 'Země' : 'Country'}
          </label>
          <select
            value={selectedCountry}
            onChange={(e) => setSelectedCountry(e.target.value)}
            style={{
              backgroundColor: 'var(--bg-dark)',
              color: 'var(--text-main)',
              border: '1px solid var(--border-color)',
              borderRadius: '0.375rem',
              padding: '0.5rem 2rem 0.5rem 0.75rem',
              fontSize: '0.9rem',
              outline: 'none',
              cursor: 'pointer',
              fontWeight: 500,
              minWidth: '150px'
            }}
          >
            <option value="ALL">{language === 'cs' ? 'Všechny země' : 'All countries'}</option>
            {countries.map(c => {
              const czNames: Record<string, string> = {
                CZ: 'Česko',
                US: 'USA',
                CA: 'Kanada',
                CN: 'Čína',
                BR: 'Brazílie',
                RU: 'Rusko',
                CH: 'Švýcarsko'
              };
              const enNames: Record<string, string> = {
                CZ: 'Czechia',
                US: 'USA',
                CA: 'Canada',
                CN: 'China',
                BR: 'Brazil',
                RU: 'Russia',
                CH: 'Switzerland'
              };
              const fullName = language === 'cs' ? (czNames[c] || c) : (enNames[c] || c);
              return (
                <option key={c} value={c}>{fullName} ({c})</option>
              );
            })}
          </select>
        </div>
      </div>

      {/* RENDER RANKED / SINGLE LIST */}
      {isPhysicalRank && rankedLakes.length > 0 && (
        <section>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem' }}>
            {sortBy === 'area-desc' && (language === 'cs' ? 'Žebříček: Největší jezera a nádrže podle rozlohy' : 'Ranking: Largest Lakes & Reservoirs by Area')}
            {sortBy === 'depth-desc' && (language === 'cs' ? 'Žebříček: Nejhlubší jezera a nádrže' : 'Ranking: Deepest Lakes & Reservoirs')}
            {sortBy === 'volume-desc' && (language === 'cs' ? 'Žebříček: Největší jezera a nádrže podle objemu' : 'Ranking: Largest Lakes & Reservoirs by Volume')}
            {` (${rankedLakes.length})`}
          </h2>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
            gap: '1.5rem'
          }}>
            {rankedLakes.map((lake, index) => (
              <div key={lake.id} style={{ position: 'relative' }}>
                {/* Ranking Badge */}
                <div style={{
                  position: 'absolute',
                  top: '-0.5rem',
                  left: '-0.5rem',
                  backgroundColor: index === 0 ? 'var(--color-gold, #f59e0b)' : index === 1 ? '#94a3b8' : index === 2 ? '#b45309' : 'var(--bg-card)',
                  color: index < 3 ? '#fff' : 'var(--text-muted)',
                  border: '1px solid var(--border-color)',
                  borderRadius: '50%',
                  width: '24px',
                  height: '24px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: '0.8rem',
                  fontWeight: 'bold',
                  zIndex: 3,
                  boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
                  pointerEvents: 'none'
                }}>
                  {index + 1}
                </div>
                <LakeCard lake={lake} language={language} isFav={isFavorite(lake.id)} onToggleFav={toggleFavorite} />
              </div>
            ))}
          </div>
        </section>
      )}

      {/* RENDER CZ DEFAULT SPLIT LISTS */}
      {!isPhysicalRank && priorityLakes.length > 0 && (
        <section>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem' }}>{language === 'cs' ? 'Jezera a nádrže' : 'Lakes and Reservoirs'} ({priorityLakes.length})</h2>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
            gap: '1.5rem'
          }}>
            {priorityLakes.map(lake => <LakeCard key={lake.id} lake={lake} language={language} isFav={isFavorite(lake.id)} onToggleFav={toggleFavorite} />)}
          </div>
        </section>
      )}

      {!isPhysicalRank && otherLakes.length > 0 && (
        <section>
          <h2 style={{ fontSize: '1.1rem', fontWeight: 'bold', marginBottom: '1rem', marginTop: '1rem' }}>{language === 'cs' ? 'Ostatní' : 'Other'} ({otherLakes.length})</h2>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
            gap: '1.5rem'
          }}>
            {otherLakes.map(lake => <LakeCard key={lake.id} lake={lake} language={language} isFav={isFavorite(lake.id)} onToggleFav={toggleFavorite} />)}
          </div>
        </section>
      )}
    </div>
  );
};

export default LakesOverview;