import { useState } from 'react';
import { Dialog, DialogContent, DialogTitle, DialogDescription, Button, Field, Input } from '@platform-modules/ui-primitives';
import { MediaLibrary, type MediaItem } from '@platform-modules/uploads-react';
import { createHostMediaClient } from '../lib/media-client.js';

const client = createHostMediaClient();

export function MediaPickerDialog({ onSelect }: { onSelect: (item: MediaItem, alt: string) => void }) {
  const [open, setOpen] = useState(false);
  const [pending, setPending] = useState<MediaItem | null>(null);
  const [alt, setAlt] = useState('');

  function reset() {
    setPending(null);
    setAlt('');
  }

  return (
    <>
      <Button tone="surface" radius="sm" size="sm" type="button" onClick={() => setOpen(true)}>
        Insert media
      </Button>
      <Dialog
        open={open}
        onOpenChange={(next) => {
          setOpen(next);
          if (!next) reset();
        }}
      >
        <DialogContent>
          <DialogTitle>Insert media</DialogTitle>
          {pending === null ? (
            <>
              <DialogDescription>Choose an uploaded image to insert into the post body.</DialogDescription>
              <MediaLibrary client={client} onSelect={(item) => setPending(item)} />
            </>
          ) : (
            <>
              <DialogDescription>
                Describe the image for screen readers, then insert it. Leave the description empty only for a decorative image.
              </DialogDescription>
              <img
                src={pending.url}
                alt={alt}
                width={pending.width}
                height={pending.height}
                style={{ maxWidth: '100%', height: 'auto' }}
              />
              <Field label="Alt text" hint="A short description of the image.">
                <Input value={alt} onChange={(e) => setAlt(e.target.value)} />
              </Field>
              <Button tone="surface" radius="sm" size="sm" type="button" onClick={reset}>
                Choose a different image
              </Button>
              <Button
                tone="accent"
                radius="sm"
                size="sm"
                type="button"
                onClick={() => {
                  onSelect(pending, alt);
                  setOpen(false);
                  reset();
                }}
              >
                Insert image
              </Button>
            </>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
}