"use client";

import { PLATFORM_VALUES, type Platform } from "../../lib/platform";
import type { ChartFilters } from "../../lib/chartConfig";
import { ymdToInput, inputToYmd } from "../../lib/ymd";

export type ChannelOption = { slug: string; name: string };

const field = "rounded-md border border-border bg-card px-2 py-1 text-sm";
const label = "text-xs font-medium text-muted-foreground";

export function FilterBar({
  filters,
  channels,
  onChange,
}: {
  filters: ChartFilters;
  channels: ChannelOption[];
  onChange: (next: ChartFilters) => void;
}) {
  const set = (patch: Partial<ChartFilters>) => onChange({ ...filters, ...patch });

  const toggleChannel = (slug: string) => {
    const cur = new Set(filters.channels ?? []);
    if (cur.has(slug)) cur.delete(slug);
    else cur.add(slug);
    set({ channels: cur.size ? Array.from(cur) : undefined });
  };
  const togglePlatform = (p: Platform) => {
    const cur = new Set(filters.platforms ?? []);
    if (cur.has(p)) cur.delete(p);
    else cur.add(p);
    set({ platforms: cur.size ? Array.from(cur) : undefined });
  };

  return (
    <div className="flex flex-wrap items-end gap-3 rounded-lg border border-border bg-card p-3">
      <label className="flex flex-col gap-1">
        <span className={label}>From</span>
        <input
          type="date"
          className={field}
          value={ymdToInput(filters.dateFrom)}
          onChange={(e) => set({ dateFrom: inputToYmd(e.target.value) })}
        />
      </label>
      <label className="flex flex-col gap-1">
        <span className={label}>To</span>
        <input
          type="date"
          className={field}
          value={ymdToInput(filters.dateTo)}
          onChange={(e) => set({ dateTo: inputToYmd(e.target.value) })}
        />
      </label>

      <div className="flex flex-col gap-1">
        <span className={label}>Platform</span>
        <div className="flex gap-1">
          {PLATFORM_VALUES.map((p) => {
            const on = filters.platforms?.includes(p) ?? false;
            return (
              <button
                key={p}
                type="button"
                onClick={() => togglePlatform(p)}
                className={`rounded-md border px-2 py-1 text-xs capitalize ${
                  on
                    ? "border-info/30 bg-info-soft text-info"
                    : "border-border"
                }`}
              >
                {p}
              </button>
            );
          })}
        </div>
      </div>

      <label className="flex items-center gap-2 self-center pt-4 text-sm">
        <input
          type="checkbox"
          checked={filters.hasTranscriptOnly ?? false}
          onChange={(e) =>
            set({ hasTranscriptOnly: e.target.checked || undefined })
          }
        />
        Has transcript only
      </label>

      {channels.length > 0 && (
        <details className="w-full">
          <summary className={`${label} cursor-pointer`}>
            Channels{filters.channels?.length ? ` (${filters.channels.length})` : ""}
          </summary>
          <div className="mt-2 flex flex-wrap gap-1">
            {channels.map((c) => {
              const on = filters.channels?.includes(c.slug) ?? false;
              return (
                <button
                  key={c.slug}
                  type="button"
                  onClick={() => toggleChannel(c.slug)}
                  className={`rounded-md border px-2 py-1 text-xs ${
                    on
                      ? "border-info/30 bg-info-soft text-info"
                      : "border-border"
                  }`}
                >
                  {c.name}
                </button>
              );
            })}
          </div>
        </details>
      )}
    </div>
  );
}