"use client";

import { useEditorStore } from "@/features/editor/state/editorStore";
import type { CanvasPreset, ProjectConfig } from "@/features/editor/state/editorStore";
import { NumericPropertyControl } from "@/features/editor/components/NumericPropertyControl";
import { ColorPickerField, TEXT_COLOR_PALETTE } from "@/features/editor/components/ColorPickerField";
import { useAppLocale } from "@/features/i18n/LocaleProvider";
import { getEditorProjectPropertiesPanelMessages } from "@/features/i18n/messages/editorProjectPropertiesPanel";

export function ProjectPropertiesPanel() {
  const projectConfig = useEditorStore((state) => (state as any).projectConfig as ProjectConfig);
  const updateProjectConfig = useEditorStore(
    (state) => (state as any).updateProjectConfig as (partial: Partial<ProjectConfig>) => void,
  );

  const locale = useAppLocale();
  const m = getEditorProjectPropertiesPanelMessages(locale);

  const handleChangePreset = (preset: CanvasPreset) => {
    if (preset === "mobile") {
      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 390 });
    } else if (preset === "tablet") {
      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 768 });
    } else if (preset === "desktop") {
      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: 1200 });
    } else if (preset === "full") {
      updateProjectConfig({ canvasPreset: preset, canvasWidthPx: undefined });
    } else {
      updateProjectConfig({ canvasPreset: preset });
    }
  };

  const handleChangeCanvasWidth = (value: number) => {
    if (value === 390) {
      handleChangePreset("mobile");
    } else if (value === 768) {
      handleChangePreset("tablet");
    } else if (value === 1200) {
      handleChangePreset("desktop");
    } else {
      updateProjectConfig({ canvasPreset: "custom", canvasWidthPx: value });
    }
  };

  return (
    <div className="space-y-4 text-xs text-slate-900 dark:text-slate-200">
      <h3 className="text-sm font-medium text-slate-100">{m.sectionTitle}</h3>

      <div className="space-y-1">
        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.projectTitleLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.projectTitleAria}
            value={projectConfig.title}
            onChange={(e) => updateProjectConfig({ title: e.target.value })}
          />
        </label>
      </div>

      <div className="space-y-1">
        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.projectSlugLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.projectSlugAria}
            value={projectConfig.slug}
            onChange={(e) => updateProjectConfig({ slug: e.target.value })}
          />
        </label>
      </div>

      <div className="space-y-1">
        <NumericPropertyControl
          label={m.canvasWidthLabel}
          unitLabel={m.canvasWidthUnitLabel}
          value={projectConfig.canvasWidthPx ?? 1024}
          min={320}
          max={1920}
          step={10}
          presets={[
            { id: "mobile", label: m.canvasWidthPresetMobile, value: 390 },
            { id: "tablet", label: m.canvasWidthPresetTablet, value: 768 },
            { id: "desktop", label: m.canvasWidthPresetDesktop, value: 1200 },
          ]}
          onChangeValue={handleChangeCanvasWidth}
        />
      </div>

      <div className="space-y-1">
        <ColorPickerField
          label={m.canvasBgLabel}
          ariaLabelColorInput={m.canvasBgColorAria}
          ariaLabelHexInput={m.canvasBgHexAria}
          value={projectConfig.canvasBgColorHex ?? "#020617"}
          onChange={(hex) => updateProjectConfig({ canvasBgColorHex: hex })}
          palette={TEXT_COLOR_PALETTE}
        />
      </div>

      <div className="space-y-1">
        <ColorPickerField
          label={m.pageBgLabel}
          ariaLabelColorInput={m.pageBgColorAria}
          ariaLabelHexInput={m.pageBgHexAria}
          value={projectConfig.bodyBgColorHex ?? "#020617"}
          onChange={(hex) => updateProjectConfig({ bodyBgColorHex: hex })}
          palette={TEXT_COLOR_PALETTE}
        />
      </div>

      <div className="space-y-2 border-t border-slate-800 pt-3">
        <h4 className="text-[11px] font-semibold text-slate-800 dark:text-slate-200">{m.seoSectionTitle}</h4>

        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.seoTitleLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.seoTitleAria}
            placeholder={projectConfig.title || m.seoTitlePlaceholderFallback}
            value={projectConfig.seoTitle ?? ""}
            onChange={(e) => updateProjectConfig({ seoTitle: e.target.value })}
          />
        </label>

        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.seoDescriptionLabel}</span>
          <textarea
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-900 outline-none focus:border-sky-500 min-h-[56px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.seoDescriptionAria}
            placeholder={m.seoDescriptionPlaceholder}
            value={projectConfig.seoDescription ?? ""}
            onChange={(e) => updateProjectConfig({ seoDescription: e.target.value })}
          />
        </label>

        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.seoOgImageUrlLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.seoOgImageUrlAria}
            placeholder={m.seoOgImageUrlPlaceholder}
            value={projectConfig.seoOgImageUrl ?? ""}
            onChange={(e) => updateProjectConfig({ seoOgImageUrl: e.target.value })}
          />
        </label>

        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.seoCanonicalUrlLabel}</span>
          <input
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-xs text-slate-900 outline-none focus:border-sky-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.seoCanonicalUrlAria}
            placeholder={m.seoCanonicalUrlPlaceholder}
            value={projectConfig.seoCanonicalUrl ?? ""}
            onChange={(e) => updateProjectConfig({ seoCanonicalUrl: e.target.value })}
          />
        </label>

        <label className="flex items-center gap-2 text-[11px] text-slate-600 dark:text-slate-300">
          <input
            type="checkbox"
            className="h-3 w-3 rounded border-slate-300 bg-white text-sky-600 dark:border-slate-600 dark:bg-slate-900"
            aria-label={m.seoNoIndexAria}
            checked={Boolean(projectConfig.seoNoIndex)}
            onChange={(e) => updateProjectConfig({ seoNoIndex: e.target.checked })}
          />
          <span>{m.seoNoIndexLabel}</span>
        </label>
      </div>

      <div className="space-y-1">
        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.headHtmlLabel}</span>
          <textarea
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.headHtmlAria}
            value={projectConfig.headHtml ?? ""}
            onChange={(e) => updateProjectConfig({ headHtml: e.target.value })}
            placeholder={m.headHtmlPlaceholder}
          />
        </label>
      </div>

      <div className="space-y-1">
        <label className="flex flex-col gap-1">
          <span className="text-slate-500 dark:text-slate-400">{m.trackingScriptLabel}</span>
          <textarea
            className="w-full rounded border border-slate-300 bg-white px-2 py-1 text-[11px] font-mono text-slate-900 outline-none focus:border-sky-500 min-h-[72px] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
            aria-label={m.trackingScriptAria}
            value={projectConfig.trackingScript ?? ""}
            onChange={(e) => updateProjectConfig({ trackingScript: e.target.value })}
            placeholder={m.trackingScriptPlaceholder}
          />
        </label>
      </div>
    </div>
  );
}
