'use client';

import {HStack} from '@astryxdesign/core/Layout';
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';
import {DownloadDropdown} from '@/shared/components/patterns/DownloadDropdown';
import {ICONS} from '@/shared/utils/icons';
import type {CommerceFilterState} from '../../types/commerce';

export function CommerceFilterToolbar({
  filters,
  onFilterChange,
  onExport,
  onCompare,
}: {
  filters: CommerceFilterState;
  onFilterChange: (f: CommerceFilterState) => void;
  onExport: (format: 'pdf' | 'excel' | 'csv') => void;
  onCompare?: () => void;
}) {
  return (
    <HStack gap={2} vAlign="center" className="flex-wrap">
      {/* Date Range Selector */}
      <div className="flex items-center rounded-lg border border-border bg-card p-0.5 text-xs font-semibold">
        {(['today', '7d', '30d', '90d'] as const).map((r) => (
          <button
            key={r}
            type="button"
            onClick={() => onFilterChange({...filters, dateRange: r})}
            className={`px-2.5 py-1 rounded-md transition-colors capitalize ${
              filters.dateRange === r
                ? 'bg-zinc-800 text-white font-bold'
                : 'text-zinc-400 hover:text-white'
            }`}
          >
            {r === 'today' ? 'Today' : r === '7d' ? '7 Days' : r === '30d' ? '30 Days' : '90 Days'}
          </button>
        ))}
      </div>

      {/* Store Filter */}
      <select
        value={filters.storeId}
        onChange={(e) => onFilterChange({...filters, storeId: e.target.value})}
        className="h-8 rounded-lg border border-border bg-card px-2.5 text-xs font-semibold text-white outline-none focus:border-zinc-500"
      >
        <option value="all">All Active Stores</option>
        <option value="indiranagar">Indiranagar Flagship</option>
        <option value="koramangala">Koramangala 80ft</option>
        <option value="jayanagar">Jayanagar 4th Block</option>
        <option value="whitefield">Whitefield Main</option>
      </select>

      {/* Compare Button */}
      {onCompare ? (
        <Button
          size="sm"
          variant="secondary"
          label="Compare"
          icon={<Icon icon={ICONS.compare} size="sm" />}
          onClick={onCompare}
        />
      ) : null}

      {/* Export Dropdown */}
      <DownloadDropdown
        filename={`Commerce_Report_${new Date().toISOString().slice(0, 10)}`}
        title="Loyaly Commerce Performance Report"
        subtitle="Sales, revenue and order analytics"
        columns={[
          {key: 'metric', header: 'Metric Name'},
          {key: 'value', header: 'Value'},
        ]}
        data={[
          {metric: "Today's Revenue", value: '₹3,40,000'},
          {metric: 'Total Orders', value: '1,284'},
          {metric: 'Average Order Value', value: '₹1,420'},
        ]}
      />
    </HStack>
  );
}
