import { ChevronDown, FileText, Maximize2 } from 'lucide-react';
import { WALKTHROUGH_SUMMARY_RANGES } from '@/shared/constants/walkthrough';
import type { WalkthroughSummaryRange } from '@/shared/constants/walkthrough';
import type { WalkthroughSummaryWorkflow } from '@/components/walkthrough-summary/types';

interface WalkthroughSummaryFiltersProps {
  readonly summary: WalkthroughSummaryWorkflow;
}

export function WalkthroughSummaryFilters({ summary }: WalkthroughSummaryFiltersProps) {
  const selectTimeRange = (range: WalkthroughSummaryRange) => {
    summary.setTimeRange(range);
  };

  return (
    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
      <div className="flex items-center gap-3">
        <div className="relative">
          <select
            value={summary.selectedTeacher}
            onChange={(event) => summary.setSelectedTeacher(event.target.value)}
            className="appearance-none bg-slate-800/70 border border-slate-700/50 rounded-xl px-4 py-2 pr-8 text-sm text-white focus:outline-none focus:border-indigo-500/50"
          >
            <option value="all">All Teachers</option>
            {summary.teachers.map((teacher) => (
              <option key={teacher} value={teacher}>{teacher}</option>
            ))}
          </select>
          <ChevronDown size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-500 pointer-events-none" />
        </div>
        <div className="flex gap-1 bg-slate-800/50 rounded-xl border border-slate-700/50 p-0.5">
          {WALKTHROUGH_SUMMARY_RANGES.map((range) => (
            <button
              key={range}
              type="button"
              onClick={() => selectTimeRange(range)}
              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                summary.timeRange === range ? 'bg-indigo-500 text-white' : 'text-slate-400 hover:text-white'
              }`}
            >
              {range}d
            </button>
          ))}
        </div>
      </div>
      <div className="flex items-center gap-2">
        <button
          type="button"
          onClick={() => summary.setPresentationMode(true)}
          className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-800/50 text-slate-400 rounded-xl text-xs font-medium hover:text-white transition-colors border border-slate-700/50"
        >
          <Maximize2 size={12} /> Presentation
        </button>
        <button
          type="button"
          onClick={() => summary.setShowReport(true)}
          className="flex items-center gap-1.5 px-3 py-1.5 bg-indigo-500/20 text-indigo-400 rounded-xl text-xs font-medium hover:bg-indigo-500/30 transition-colors border border-indigo-500/30"
        >
          <FileText size={12} /> Generate Report
        </button>
      </div>
    </div>
  );
}
