'use client';

import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/overlays/Dialog';
import { RichTextEditor } from '@/components/ui/primitives/RichTextEditor/RichTextEditor';
import { Button } from '@/components/ui/primitives/Button';
import { Tabs } from '@/components/ui/layout/Tabs';
import { useOrganizer } from './state';
import { useT } from '@/lib/i18n/react';
import type { Config } from '@/server/page-layout/modules/rich-text-content/config';

export function RichTextEditDialog() {
  const richTextEdit = useOrganizer((s) => s.richTextEdit);
  const setRichTextEdit = useOrganizer((s) => s.setRichTextEdit);
  const body = useOrganizer((s) => s.body);
  const updateConfig = useOrganizer((s) => s.updateConfig);
  const t = useT('page_organizer');

  const inst = richTextEdit
    ? (body.mobile.find((m) => m.instanceId === richTextEdit.instanceId) ??
      body.desktop.find((m) => m.instanceId === richTextEdit.instanceId))
    : undefined;

  const config = inst?.config as Config | undefined;

  function handleClose() {
    setRichTextEdit(null);
  }

  return (
    <Dialog open={Boolean(richTextEdit)} onOpenChange={(open) => !open && handleClose()}>
      <DialogContent className="flex max-h-[min(90dvh,700px)] w-full max-w-2xl flex-col gap-0 p-0">
        {/* Header — always visible */}
        <DialogHeader className="border-border shrink-0 border-b px-6 py-4">
          <DialogTitle>{t('rich_text_dialog_title')}</DialogTitle>
        </DialogHeader>

        {config && inst && (
          <RichTextEditorBody
            key={inst.instanceId}
            config={config}
            instanceId={inst.instanceId}
            onClose={handleClose}
            onSave={(updated) => {
              updateConfig(inst.instanceId, { ...config, body: { ...config.body, ...updated } });
              handleClose();
            }}
          />
        )}
      </DialogContent>
    </Dialog>
  );
}

type BodyProps = {
  config: Config;
  instanceId: string;
  onClose: () => void;
  onSave: (draft: { he: string; en: string }) => void;
};

function RichTextEditorBody({ config, onClose, onSave }: BodyProps) {
  const t = useT('page_organizer');
  const [tab, setTab] = useState<'he' | 'en'>('he');
  const [draft, setDraft] = useState<{ he: string; en: string }>({
    he: config.body.he,
    en: config.body.en,
  });

  return (
    <>
      <Tabs
        className="flex min-h-0 flex-1 flex-col"
        listClassName="border-border shrink-0 border-b px-6 py-2"
        panelClassName="min-h-0 flex-1 overflow-y-auto px-6 py-4"
        items={[
          { value: 'he', label: t('lang_he') },
          { value: 'en', label: t('lang_en') },
        ]}
        value={tab}
        onValueChange={(value) => setTab(value as 'he' | 'en')}
        ariaLabel={t('rich_text_lang_tabs')}
        panels={{
          he: (
            <RichTextEditor
              value={draft.he}
              onChange={(html) => setDraft((d) => ({ ...d, he: html }))}
              dir="rtl"
              aria-label={t('rich_text_he')}
            />
          ),
          en: (
            <RichTextEditor
              value={draft.en}
              onChange={(html) => setDraft((d) => ({ ...d, en: html }))}
              dir="ltr"
              aria-label={t('rich_text_en')}
            />
          ),
        }}
      />

      {/* Footer — always visible */}
      <div className="border-border flex shrink-0 justify-end gap-2 border-t px-6 py-4">
        <Button type="button" variant="ghost" size="sm" onClick={onClose}>
          {t('rich_text_dialog_close')}
        </Button>
        <Button type="button" variant="primary" size="sm" onClick={() => onSave(draft)}>
          {t('rich_text_dialog_save')}
        </Button>
      </div>
    </>
  );
}