import React, { useEffect, useState } from 'react';
import { LuLayoutGrid, LuList } from 'react-icons/lu';

import { cn } from '../copilot/cn';

export type ContentView = 'grid' | 'table';

interface ViewToggleProps {
  value: ContentView;
  onChange: (view: ContentView) => void;
  className?: string;
}

function ToggleButton({
  active,
  label,
  onClick,
  children,
}: {
  active: boolean;
  label: string;
  onClick: () => void;
  children: React.ReactNode;
}): JSX.Element {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-pressed={active}
      aria-label={label}
      title={label}
      className={cn(
        'grid size-[30px] place-items-center rounded-[7px] transition-colors',
        active
          ? 'bg-gray-100 text-gray-900'
          : 'text-gray-500 hover:bg-gray-50 hover:text-gray-900'
      )}
    >
      {children}
    </button>
  );
}

function ViewToggle({
  value,
  onChange,
  className,
}: ViewToggleProps): JSX.Element {
  return (
    <div
      role="group"
      aria-label="Layout"
      className={cn(
        'inline-flex items-center gap-0.5 rounded-[10px] border border-gray-200 bg-white p-[3px]',
        className
      )}
    >
      <ToggleButton
        active={value === 'grid'}
        label="Grid view"
        onClick={() => onChange('grid')}
      >
        <LuLayoutGrid className="size-4" />
      </ToggleButton>
      <ToggleButton
        active={value === 'table'}
        label="Table view"
        onClick={() => onChange('table')}
      >
        <LuList className="size-4" />
      </ToggleButton>
    </div>
  );
}

const VIEW_STORAGE_KEY = 'recomaze.contents.view';

export function useContentView(): [ContentView, (view: ContentView) => void] {
  const [view, setView] = useState<ContentView>('grid');

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem(VIEW_STORAGE_KEY);
      if (stored === 'table') setView('table');
    } catch {
      /* private mode / blocked storage - the default is fine */
    }
  }, []);

  const choose = (next: ContentView): void => {
    setView(next);
    try {
      window.localStorage.setItem(VIEW_STORAGE_KEY, next);
    } catch {
      /* the choice still applies for this session */
    }
  };

  return [view, choose];
}

export default ViewToggle;