import { useState, useEffect } from 'react';
import { ComposedChart, Area, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import { Helmet } from 'react-helmet-async';
import { type Language, t } from '../translations';
import KpiCards from './KpiCards';
import { WeatherWidget } from './WeatherWidget';
import { WindChart } from './WindChart';
import { NAVIGATION_LIMITS } from '../utils/navigationLimits';
import { lakesConfig } from '../../scripts/lakesConfig';
import { FiAlertCircle, FiStar } from 'react-icons/fi';
import { TbSwimming, TbSailboat } from 'react-icons/tb';
import { useFavorites } from '../hooks/useFavorites';
import { Tooltip as IconTooltip } from './Tooltip';

interface LipnoData {
  timestamp: string;
  date: string;
  level: number;
  inflow: number;
  outflow: number;
  volume: number;
  fullness: number;
  temperature?: number | null;
  precipitation?: number | null;
}

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

const CustomTooltip = ({ active, payload, label, language, isWeather }: any) => {
  if (active && payload && payload.length) {
    const dict = t[language as Language].chart;
    if (isWeather) {
      return (
        <div style={{ backgroundColor: 'var(--bg-card)', padding: '1rem', border: '1px solid var(--border-color)', borderRadius: '0.5rem', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}>
          <p style={{ margin: '0 0 0.5rem 0', fontWeight: 'bold', color: 'var(--text-main)' }}>{label}</p>
          {payload.map((entry: any, index: number) => {
            const isTemp = entry.name === 'temperature' || entry.dataKey === 'temperature';
            return (
              <p key={index} style={{ margin: 0, color: 'var(--text-main)' }}>
                {isTemp ? (language === 'cs' ? 'Teplota' : 'Temperature') : (language === 'cs' ? 'Srážky' : 'Precipitation')}: <span style={{ fontWeight: 'bold' }}>{entry.value !== undefined && entry.value !== null ? entry.value.toFixed(1) : 'N/A'} {isTemp ? '°C' : 'mm'}</span>
              </p>
            );
          })}
        </div>
      );
    }
    return (
      <div style={{ backgroundColor: 'var(--bg-card)', padding: '1rem', border: '1px solid var(--border-color)', borderRadius: '0.5rem', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)' }}>
        <p style={{ margin: '0 0 0.5rem 0', fontWeight: 'bold', color: 'var(--text-main)' }}>{label}</p>
        {[...payload].sort((a: any, b: any) => {
          const order = ['level', 'inflow', 'outflow', 'temperature', 'precipitation'];
          const indexA = order.indexOf(a.dataKey);
          const indexB = order.indexOf(b.dataKey);
          return (indexA === -1 ? 99 : indexA) - (indexB === -1 ? 99 : indexB);
        }).map((entry: any, index: number) => {
           let labelStr = '';
           let unit = '';
           let color = '';
           if (entry.dataKey === 'level') { labelStr = dict.level; unit = 'm n. m.'; color = 'var(--color-cyan)'; }
           else if (entry.dataKey === 'outflow') { labelStr = dict.outflow; unit = 'm³/s'; color = 'var(--color-red)'; }
           else if (entry.dataKey === 'inflow') { labelStr = dict.inflow; unit = 'm³/s'; color = 'var(--color-green)'; }
           else if (entry.dataKey === 'temperature') { labelStr = language === 'cs' ? 'Teplota' : 'Temperature'; unit = '°C'; color = 'var(--color-red)'; }
           else if (entry.dataKey === 'precipitation') { labelStr = language === 'cs' ? 'Srážky' : 'Precipitation'; unit = 'mm'; color = 'var(--color-cyan)'; }
           
           if (!labelStr || entry.value === null || entry.value === undefined) return null;
           
           return (
             <div key={index} style={{ margin: 0, color: 'var(--text-main)', display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
               <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: color, marginRight: '8px' }}></span>
               {labelStr}: <span style={{ fontWeight: 'bold', marginLeft: '4px' }}>{entry.value.toFixed(entry.dataKey === 'level' ? 2 : 1)} {unit}</span>
             </div>
           );
        })}
      </div>
    );
  }
  return null;
};

const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
  const [data, setData] = useState<LipnoData[]>([]);
  const [loading, setLoading] = useState(true);
  const [lakeInfo, setLakeInfo] = useState<any>(null);
  const [isSmoothed, setIsSmoothed] = useState(true);
  const [timeRange, setTimeRange] = useState<'24h' | '7d' | '30d' | '1y' | 'all'>('7d');
  const dict = t[language].chart;
  const topbarDict = t[language].topbar;

  useEffect(() => {
    const loadData = () => {
      fetch(`/data/lakes_index.json?t=${Date.now()}`)
        .then(res => res.json())
        .then(indexData => {
          const found = indexData.find((l: any) => l.id === lakeId);
          setLakeInfo(found || { name: 'Lipno 1', river: 'Vltava' });
        })
        .catch(err => console.error(err));

      const internalId = lakeId ? lakeId.split('|')[0] : 'VLL1';

      fetch(`/data/${internalId}.json?t=${Date.now()}`)
        .then(res => res.json())
        .then(json => {
          const formattedData = json.map((item: any) => {
            const outflow = item.flow === null || isNaN(item.flow) ? 0 : item.flow;

            return {
              timestamp: item.timestamp,
              date: new Date(item.timestamp).toLocaleString(language === 'cs' ? 'cs-CZ' : 'en-GB', {
                day: '2-digit', month: '2-digit', year: 'numeric',
                hour: '2-digit', minute: '2-digit'
              }),
              level: item.level === null || isNaN(item.level) ? 0 : item.level,
              outflow: outflow,
              inflow: item.inflow || 0,
              volume: item.volume || 0,
              fullness: 0,
              temperature: item.temperature,
              precipitation: item.precipitation === null ? undefined : item.precipitation
            };
          });
          setData(formattedData);
          setLoading(false);
        })
        .catch(err => {
          console.error('Failed to load data', err);
          setLoading(false);
        });
    };

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

  if (loading) {
    return (
      <div style={{ height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'var(--bg-dark)', color: 'var(--text-main)' }}>
        <div style={{ fontSize: '1.25rem' }}>Loading HLADINATOR...</div>
      </div>
    );
  }

  const latestData = data[data.length - 1] || { level: 0, inflow: 0, outflow: 0, volume: 0, fullness: 0 };
  const curveType = isSmoothed ? 'monotone' : 'linear';

  // Find last valid values for KPIs, including 0
  const lastValidFlowData = [...data].reverse().find(d => d.outflow !== null && !isNaN(d.outflow) && d.outflow >= 0) || latestData;

  const now = new Date().getTime();
  const getCutoff = () => {
    switch (timeRange) {
      case '24h': return now - 24 * 60 * 60 * 1000;
      case '7d': return now - 7 * 24 * 60 * 60 * 1000;
      case '30d': return now - 30 * 24 * 60 * 60 * 1000;
      case '1y': return now - 365 * 24 * 60 * 60 * 1000;
      default: return 0;
    }
  };

  const cutoff = getCutoff();
  const filteredData = data.filter(d => new Date(d.timestamp).getTime() >= cutoff);

  // Downsample data for large time ranges to prevent stuttering
  let chartData = filteredData;
  if (timeRange === '30d' && filteredData.length > 200) {
    chartData = filteredData.filter((_, i) => i % 4 === 0 || i === filteredData.length - 1);
  } else if ((timeRange === '1y' || timeRange === 'all') && filteredData.length > 200) {
    chartData = filteredData.filter((_, i) => i % 24 === 0 || i === filteredData.length - 1);
  }

  const animate = chartData.length < 150;

  // Find record from 24h, 7d, 30d ago
  const nowMs = new Date(latestData.timestamp).getTime();
  const targetMs24h = nowMs - 24 * 60 * 60 * 1000;
  const targetMs7d = nowMs - 7 * 24 * 60 * 60 * 1000;
  const targetMs30d = nowMs - 30 * 24 * 60 * 60 * 1000;
  
  const { isFavorite, toggleFavorite } = useFavorites();
  const isFav = lakeId ? isFavorite(lakeId) : false;
  
  let level24hAgo = latestData.level;
  let level7dAgo = latestData.level;
  let level30dAgo = latestData.level;
  
  let minDiff24h = Infinity;
  let minDiff7d = Infinity;
  let minDiff30d = Infinity;
  
  let inflowSum24h = 0;
  let outflowSum24h = 0;
  let flowCount24h = 0;
  
  for (const d of data) {
    const t = new Date(d.timestamp).getTime();
    
    const diff24h = Math.abs(t - targetMs24h);
    if (diff24h < minDiff24h) {
      minDiff24h = diff24h;
      level24hAgo = d.level;
    }
    
    const diff7d = Math.abs(t - targetMs7d);
    if (diff7d < minDiff7d) {
      minDiff7d = diff7d;
      level7dAgo = d.level;
    }
    
    const diff30d = Math.abs(t - targetMs30d);
    if (diff30d < minDiff30d) {
      minDiff30d = diff30d;
      level30dAgo = d.level;
    }
    
    if (t >= targetMs24h && d.inflow !== undefined && d.outflow !== undefined) {
      inflowSum24h += d.inflow;
      outflowSum24h += d.outflow;
      flowCount24h++;
    }
  }
  
  const levelDiff24h = latestData.level - level24hAgo;
  const levelDiff7d = latestData.level - level7dAgo;
  const levelDiff30d = latestData.level - level30dAgo;
  
  const avgInflow24h = flowCount24h > 0 ? inflowSum24h / flowCount24h : undefined;
  const avgOutflow24h = flowCount24h > 0 ? outflowSum24h / flowCount24h : undefined;

  const limits = lakeInfo ? NAVIGATION_LIMITS[lakeInfo.id] : undefined;
  const staticConfig = lakeInfo ? lakesConfig.find(l => l.id === lakeInfo.id) : undefined;

  const kpiData = {
    level: latestData.level,
    levelDiff24h,
    levelDiff7d,
    levelDiff30d,
    inflow: lastValidFlowData.inflow,
    outflow: lastValidFlowData.outflow,
    volume: lakeInfo?.volume || 0,
    fullness: lakeInfo?.capacity || 0,
    storageDiff: lakeInfo?.storageDiff,
    minDiff: staticConfig?.minLevel ? latestData.level - staticConfig.minLevel : undefined,
    avgInflow24h,
    avgOutflow24h
  };

  const leftYAxisDomain = [
    (dataMin: number) => {
      let min = dataMin;
      if (limits) limits.forEach(l => { if (l.level < min) min = l.level; });
      return min - 0.5;
    },
    (dataMax: number) => {
      let max = dataMax;
      if (staticConfig?.maxLevel && staticConfig.maxLevel > max) max = staticConfig.maxLevel;
      if (staticConfig?.storageLevel && staticConfig.storageLevel > max) max = staticConfig.storageLevel;
      return max + 0.5;
    }
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', width: '100%' }}>
      {lakeInfo && (
        <>
          <Helmet>
            <title>{t[language].seo.lakeTitle.replace('{name}', lakeInfo.name)}</title>
            <meta name="description" content={t[language].seo.lakeDesc.replace('{name}', lakeInfo.name)} />
            <meta property="og:title" content={t[language].seo.lakeTitle.replace('{name}', lakeInfo.name)} />
            <meta property="og:description" content={t[language].seo.lakeDesc.replace('{name}', lakeInfo.name)} />
          </Helmet>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', margin: '0 0 0.5rem 0' }}>
              <h1 style={{ fontSize: '2rem', fontWeight: 'bold', margin: 0, color: 'var(--text-main)' }}>
                {lakeInfo.name}
              </h1>
              <button 
                onClick={(e) => { e.preventDefault(); if (lakeId) toggleFavorite(lakeId); }}
                style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', padding: '0.25rem' }}
                title={isFav ? (language === 'cs' ? "Odebrat z oblíbených" : "Remove from favorites") : (language === 'cs' ? "Přidat do oblíbených" : "Add to favorites")}
              >
                <FiStar size={24} fill={isFav ? '#f59e0b' : 'none'} color={isFav ? '#f59e0b' : 'var(--text-muted)'} />
              </button>
              
              <div style={{ display: 'flex', gap: '0.5rem', marginLeft: 'auto' }}>
                <IconTooltip content={(lakeInfo as any).navigationForbidden ? (language === 'cs' ? 'Koupání zakázáno' : 'Swimming forbidden') : (language === 'cs' ? 'Koupání (bez omezení)' : 'Swimming allowed')}>
                  <TbSwimming size={24} color={(lakeInfo as any).navigationForbidden ? 'var(--color-red)' : 'var(--color-green)'} style={{ opacity: (lakeInfo as any).navigationForbidden ? 0.5 : 0.8 }} />
                </IconTooltip>
                <IconTooltip content={(lakeInfo as any).navigationForbidden ? (language === 'cs' ? 'Plavba zakázána' : 'Navigation forbidden') : (language === 'cs' ? 'Plavba (i bezmotorová) povolena' : 'Navigation allowed')}>
                  <TbSailboat size={24} color={(lakeInfo as any).navigationForbidden ? 'var(--color-red)' : 'var(--color-green)'} style={{ opacity: (lakeInfo as any).navigationForbidden ? 0.5 : 0.8 }} />
                </IconTooltip>
              </div>
            </div>
            <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: '0.95rem', lineHeight: '1.5' }}>
              {t[language].seo.lakeDesc.replace('{name}', lakeInfo.name)}
            </p>
          </div>
        </>
      )}

      <div style={{ color: 'var(--text-muted)', fontSize: '0.9rem', marginTop: '-0.5rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
        <span>{topbarDict.updated} {new Date().toLocaleDateString(language === 'cs' ? 'cs-CZ' : 'en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })}, {new Date().toLocaleTimeString(language === 'cs' ? 'cs-CZ' : 'en-GB', { hour: '2-digit', minute: '2-digit' })} UTC</span>
        <div className="status-dot"></div>
      </div>

      <div className="kpi-grid-container">
        <KpiCards data={kpiData} language={language} lakeName={lakeInfo ? lakeInfo.name : 'Lipno 1'} />
        
        {lakeInfo && lakeInfo.lat && lakeInfo.lng && (
          <WeatherWidget lat={lakeInfo.lat} lng={lakeInfo.lng} language={language} windUnit={windUnit} sensorTemp={latestData.temperature ?? undefined} />
        )}
      </div>
      
      {limits && limits.map((limit, idx) => {
        const diff = latestData.level - limit.level;
        if (diff < 0.3) {
          const isBelow = diff < 0;
          return (
            <div key={idx} style={{ padding: '1rem', borderRadius: '8px', backgroundColor: isBelow ? 'rgba(248, 113, 113, 0.1)' : 'rgba(245, 158, 11, 0.1)', border: `1px solid ${isBelow ? 'var(--color-red)' : '#f59e0b'}`, color: isBelow ? 'var(--color-red)' : '#f59e0b', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
              <FiAlertCircle style={{ flexShrink: 0, fontSize: '1.5rem' }} />
              <div>
                <strong>{language === 'cs' ? limit.labelCs : limit.labelEn} ({limit.level.toFixed(2)} m n.m.):</strong>
                <br/>
                {isBelow 
                  ? (language === 'cs' ? `Hladina je ${Math.abs(diff).toFixed(2)} m POD limitem! Přerušení provozu.` : `Level is ${Math.abs(diff).toFixed(2)} m BELOW limit! Operations suspended.`)
                  : (language === 'cs' ? `Hladina se blíží k limitu (zbývá ${diff.toFixed(2)} m).` : `Level is approaching limit (${diff.toFixed(2)} m remaining).`)
                }
              </div>
            </div>
          );
        }
        return null;
      })}
      
      {/* CHART SECTION */}
      <div className="chart-card">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '1rem' }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem', color: 'var(--text-main)' }}>{dict.title} {lakeInfo ? `${lakeInfo.name} ${lakeInfo.river ? `- ${lakeInfo.river}` : ''}` : 'Lipno 1 - Vltava'}</h3>
          <div className="top-time-controls" style={{ margin: 0 }}>
            <button className={timeRange === '24h' ? 'active' : ''} onClick={() => setTimeRange('24h')}>24h</button>
            <button className={timeRange === '7d' ? 'active' : ''} onClick={() => setTimeRange('7d')}>7d</button>
            <button className={timeRange === '30d' ? 'active' : ''} onClick={() => setTimeRange('30d')}>30d</button>
            <button className={timeRange === '1y' ? 'active' : ''} onClick={() => setTimeRange('1y')}>{dict.year}</button>
            <button className={timeRange === 'all' ? 'active' : ''} onClick={() => setTimeRange('all')}>{dict.all}</button>
          </div>
        </div>

        <div style={{ flex: 1, minHeight: '300px', width: '100%', marginTop: '1rem' }}>
          <ResponsiveContainer width="100%" height="100%">
            <ComposedChart data={chartData} margin={{ top: 20, right: 0, left: 10, bottom: 0 }}>
              <defs>
                <linearGradient id="colorLevel" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor="var(--color-cyan)" stopOpacity={0.5}/>
                  <stop offset="95%" stopColor="var(--color-cyan)" stopOpacity={0}/>
                </linearGradient>
              </defs>
              <XAxis dataKey="date" stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} minTickGap={50} />
              <YAxis yAxisId="left" domain={leftYAxisDomain as any} stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} tickFormatter={(v) => v.toFixed(2)} />
              <YAxis yAxisId="right" orientation="right" domain={[0, (dataMax: number) => Math.max(dataMax, 1)]} stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} />
              
              <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
              <Tooltip content={<CustomTooltip language={language} />} />
              
              {/* Data Series */}
              {limits && limits.map((limit, idx) => (
                <ReferenceLine key={idx} yAxisId="left" y={limit.level} stroke={limit.type === 'danger' ? 'var(--color-red)' : '#f59e0b'} strokeDasharray="3 3" label={{ position: 'insideBottomLeft', value: language === 'cs' ? `${limit.labelCs} (${limit.level.toFixed(2)} m n. m.)` : `${limit.labelEn} (${limit.level.toFixed(2)} m a.s.l.)`, fill: limit.type === 'danger' ? 'var(--color-red)' : '#f59e0b', fontSize: 12 }} />
              ))}
              {staticConfig?.maxLevel && (
                <ReferenceLine yAxisId="left" y={staticConfig.maxLevel} stroke="var(--color-orange)" strokeDasharray="3 3" label={{ position: 'insideBottomLeft', value: language === 'cs' ? `Maximální retenční hladina (${staticConfig.maxLevel.toFixed(2)} m n. m.)` : `Max retention level (${staticConfig.maxLevel.toFixed(2)} m a.s.l.)`, fill: 'var(--color-orange)', fontSize: 12 }} />
              )}
              {staticConfig?.storageLevel && (
                <ReferenceLine yAxisId="left" y={staticConfig.storageLevel} stroke="#a855f7" strokeDasharray="3 3" label={{ position: 'insideBottomLeft', value: language === 'cs' ? `Hladina zásobního prostoru (${staticConfig.storageLevel.toFixed(2)} m n. m.)` : `Storage space level (${staticConfig.storageLevel.toFixed(2)} m a.s.l.)`, fill: '#a855f7', fontSize: 12 }} />
              )}
              <Area yAxisId="left" type={curveType} dataKey="level" stroke="var(--color-cyan)" strokeWidth={2} fillOpacity={1} fill="url(#colorLevel)" isAnimationActive={animate} />
              <Line yAxisId="right" type={curveType} dataKey="outflow" stroke="var(--color-red)" strokeWidth={2} dot={false} isAnimationActive={animate} />
              <Line yAxisId="right" type={curveType} dataKey="inflow" stroke="var(--color-green)" strokeWidth={2} dot={false} isAnimationActive={animate} />
            </ComposedChart>
          </ResponsiveContainer>
        </div>
        
        {/* Chart Legend */}
        <div className="chart-legend-container" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '1rem', marginTop: '1rem', fontSize: '0.85rem', color: 'var(--text-main)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: '12px', height: '4px', backgroundColor: 'var(--color-cyan)' }}></div> {dict.level}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: '12px', height: '4px', backgroundColor: 'var(--color-red)' }}></div> {dict.outflow}</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: '12px', height: '4px', backgroundColor: 'var(--color-green)' }}></div> {dict.inflow}</span>
        </div>

        {/* WEATHER CHART SECTION */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', marginTop: '2rem', flexWrap: 'wrap', gap: '1rem' }}>
          <h3 style={{ margin: 0, fontSize: '1.1rem', color: 'var(--text-main)' }}>{language === 'cs' ? 'Počasí (Teplota a Srážky)' : 'Weather (Temperature & Precipitation)'}</h3>
        </div>

        <div style={{ flex: 1, minHeight: '200px', width: '100%', marginTop: '0.5rem' }}>
          <ResponsiveContainer width="100%" height="100%">
            <ComposedChart data={chartData} margin={{ top: 10, right: 0, left: 10, bottom: 0 }}>
              <XAxis dataKey="date" stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} minTickGap={50} />
              <YAxis yAxisId="temp" domain={['auto', 'auto']} stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} tickFormatter={(v) => v.toFixed(1)} />
              <YAxis yAxisId="precip" orientation="right" domain={[0, 'auto']} stroke="var(--text-muted)" tick={{fill: 'var(--text-muted)', fontSize: 12}} />
              
              <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
              <Tooltip content={<CustomTooltip language={language} isWeather={true} />} />
              
              <Bar yAxisId="precip" dataKey="precipitation" fill="var(--color-cyan)" fillOpacity={0.6} isAnimationActive={animate} />
              <Line yAxisId="temp" type={curveType} dataKey="temperature" stroke="var(--color-red)" strokeWidth={2} dot={true} isAnimationActive={animate} />
            </ComposedChart>
          </ResponsiveContainer>
        </div>
        
        <div className="chart-legend-container" style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '1rem', marginTop: '1rem', fontSize: '0.85rem', color: 'var(--text-main)' }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: '12px', height: '4px', backgroundColor: 'var(--color-red)' }}></div> {language === 'cs' ? 'Teplota vzduchu' : 'Temperature'} [°C]</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: '12px', height: '12px', backgroundColor: 'var(--color-cyan)', opacity: 0.6 }}></div> {language === 'cs' ? 'Srážky' : 'Precipitation'} [mm]</span>
        </div>

        {/* Wind Chart placed inside the main card below the weather graph */}
        {lakeInfo && lakeInfo.lat && lakeInfo.lng && (
          <WindChart lat={lakeInfo.lat} lng={lakeInfo.lng} language={language} timeRange={timeRange} windUnit={windUnit} />
        )}

        {/* Smoothed Toggle Control */}
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '1rem', marginTop: '3rem', marginBottom: '1rem' }}>
          <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>{dict.view}</span>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '0.9rem' }}>
            <span style={{ color: !isSmoothed ? 'var(--text-main)' : 'var(--text-muted)', transition: '0.2s', marginRight: '0.5rem' }}>{dict.raw}</span>
            <div 
              className={`toggle-switch ${isSmoothed ? 'on' : ''}`}
              onClick={() => setIsSmoothed(!isSmoothed)}
            ></div>
            <span style={{ color: isSmoothed ? 'var(--text-main)' : 'var(--text-muted)', transition: '0.2s', marginLeft: '0.5rem' }}>{dict.smoothed}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default LakeDetail;