import type { Meta, StoryObj } from "@storybook/react"
import { Time } from "./Time"

// Define a fixed timestamp string to avoid rendering issues in Storybook
const TIMESTAMP = new Date()

/**
 * Displays formatted dates and times using the HTML time element.
 */
const meta = {
  title: "base/communication/Time",
  component: Time,
  tags: ["autodocs"],
  parameters: {
    layout: "centered",
  },
  argTypes: {
    dateTimeFormatStr: {
      control: "text",
      description: "Format string for the datetime attribute",
    },
    formatStr: {
      control: "text",
      description: "Format string for displaying the date",
    },
  },
  args: {
    // This is a placeholder for Storybook - the actual component will use new Date(TIMESTAMP)
    children: TIMESTAMP,
  },
} satisfies Meta<typeof Time>

export default meta

type Story = StoryObj<typeof meta>

/**
 * The default implementation of the Time component.
 */
export const Default: Story = {
  render: () => <Time>{new Date(TIMESTAMP)}</Time>,
}

/**
 * Shows the date with a short format.
 */
export const ShortFormat: Story = {
  render: () => {
    const date = new Date(TIMESTAMP)
    const format = "P"
    return <Time formatStr={format}>{date}</Time>
  },
}

/**
 * Shows the date with a long format including time.
 */
export const LongFormat: Story = {
  render: () => {
    const date = new Date(TIMESTAMP)
    const format = "PPPppp"
    return <Time formatStr={format}>{date}</Time>
  },
}

/**
 * Examples of different date format strings.
 */
export const DateFormats: Story = {
  args: {
    children: TIMESTAMP,
  },
  render: () => {
    const date = new Date(TIMESTAMP)

    return (
      <div className="flex flex-col gap-2">
        <div className="grid grid-cols-2 gap-4">
          <span className="text-sm font-medium">Format: "PP"</span>
          <Time formatStr="PP">{date}</Time>

          <span className="text-sm font-medium">Format: "PPP"</span>
          <Time formatStr="PPP">{date}</Time>

          <span className="text-sm font-medium">Format: "PPPP"</span>
          <Time formatStr="PPPP">{date}</Time>

          <span className="text-sm font-medium">Format: "p"</span>
          <Time formatStr="p">{date}</Time>

          <span className="text-sm font-medium">Format: "pp"</span>
          <Time formatStr="pp">{date}</Time>

          <span className="text-sm font-medium">Format: "dd MMM yyyy"</span>
          <Time formatStr="dd MMM yyyy">{date}</Time>

          <span className="text-sm font-medium">Format: "MM/dd/yyyy"</span>
          <Time formatStr="MM/dd/yyyy">{date}</Time>

          <span className="text-sm font-medium">Format: "yyyy-MM-dd"</span>
          <Time formatStr="yyyy-MM-dd">{date}</Time>
        </div>
      </div>
    )
  },
}

/**
 * Shows different timestamps with the same format.
 */
export const DifferentDates: Story = {
  args: {
    children: TIMESTAMP,
  },
  render: () => {
    const today = new Date(TIMESTAMP)
    const yesterday = new Date(today)
    yesterday.setDate(yesterday.getDate() - 1)

    const lastWeek = new Date(today)
    lastWeek.setDate(lastWeek.getDate() - 7)

    const lastMonth = new Date(today)
    lastMonth.setMonth(lastMonth.getMonth() - 1)

    const nextWeek = new Date(today)
    nextWeek.setDate(nextWeek.getDate() + 7)

    return (
      <div className="flex flex-col gap-2">
        <div className="grid grid-cols-2 gap-4">
          <span className="text-sm font-medium">Today</span>
          <Time>{today}</Time>

          <span className="text-sm font-medium">Yesterday</span>
          <Time>{yesterday}</Time>

          <span className="text-sm font-medium">Last Week</span>
          <Time>{lastWeek}</Time>

          <span className="text-sm font-medium">Last Month</span>
          <Time>{lastMonth}</Time>

          <span className="text-sm font-medium">Next Week</span>
          <Time>{nextWeek}</Time>
        </div>
      </div>
    )
  },
}

/**
 * Example showing Time components in a list context.
 */
export const InContext: Story = {
  args: {
    children: TIMESTAMP,
  },
  render: () => {
    const today = new Date(TIMESTAMP)
    const yesterday = new Date(today)
    yesterday.setDate(yesterday.getDate() - 1)

    const twoDaysAgo = new Date(today)
    twoDaysAgo.setDate(twoDaysAgo.getDate() - 2)

    return (
      <div className="w-[400px] border rounded-md overflow-hidden">
        <div className="p-3 bg-gray-50 border-b">
          <h3 className="text-lg font-medium">Recent Activity</h3>
        </div>
        <ul className="divide-y">
          <li className="p-3 flex justify-between items-center">
            <span>Document updated</span>
            <Time formatStr="PP p" className="text-sm text-gray-500">
              {today}
            </Time>
          </li>
          <li className="p-3 flex justify-between items-center">
            <span>Comment added</span>
            <Time formatStr="PP p" className="text-sm text-gray-500">
              {yesterday}
            </Time>
          </li>
          <li className="p-3 flex justify-between items-center">
            <span>Project created</span>
            <Time formatStr="PP p" className="text-sm text-gray-500">
              {twoDaysAgo}
            </Time>
          </li>
        </ul>
      </div>
    )
  },
}

/**
 * Example showing custom styling.
 */
export const CustomStyling: Story = {
  args: {
    children: TIMESTAMP,
  },
  render: () => {
    const today = new Date(TIMESTAMP)

    return (
      <div className="flex flex-col gap-4">
        <Time className="text-blue-600 font-bold">{today}</Time>
        <Time className="bg-gray-100 px-2 py-1 rounded text-sm">{today}</Time>
        <Time className="border-b-2 border-green-500 pb-1">{today}</Time>
        <Time className="italic text-gray-500">{today}</Time>
      </div>
    )
  },
}