"use client";

// Mobile Discover sheet (spec "Sheets"): three soft depth rows that open the
// Featured experts, Trending minnects and Find experts panels as 80% height
// sheets, then the Dark/Light appearance switch. Styles: src/styles/sheet.css.
import type { ReactNode } from "react";
import type { DiscoverExpert, DiscoverMinnect } from "@/lib/discover";
import { useTheme } from "@/lib/use-theme";
import type { Theme } from "@/lib/theme";
import { BottomSheet } from "./BottomSheet";
import { DepthButton } from "./Buttons";
import { FeaturedCarousel } from "./FeaturedCarousel";
import { HexAvatar } from "./HexAvatar";
import { TrendingMinnectsRail } from "./TrendingMinnectsRail";

export type DiscoverPanel = "featured" | "trending" | "search";

/** Width of the center photo in the featured panel sheet. */
export const PANEL_CAROUSEL_SIZE = 150;

/** "Name1, Name2 and N more" for the Featured experts row; shorter lists read plainly. */
export function featuredSubtitle(experts: Pick<DiscoverExpert, "displayName">[]): string {
  const names = experts.map((e) => e.displayName || "Expert");
  if (names.length === 0) return "";
  if (names.length === 1) return names[0];
  if (names.length === 2) return `${names[0]} and ${names[1]}`;
  return `${names[0]}, ${names[1]} and ${names.length - 2} more`;
}

function Chevron() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="btn-depth-chev">
      <path d="m9 6 6 6-6 6" />
    </svg>
  );
}

const icon = { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" } as const;

function FlameIcon() {
  return (
    <svg {...icon}>
      <path d="M12 21c4 0 7-2.8 7-6.8 0-4.5-4-6.7-5-11.2-2.3 1.7-3.5 4-3.2 6.5C9.5 9 8.6 8 8.3 6.6 6.3 8.5 5 10.9 5 14.2 5 18.2 8 21 12 21z" />
    </svg>
  );
}

function SearchIcon() {
  return (
    <svg {...icon}>
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  );
}

function MoonIcon() {
  return (
    <svg {...icon} aria-hidden="true">
      <path d="M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z" />
    </svg>
  );
}

function SunIcon() {
  return (
    <svg {...icon} aria-hidden="true">
      <circle cx="12" cy="12" r="4" />
      <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
    </svg>
  );
}

/** The Dark/Light switch in the soft depth style; the choice persists through useTheme. */
export function AppearanceSwitch() {
  const { theme, setTheme } = useTheme();
  const options: { value: Theme; label: string; icon: ReactNode }[] = [
    { value: "dark", label: "Dark", icon: <MoonIcon /> },
    { value: "light", label: "Light", icon: <SunIcon /> },
  ];
  return (
    <div className="seg-depth" role="group" aria-label="Appearance">
      {options.map((o) => (
        <button key={o.value} type="button" className={theme === o.value ? "on" : undefined} aria-pressed={theme === o.value} onClick={() => setTheme(o.value)}>
          {o.icon}
          {o.label}
        </button>
      ))}
    </div>
  );
}

export interface DiscoverSheetProps {
  experts: DiscoverExpert[];
  onOpen: (panel: DiscoverPanel) => void;
  onClose: () => void;
}

export function DiscoverSheet({ experts, onOpen, onClose }: DiscoverSheetProps) {
  return (
    <BottomSheet title="Discover" onClose={onClose} className="sheet-discover">
      {experts.length > 0 ? (
        <DepthButton
          label="Featured experts"
          sublabel={featuredSubtitle(experts)}
          onClick={() => onOpen("featured")}
          leading={
            <span className="depth-stack" aria-hidden="true">
              {experts.slice(0, 3).map((e) => (
                <HexAvatar key={String(e.id)} name={e.displayName || "Expert"} pictureUrl={e.pictureUrl} size="sm" />
              ))}
            </span>
          }
          trailing={<Chevron />}
        />
      ) : null}
      <DepthButton label="Trending minnects" sublabel="Answers people are watching" icon={<FlameIcon />} trailing={<Chevron />} onClick={() => onOpen("trending")} />
      <DepthButton label="Find experts" sublabel="Search by name, topic or category" icon={<SearchIcon />} trailing={<Chevron />} onClick={() => onOpen("search")} />
      <span className="type-eyebrow sheet-sub">Appearance</span>
      <AppearanceSwitch />
    </BottomSheet>
  );
}

export interface DiscoverPanelSheetProps {
  panel: DiscoverPanel;
  experts: DiscoverExpert[];
  trending: DiscoverMinnect[];
  search?: ReactNode;
  onClose: () => void;
}

const TITLES: Record<DiscoverPanel, string> = {
  featured: "Featured experts",
  trending: "Trending minnects",
  search: "Find experts",
};

/** One Discover panel as an 80% height sheet with a close button; reuses the desktop components. */
export function DiscoverPanelSheet({ panel, experts, trending, search, onClose }: DiscoverPanelSheetProps) {
  return (
    <BottomSheet title={TITLES[panel]} onClose={onClose} className={`sheet-panel sheet-panel-${panel}`}>
      {panel === "featured" ? <FeaturedCarousel experts={experts} size={PANEL_CAROUSEL_SIZE} variant="slide" /> : null}
      {panel === "trending" ? <TrendingMinnectsRail minnects={trending} /> : null}
      {panel === "search" ? search : null}
    </BottomSheet>
  );
}