import { useState } from 'react';
import { useSignalsFeed, type SignalType, type Horizon } from '../hooks/useSignalsFeed';
import SignalCard from '../components/signals/SignalCard';
import { useT } from '../i18n/LanguageContext';

const CATEGORIES = ['All', 'Sports', 'Politics', 'Crypto', 'Weather', 'Tech', 'Finance', 'Culture', 'Geopolitics', 'Elections'];
const TYPES: { key: SignalType | ''; labelKey: string }[] = [
  { key: '', labelKey: 'sig.fAll' },
  { key: 'WHALE', labelKey: 'sig.fWhale' },
  { key: 'LONGSHOT', labelKey: 'sig.fLongshot' },
  { key: 'MOMENTUM', labelKey: 'sig.fMomentum' },
  { key: 'SPIKE', labelKey: 'sig.fSpike' },
];
const STRENGTHS: { key: number; labelKey: string }[] = [
  { key: 0, labelKey: 'sig.sAny' },
  { key: 0.5, labelKey: 'sig.sStrong' },
  { key: 0.8, labelKey: 'sig.sVeryStrong' },
];
const HORIZONS: { key: Horizon; labelKey: string }[] = [
  { key: '', labelKey: 'sig.hAny' },
  { key: 'fast', labelKey: 'sig.hFast' },
  { key: 'mid', labelKey: 'sig.hMid' },
  { key: 'long', labelKey: 'sig.hLong' },
];

export default function SignalsFeed() {
  const [category, setCategory] = useState('All');
  const [type, setType] = useState<SignalType | ''>('');
  const [minStrength, setMinStrength] = useState(0);
  const [horizon, setHorizon] = useState<Horizon>('');
  const { signals, loading } = useSignalsFeed({ limit: 40, category, type, minStrength, horizon });
  const { t: tr } = useT();

  const cycleStrength = () => {
    const i = STRENGTHS.findIndex(s => s.key === minStrength);
    setMinStrength(STRENGTHS[(i + 1) % STRENGTHS.length].key);
  };
  const strengthLabel = tr(STRENGTHS.find(s => s.key === minStrength)?.labelKey ?? STRENGTHS[0].labelKey);

  const cycleHorizon = () => {
    const i = HORIZONS.findIndex(h => h.key === horizon);
    setHorizon(HORIZONS[(i + 1) % HORIZONS.length].key);
  };
  const horizonLabel = tr(HORIZONS.find(h => h.key === horizon)?.labelKey ?? HORIZONS[0].labelKey);

  return (
    <div className="signals-feed">
      <h2 className="sig-title">{tr('sig.title')}</h2>
      <p className="sig-desc">{tr('sig.desc')}</p>

      <div className="sf-filters">
        <div className="sf-chips">
          {TYPES.map(t => (
            <button
              key={t.key || 'all'}
              className={`pill ${type === t.key ? 'pill-active' : ''}`}
              onClick={() => setType(t.key)}
            >
              {tr(t.labelKey)}
            </button>
          ))}
          <button
            className={`pill ${minStrength > 0 ? 'pill-active' : ''}`}
            onClick={cycleStrength}
            title={tr('sig.titleStrength')}
          >
            💪 {strengthLabel}
          </button>
          <button
            className={`pill ${horizon ? 'pill-active' : ''}`}
            onClick={cycleHorizon}
            title={tr('sig.titleHorizon')}
          >
            ⏱ {horizonLabel}
          </button>
        </div>
        <div className="category-pills">
          {CATEGORIES.map(cat => (
            <button
              key={cat}
              className={`pill ${category === cat ? 'pill-active' : ''}`}
              onClick={() => setCategory(cat)}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      {loading && signals.length === 0 ? (
        <div className="sf-grid">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="sf-skeleton" />
          ))}
        </div>
      ) : signals.length === 0 ? (
        <div className="sf-empty">
          <div className="sf-empty-icon">🔍</div>
          <div className="sf-empty-title">{tr('sig.emptyTitle')}</div>
          <div className="sf-empty-sub">
            {tr('sig.emptySub')}
          </div>
        </div>
      ) : (
        <div className="sf-grid">
          {signals.map(s => (
            <SignalCard key={`${s.type}-${s.marketId}`} signal={s} />
          ))}
        </div>
      )}
    </div>
  );
}