import type { ReactNode } from 'react';
import {
  Checkbox,
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  Input,
} from 'cloudrite';

// Cloudrite is dark-only — foreground-coloured text and `border-border` are
// invisible on the preview harness's white card body. Stories render on the
// brand surface, which is also how a real screen is built.
const Surface = ({ children }: { children: ReactNode }) => (
  <div className="bg-background text-foreground rounded-lg p-6">{children}</div>
);

export const Vertical = () => (
  <Surface>
    <FieldGroup className="w-80">
      <Field>
        <FieldLabel htmlFor="domain">Domain</FieldLabel>
        <Input id="domain" defaultValue="cloudrite.co.nz" />
        <FieldDescription>We'll point the DNS for you at no charge.</FieldDescription>
      </Field>
    </FieldGroup>
  </Surface>
);

export const Horizontal = () => (
  <Surface>
    <FieldGroup className="w-96">
      <Field orientation="horizontal">
        <Checkbox id="tos" defaultChecked />
        <FieldContent>
          <FieldLabel htmlFor="tos">Managed backups</FieldLabel>
          <FieldDescription>Nightly snapshots kept for 30 days.</FieldDescription>
        </FieldContent>
      </Field>
    </FieldGroup>
  </Surface>
);

export const WithError = () => (
  <Surface>
    <FieldGroup className="w-80">
      <Field data-invalid>
        <FieldLabel htmlFor="email">Email</FieldLabel>
        <Input id="email" defaultValue="not-an-email" aria-invalid />
        <FieldError>Enter a valid email address.</FieldError>
      </Field>
    </FieldGroup>
  </Surface>
);

export const Fieldset = () => (
  <Surface>
    <FieldSet className="w-96">
      <FieldLegend>Hosting</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="plan-name">Plan name</FieldLabel>
          <Input id="plan-name" defaultValue="Business" />
        </Field>
        <FieldSeparator />
        <Field>
          <FieldLabel htmlFor="sites">Site limit</FieldLabel>
          <Input id="sites" type="number" defaultValue={10} />
        </Field>
      </FieldGroup>
    </FieldSet>
  </Surface>
);