'use client';

import {useState} from 'react';
import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
import {Icon} from '@astryxdesign/core/Icon';
import {Dialog} from '@astryxdesign/core/Dialog';
import {VStack, HStack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';
import {TextInput} from '@astryxdesign/core/TextInput';
import {Button} from '@astryxdesign/core/Button';
import {RANGE_LABELS, useWorkspace} from '@/shared/providers/WorkspaceProvider';
import type {RangeKey} from '@/shared/providers/WorkspaceProvider';

const ORDER: RangeKey[] = ['7d', '30d', '90d', 'mtd', 'ytd'];

/** Period scope for the charts and KPIs on the page that renders it. */
export function RangePicker() {
  const {range, setRange, customRange, setCustomRange} = useWorkspace();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [startDate, setStartDate] = useState(customRange?.start || '2026-08-01');
  const [endDate, setEndDate] = useState(customRange?.end || '2026-08-05');

  const getLabel = () => {
    if (range === 'custom' && customRange?.start && customRange?.end) {
      return `${customRange.start} – ${customRange.end}`;
    }
    return RANGE_LABELS[range] || 'Select period';
  };

  const handleApplyCustom = () => {
    setCustomRange({start: startDate, end: endDate});
    setRange('custom');
    setIsDialogOpen(false);
  };

  return (
    <>
      <DropdownMenu
        button={{
          variant: 'secondary',
          size: 'sm',
          label: getLabel(),
          icon: <Icon icon="calendar" size="sm" />,
        }}
        items={[
          ...ORDER.map((key) => ({
            label: RANGE_LABELS[key],
            onClick: () => setRange(key),
          })),
          {type: 'divider' as const},
          {
            label: 'Custom range...',
            onClick: () => setIsDialogOpen(true),
          },
        ]}
      />

      <Dialog
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        width={400}
        purpose="info"
      >
        <VStack gap={4} padding={4}>
          <VStack gap={1}>
            <Heading level={3}>Custom Date Range</Heading>
            <Text size="sm" color="secondary">
              Select start and end dates to query performance data.
            </Text>
          </VStack>

          <VStack gap={3}>
            <TextInput
              type="text"
              label="Start Date"
              value={startDate}
              onChange={setStartDate}
            />
            <TextInput
              type="text"
              label="End Date"
              value={endDate}
              onChange={setEndDate}
            />
          </VStack>

          <HStack hAlign="end" gap={2}>
            <Button
              variant="secondary"
              size="sm"
              label="Cancel"
              onClick={() => setIsDialogOpen(false)}
            />
            <Button
              variant="primary"
              size="sm"
              label="Apply Range"
              onClick={handleApplyCustom}
            />
          </HStack>
        </VStack>
      </Dialog>
    </>
  );
}

