'use client';

import type { ReactNode } from 'react';
import { Button } from '@/components/ui/primitives/Button';
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
} from '@/components/ui/overlays/Drawer';
import { useT } from '@/lib/i18n/react';

export interface InstallSheetProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onInstall: () => void;
  onDismiss: () => void;
  preview?: boolean;
  previewAction?: ReactNode;
}

function InstallSheetBody({
  onInstall,
  onDismiss,
  previewAction,
  preview = false,
}: Pick<InstallSheetProps, 'onInstall' | 'onDismiss' | 'previewAction'> & { preview?: boolean }) {
  const t = useT('pwa_install');

  return (
    <>
      {preview ? (
        <div className="px-4 pt-4">
          <h3 className="text-text-primary text-lg font-semibold">{t('title')}</h3>
          <p className="text-text-secondary mt-1 text-sm">{t('description')}</p>
        </div>
      ) : (
        <DrawerHeader>
          <DrawerTitle>{t('title')}</DrawerTitle>
          <DrawerDescription>{t('description')}</DrawerDescription>
        </DrawerHeader>
      )}
      <div className="px-4 pb-4">
        <div className="bg-surface-raised rounded-xl border border-border-subtle p-4">
          <p className="text-text-primary text-sm font-medium">{t('benefit_fast_access')}</p>
          <p className="text-text-secondary mt-1 text-sm">{t('benefit_offline')}</p>
        </div>
      </div>
      <DrawerFooter>
        {previewAction}
        <Button variant="primary" size="md" onClick={onInstall}>
          {t('install')}
        </Button>
        <Button variant="ghost" size="md" onClick={onDismiss}>
          {t('dismiss')}
        </Button>
      </DrawerFooter>
    </>
  );
}

export function InstallSheet({
  open,
  onOpenChange,
  onInstall,
  onDismiss,
  preview = false,
  previewAction,
}: InstallSheetProps) {
  if (preview) {
    return (
      <div className="bg-surface-base max-w-md rounded-2xl border border-border-default shadow-md">
        <InstallSheetBody
          onInstall={onInstall}
          onDismiss={onDismiss}
          previewAction={previewAction}
          preview={true}
        />
      </div>
    );
  }

  return (
    <Drawer open={open} onOpenChange={onOpenChange}>
      <DrawerContent side="bottom">
        <InstallSheetBody onInstall={onInstall} onDismiss={onDismiss} />
      </DrawerContent>
    </Drawer>
  );
}