"use client";

import { useSignatureConfig } from "../hooks/use-signature-config";
import { useSavedSignatures } from "../hooks/use-saved-signatures";
import { SignatureConfigurator } from "./signature-configurator";
import { SignaturePreview } from "./signature-preview";
import { SavedSignaturesPanel } from "./saved-signatures-panel";
import { Separator } from "@/shared/components/ui/separator";
import { Button } from "@/shared/components/ui/button";
import { RotateCcw } from "lucide-react";
import type { SignatureBanner } from "../types";

export function EmailSignatureModule() {
  const {
    config,
    updateField,
    updateColor,
    updateLayout,
    setVariant,
    setCompany,
    setAddress,
    resetToDefaults,
    loadConfig,
  } = useSignatureConfig();

  const { saved, loading, save, remove } = useSavedSignatures();

  const setBanner = (banner: SignatureBanner | undefined) => {
    updateField("banner", banner);
  };

  return (
    <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
      {/* Left panel — configurator */}
      <div className="space-y-6 overflow-y-auto lg:max-h-[calc(100vh-10rem)] lg:pr-2">
        <SignatureConfigurator
          config={config}
          onUpdateField={updateField}
          onUpdateColor={updateColor}
          onUpdateLayout={updateLayout}
          onSetVariant={setVariant}
          onSetCompany={setCompany}
          onSetAddress={setAddress}
          onSetBanner={setBanner}
        />

        <Separator />

        <SavedSignaturesPanel
          saved={saved}
          loading={loading}
          onSave={async (label, cfg) => {
            await save(label, cfg);
          }}
          onLoad={loadConfig}
          onRemove={remove}
          currentConfig={config}
        />

        <Separator />

        <Button
          variant="outline"
          size="sm"
          onClick={resetToDefaults}
          className="w-full"
        >
          <RotateCcw className="mr-1.5 h-3.5 w-3.5" />
          Resetare la valorile implicite
        </Button>
      </div>

      {/* Right panel — preview (scrollable, resizable) */}
      <div>
        <SignaturePreview config={config} />
      </div>
    </div>
  );
}
