'use client';

/**
 * PageSettingsDrawer — side drawer for editing per-page SEO metadata.
 *
 * Note: page_metadata column has been dropped. saveMetadata is a no-op on the backend.
 * The drawer is kept as UI scaffolding for future re-wiring to a live store.
 *
 * Uses the shared Drawer, FormField, Input, Button primitives.
 * All strings through useT. Token-only styling. RTL logical properties.
 */

import { useState } from 'react';
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerFooter,
  DrawerClose,
} from '@/components/ui/overlays/Drawer';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { FormField } from '@/components/ui/primitives/FormField';
import { Pill } from '@/components/ui/primitives/Pill';
import { saveMetadata, type PageMetadata } from './api';
import { useT } from '@/lib/i18n/react';
import { captureCaught } from '@/lib/observability';

export interface PageSettingsDrawerProps {
  page: string;
  open: boolean;
  onClose: () => void;
}

const emptySeo = { title: { he: '', en: '' }, description: { he: '', en: '' }, ogImage: '' };

export function PageSettingsDrawer({ page, open, onClose }: PageSettingsDrawerProps) {
  const t = useT('page_organizer');
  const tCommon = useT('common');

  const [seo, setSeo] = useState(emptySeo);
  const [status, setStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');

  function update(patch: Partial<typeof seo>) {
    setSeo((s) => ({ ...s, ...patch }));
  }

  async function handleSave() {
    setStatus('saving');
    try {
      const meta: PageMetadata = {
        seo: {
          title: seo.title,
          description: seo.description,
          ogImage: seo.ogImage || undefined,
        },
      };
      await saveMetadata(page, meta);
      setStatus('saved');
      setTimeout(() => setStatus('idle'), 2000);
    } catch (err) {
      captureCaught(err, {
        scope: 'features.admin-page-organizer.PageSettingsDrawer',
        severity: 'warning',
      });
      setStatus('error');
    }
  }

  return (
    <Drawer
      open={open}
      onOpenChange={(o) => {
        if (!o) onClose();
      }}
    >
      <DrawerContent side="end">
        <DrawerHeader>
          <DrawerClose aria-label={tCommon('close')} />
          <DrawerTitle>{t('page_settings')}</DrawerTitle>
        </DrawerHeader>

        <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-6 py-4">
          {/* SEO Title */}
          <FormField label={t('seo_title_he')} htmlFor="seo-title-he">
            <Input
              id="seo-title-he"
              value={seo.title.he}
              onChange={(e) => update({ title: { ...seo.title, he: e.target.value } })}
              dir="rtl"
            />
          </FormField>

          <FormField label={t('seo_title_en')} htmlFor="seo-title-en">
            <Input
              id="seo-title-en"
              value={seo.title.en}
              onChange={(e) => update({ title: { ...seo.title, en: e.target.value } })}
              dir="ltr"
            />
          </FormField>

          {/* SEO Description */}
          <FormField label={t('seo_description_he')} htmlFor="seo-desc-he">
            <Input
              id="seo-desc-he"
              value={seo.description.he}
              onChange={(e) => update({ description: { ...seo.description, he: e.target.value } })}
              dir="rtl"
            />
          </FormField>

          <FormField label={t('seo_description_en')} htmlFor="seo-desc-en">
            <Input
              id="seo-desc-en"
              value={seo.description.en}
              onChange={(e) => update({ description: { ...seo.description, en: e.target.value } })}
              dir="ltr"
            />
          </FormField>

          {/* OG Image URL */}
          <FormField label={t('seo_og_image')} htmlFor="seo-og-image">
            <Input
              id="seo-og-image"
              value={seo.ogImage ?? ''}
              onChange={(e) => update({ ogImage: e.target.value })}
              dir="ltr"
              type="url"
            />
          </FormField>
        </div>

        <DrawerFooter>
          <div className="flex items-center gap-3">
            {status === 'saved' && (
              <Pill tone="success" size="sm" aria-live="polite" aria-atomic="true">
                {t('page_settings_saved')}
              </Pill>
            )}
            {status === 'error' && (
              <Pill tone="danger" size="sm" aria-live="polite" aria-atomic="true">
                {tCommon('error')}
              </Pill>
            )}
            <Button
              variant="primary"
              onClick={() => void handleSave()}
              disabled={status === 'saving'}
            >
              {status === 'saving' ? t('draft_saving') : tCommon('save')}
            </Button>
          </div>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}