import { Form } from "pettyui/form";
import { DatePicker } from "pettyui/date-picker";
import { Calendar } from "pettyui/calendar";
import { ComponentDemo } from "../component-demo";

/** Form demo with validation and error display. */
function FormDemo() {
  const content = (
    <Form
      onSubmit={(data) => { alert(`Submitted: ${JSON.stringify(data)}`); }}
      class="flex flex-col gap-4 max-w-sm"
    >
      <Form.Field name="name" class="flex flex-col gap-1">
        <Form.Label class="text-sm font-medium text-gray-700">Name</Form.Label>
        <Form.Control>
          {(ariaProps) => (
            <input {...ariaProps} type="text" placeholder="Your name" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          )}
        </Form.Control>
        <Form.Description class="text-xs text-gray-400">Required field</Form.Description>
        <Form.ErrorMessage class="text-xs text-red-500" />
      </Form.Field>
      <Form.Field name="email" class="flex flex-col gap-1">
        <Form.Label class="text-sm font-medium text-gray-700">Email</Form.Label>
        <Form.Control>
          {(ariaProps) => (
            <input {...ariaProps} type="email" placeholder="you@example.com" class="border border-gray-300 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
          )}
        </Form.Control>
        <Form.ErrorMessage class="text-xs text-red-500" />
      </Form.Field>
      <Form.Submit class="px-4 py-2 text-sm font-medium rounded bg-indigo-600 text-white hover:bg-indigo-700 self-start">Submit</Form.Submit>
    </Form>
  );
  return content;
}

/** DatePicker demo with calendar dropdown. */
function DatePickerDemo() {
  const content = (
    <DatePicker class="relative w-48">
      <div class="flex items-center border border-gray-300 rounded">
        <DatePicker.Input placeholder="Pick a date" class="w-full px-3 py-1.5 text-sm rounded focus:outline-none" />
        <DatePicker.Trigger class="px-2 text-gray-400 hover:text-gray-600">📅</DatePicker.Trigger>
      </div>
      <DatePicker.Content class="absolute top-full mt-1 border border-gray-200 rounded bg-white shadow-lg z-10 p-2">
        <Calendar class="w-64">
          <Calendar.Header class="flex items-center justify-between mb-2">
            <Calendar.PrevButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm">‹</Calendar.PrevButton>
            <Calendar.Heading class="text-sm font-semibold text-gray-800" />
            <Calendar.NextButton class="w-7 h-7 flex items-center justify-center rounded hover:bg-gray-100 text-gray-600 text-sm">›</Calendar.NextButton>
          </Calendar.Header>
          <Calendar.Grid class="w-full border-collapse">
            <Calendar.GridHead class="[&_th]:text-xs [&_th]:text-gray-400 [&_th]:font-medium [&_th]:pb-1 [&_th]:text-center" />
            <Calendar.GridBody class="[&_td]:text-center [&_td]:p-0.5 [&_td]:text-sm [&_td]:rounded [&_td]:cursor-pointer [&_td:hover]:bg-indigo-50 [&_td[data-selected]]:bg-indigo-600 [&_td[data-selected]]:text-white [&_td[data-today]]:font-bold [&_td[data-outside-month]]:text-gray-300" />
          </Calendar.Grid>
        </Calendar>
      </DatePicker.Content>
    </DatePicker>
  );
  return content;
}

/** Inputs Advanced section with complex input components. */
export function InputsAdvancedSection() {
  const content = (
    <>
      <ComponentDemo name="Form" description="Form with Zod v4 schema validation, field-level error display, and accessible aria linking">
        <FormDemo />
      </ComponentDemo>
      <ComponentDemo name="DatePicker" description="Date input with dropdown calendar for selecting dates">
        <DatePickerDemo />
      </ComponentDemo>
    </>
  );
  return content;
}
