"use client";

import { useState } from "react";

const FEED_TYPES = [
  {
    id: "for-you",
    label: "For You",
    count: "128",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <path d="m3 11 9-8 9 8M5 10v10a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V10" />
      </svg>
    ),
  },
  {
    id: "following",
    label: "Following",
    count: "42",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9" />
        <path d="M2 12h20M12 2a14 14 0 0 1 0 20M12 2a14 14 0 0 0 0 20" />
      </svg>
    ),
  },
  {
    id: "breaking",
    label: "Breaking",
    count: "7",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <circle cx="6" cy="6" r="3" />
        <path d="M9.5 8 18 4M22 4l-1.5 3.5L14 11" />
        <circle cx="14" cy="11" r="3" />
        <path d="M11 13l-2.5 7" />
        <circle cx="7" cy="20" r="3" />
      </svg>
    ),
  },
  {
    id: "video",
    label: "Video",
    count: "86",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <polygon points="6 4 20 12 6 20" fill="currentColor" stroke="none" />
      </svg>
    ),
  },
  {
    id: "audio",
    label: "Audio",
    count: "14",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <path d="M9 18V5l12-2v13" />
        <circle cx="6" cy="18" r="3" />
        <circle cx="18" cy="16" r="3" />
      </svg>
    ),
  },
  {
    id: "conversations",
    label: "Conversations",
    count: "28",
    icon: (
      <svg className="ico" viewBox="0 0 24 24">
        <path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z" />
      </svg>
    ),
  },
];

const LIVE_CHANNELS = [
  { img: "https://images.unsplash.com/photo-1495020689067-958852a7765e?w=200&q=80", name: "NDTV 24×7", show: "Prime Time", watching: "12K" },
  { img: "https://images.unsplash.com/photo-1585829365295-ab7cd400c167?w=200&q=80", name: "AajTak", show: "Halla Bol", watching: "21K" },
  { img: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=200&q=80", name: "India Today", show: "Newstrack", watching: "8K" },
  { img: "https://images.unsplash.com/photo-1611162616305-c69b3fa7fbe0?w=200&q=80", name: "Republic", show: "Debate", watching: "6K" },
];

const SHORTCUTS = [
  { label: "📈 Markets dashboard", tag: "live" },
  { label: "🏛️ Parliament watch", tag: "live" },
  { label: "🌧️ Monsoon tracker", tag: "14" },
  { label: "🏏 IPL scorecard", tag: "42" },
  { label: "🛰️ ISRO updates", tag: "9" },
];

export default function FeedsLeftRail() {
  const [activeType, setActiveType] = useState("for-you");

  return (
    <aside className="feeds-rail">
      <div className="rail-card accent-l">
        <div className="rail-h">Your feed</div>
        <div className="feed-types">
          {FEED_TYPES.map((t) => (
            <button
              key={t.id}
              className={`feed-type${activeType === t.id ? " active" : ""}`}
              onClick={() => setActiveType(t.id)}
            >
              <span className="lt">
                {t.icon}
                {t.label}
              </span>
              <span className="ct">{t.count}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="rail-card">
        <div className="rail-h">On air right now</div>
        <div className="lc-mini">
          {LIVE_CHANNELS.map((ch, i) => (
            <a key={i} href="#" className="lc-row live">
              <span className="lc-thumb">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={ch.img} alt={ch.name} />
              </span>
              <span>
                <span className="lc-name">{ch.name}</span>
                <br />
                <span className="lc-now">{ch.show}</span>
              </span>
              <span className="lc-watching">{ch.watching}</span>
            </a>
          ))}
        </div>
      </div>

      <div className="rail-card">
        <div className="rail-h">Saved shortcuts</div>
        <div className="shortcut-list">
          {SHORTCUTS.map((s, i) => (
            <a key={i} href="#" className="shortcut">
              {s.label}
              <span className="tag">{s.tag}</span>
            </a>
          ))}
        </div>
      </div>
    </aside>
  );
}