import * as React from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';

import { DatePicker, DateRangePicker } from './date-picker';
import { Label } from '../label/label';

const meta = {
  title: 'Components/DatePicker',
  component: DatePicker,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Date, month or year picker. A calendar is more than a grid: keyboard navigation across month boundaries, locale-aware week starts, disabled ranges, and text entry that has to parse as loosely as people type. All of it is local to the kit and built on `Date` + `Intl`, so values are plain `Date` objects in local time and no date library reaches the consumer.',
      },
    },
  },
  tags: ['autodocs'],
  decorators: [(Story) => <div className="w-72"><Story /></div>],
} satisfies Meta<typeof DatePicker>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: { placeholder: 'Select a date' },
};

export const Controlled: Story = {
  render: function ControlledStory() {
    const [value, setValue] = React.useState<Date | null>(new Date());

    return (
      <div className="grid gap-2">
        <Label>Start date</Label>
        <DatePicker value={value} onChange={setValue} />
        <p className="text-xs text-muted-foreground">
          {value ? value.toDateString() : 'Nothing selected'}
        </p>
      </div>
    );
  },
};

/** `picker` switches the panel; give it a matching `format` for the input. */
export const Granularity: Story = {
  render: () => (
    <div className="grid gap-3">
      <DatePicker placeholder="Day" />
      <DatePicker picker="month" format="MMMM yyyy" placeholder="Month" />
      <DatePicker picker="year" format="yyyy" placeholder="Year" />
    </div>
  ),
};

/** `locale` drives month names, weekday names and where the week starts. */
export const Localised: Story = {
  render: () => (
    <div className="grid gap-3">
      <DatePicker locale="en-US" placeholder="en-US" />
      <DatePicker locale="de-DE" format="dd.MM.yyyy" placeholder="de-DE" />
      <DatePicker locale="az-AZ" format="dd.MM.yyyy" placeholder="az-AZ" />
    </div>
  ),
};

/** Past dates are rejected — useful for scheduling. */
export const DisabledPastDates: Story = {
  args: {
    placeholder: 'Pick a future date',
    disabledDate: (current: Date) => current < new Date(new Date().setHours(0, 0, 0, 0)),
  },
};

export const Disabled: Story = {
  args: { disabled: true, value: new Date() },
};

export const Range: Story = {
  render: function RangeStory() {
    const [range, setRange] = React.useState<[Date | null, Date | null] | null>(null);

    return (
      <div className="grid w-96 gap-2">
        <Label>Reporting period</Label>
        <DateRangePicker value={range} onChange={setRange} />
        <p className="text-xs text-muted-foreground">
          {range?.[0] && range?.[1]
            ? `${range[0].toDateString()} → ${range[1].toDateString()}`
            : 'No range selected'}
        </p>
      </div>
    );
  },
};