"use client";

import type { CompanyId } from "@/core/auth/types";
import type {
  SignatureConfig,
  SignatureColors,
  SignatureLayout,
  SignatureVariant,
  SignatureBanner,
} from "../types";
import {
  COMPANY_BRANDING,
  BELETAGE_ADDRESSES,
  US_ADDRESSES,
  SDT_ADDRESSES,
} from "../services/company-branding";
import type { AddressKey } from "../services/company-branding";
import { useAuth } from "@/core/auth";
import { Input } from "@/shared/components/ui/input";
import { Label } from "@/shared/components/ui/label";
import { Switch } from "@/shared/components/ui/switch";
import { Button } from "@/shared/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/ui/select";
import { Separator } from "@/shared/components/ui/separator";
import { cn } from "@/shared/lib/utils";
import { UserCheck, ImagePlus, Trash2 } from "lucide-react";

interface SignatureConfiguratorProps {
  config: SignatureConfig;
  onUpdateField: <K extends keyof SignatureConfig>(
    key: K,
    value: SignatureConfig[K],
  ) => void;
  onUpdateColor: (key: keyof SignatureColors, value: string) => void;
  onUpdateLayout: (key: keyof SignatureLayout, value: number) => void;
  onSetVariant: (variant: SignatureVariant) => void;
  onSetCompany: (company: CompanyId) => void;
  onSetAddress?: (address: string[]) => void;
  onSetBanner?: (banner: SignatureBanner | undefined) => void;
}

/** Color palette per company */
const COMPANY_PALETTES: Record<CompanyId, Record<string, string>> = {
  beletage: {
    verde: "#22B5AB",
    griInchis: "#54504F",
    griDeschis: "#A7A9AA",
    negru: "#323232",
  },
  "urban-switch": {
    albastru: "#345476",
    griInchis: "#2D2D2D",
    griDeschis: "#6B7280",
    negru: "#1F2937",
  },
  "studii-de-teren": {
    teal: "#0182A1",
    bleumarin: "#000D1A",
    griInchis: "#2D2D2D",
    griDeschis: "#6B7280",
    negru: "#1F2937",
  },
  group: {
    gri: "#64748b",
    griInchis: "#334155",
    griDeschis: "#94a3b8",
    negru: "#1e293b",
  },
};

const COLOR_LABELS: Record<keyof SignatureColors, string> = {
  prefix: "Titulatură",
  name: "Nume",
  title: "Funcție",
  address: "Adresă",
  phone: "Telefon",
  website: "Website",
  motto: "Motto",
};

const LAYOUT_CONTROLS: {
  key: keyof SignatureLayout;
  label: string;
  min: number;
  max: number;
}[] = [
  { key: "greenLineWidth", label: "Lungime linie accent", min: 50, max: 300 },
  { key: "sectionSpacing", label: "Spațiere secțiuni", min: 0, max: 30 },
  { key: "logoSpacing", label: "Spațiere logo", min: 0, max: 30 },
  { key: "titleSpacing", label: "Spațiere funcție", min: 0, max: 20 },
  { key: "gutterWidth", label: "Aliniere contact", min: 0, max: 150 },
  { key: "iconTextSpacing", label: "Spațiu icon-text", min: -10, max: 30 },
  {
    key: "iconVerticalOffset",
    label: "Aliniere verticală iconițe",
    min: -10,
    max: 10,
  },
  { key: "mottoSpacing", label: "Spațiere motto", min: 0, max: 20 },
];

export function SignatureConfigurator({
  config,
  onUpdateField,
  onUpdateColor,
  onUpdateLayout,
  onSetVariant,
  onSetCompany,
  onSetAddress,
  onSetBanner,
}: SignatureConfiguratorProps) {
  const palette = COMPANY_PALETTES[config.company];
  const { user } = useAuth();

  return (
    <div className="space-y-6">
      {/* Company selector */}
      <div>
        <Label>Companie</Label>
        <Select
          value={config.company}
          onValueChange={(v) => onSetCompany(v as CompanyId)}
        >
          <SelectTrigger className="mt-1">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {Object.values(COMPANY_BRANDING).map((b) => (
              <SelectItem key={b.id} value={b.id}>
                {b.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {/* Address selector (for Beletage) */}
      {config.company === "beletage" && onSetAddress && (
        <div>
          <Label>Adresă birou</Label>
          <Select
            value={
              !config.addressOverride
                ? "christescu"
                : config.addressOverride.join("|") ===
                    BELETAGE_ADDRESSES.unirii.join("|")
                  ? "unirii"
                  : config.addressOverride.join("|") ===
                      BELETAGE_ADDRESSES.albac.join("|")
                    ? "albac"
                    : "christescu"
            }
            onValueChange={(v) => {
              const key = v as AddressKey;
              onSetAddress(BELETAGE_ADDRESSES[key]);
            }}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="christescu">
                Str. G-ral Constantin Christescu, nr. 12
              </SelectItem>
              <SelectItem value="unirii">
                Str. Unirii, nr. 3, sc. 3 ap. 26
              </SelectItem>
              <SelectItem value="albac">Str. Albac, nr. 2, ap. 1</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}

      {/* Address selector (for Urban Switch) */}
      {config.company === "urban-switch" && onSetAddress && (
        <div>
          <Label>Adresă birou</Label>
          <Select
            value={
              !config.addressOverride
                ? "christescu"
                : config.addressOverride.join("|") ===
                    US_ADDRESSES.unirii.join("|")
                  ? "unirii"
                  : config.addressOverride.join("|") ===
                      US_ADDRESSES.albac.join("|")
                    ? "albac"
                    : "christescu"
            }
            onValueChange={(v) => {
              const key = v as AddressKey;
              onSetAddress(US_ADDRESSES[key]);
            }}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="christescu">
                Str. G-ral Constantin Christescu, nr. 12
              </SelectItem>
              <SelectItem value="unirii">
                Str. Unirii, nr. 3, sc. 3 ap. 26
              </SelectItem>
              <SelectItem value="albac">Str. Albac, nr. 2, ap. 1</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}

      {/* Address selector (for Studii de Teren) */}
      {config.company === "studii-de-teren" && onSetAddress && (
        <div>
          <Label>Adresă birou</Label>
          <Select
            value={
              !config.addressOverride
                ? "christescu"
                : config.addressOverride.join("|") ===
                    SDT_ADDRESSES.unirii.join("|")
                  ? "unirii"
                  : config.addressOverride.join("|") ===
                      SDT_ADDRESSES.albac.join("|")
                    ? "albac"
                    : "christescu"
            }
            onValueChange={(v) => {
              const key = v as AddressKey;
              onSetAddress(SDT_ADDRESSES[key]);
            }}
          >
            <SelectTrigger className="mt-1">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="christescu">
                Str. G-ral Constantin Christescu, nr. 12
              </SelectItem>
              <SelectItem value="unirii">
                Str. Unirii, nr. 3, sc. 3 ap. 26
              </SelectItem>
              <SelectItem value="albac">Str. Albac, nr. 2, ap. 1</SelectItem>
            </SelectContent>
          </Select>
        </div>
      )}

      <Separator />

      {/* Personal data */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold">Date personale</h3>
          {user && user.name && (
            <Button
              variant="outline"
              size="sm"
              className="h-7 text-xs"
              onClick={() => {
                onUpdateField("name", user.name);
                if (user.company && user.company !== "group") {
                  onSetCompany(user.company);
                }
              }}
            >
              <UserCheck className="mr-1 h-3 w-3" />
              Din cont
            </Button>
          )}
        </div>
        <div>
          <Label htmlFor="sig-prefix">Titulatură (prefix)</Label>
          <Input
            id="sig-prefix"
            value={config.prefix}
            onChange={(e) => onUpdateField("prefix", e.target.value)}
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="sig-name">Nume și Prenume</Label>
          <Input
            id="sig-name"
            value={config.name}
            onChange={(e) => onUpdateField("name", e.target.value)}
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="sig-title">Funcția</Label>
          <Input
            id="sig-title"
            value={config.title}
            onChange={(e) => onUpdateField("title", e.target.value)}
            className="mt-1"
          />
        </div>
        <div>
          <Label htmlFor="sig-phone">Telefon (format 07xxxxxxxx)</Label>
          <Input
            id="sig-phone"
            type="tel"
            value={config.phone}
            onChange={(e) => onUpdateField("phone", e.target.value)}
            className="mt-1"
          />
        </div>
      </div>

      <Separator />

      {/* Variant */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold">Variantă</h3>
        <Select
          value={config.variant}
          onValueChange={(v) => onSetVariant(v as SignatureVariant)}
        >
          <SelectTrigger>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="full">
              Completă (logo + adresă + motto)
            </SelectItem>
            <SelectItem value="reply">Simplă (fără logo/adresă)</SelectItem>
            <SelectItem value="minimal">
              Super-simplă (doar nume/telefon)
            </SelectItem>
          </SelectContent>
        </Select>
        <div className="flex items-center gap-2">
          <Switch
            checked={config.useSvg}
            onCheckedChange={(v) => onUpdateField("useSvg", v)}
            id="svg-toggle"
          />
          <Label htmlFor="svg-toggle" className="cursor-pointer text-sm">
            Imagini SVG (calitate maximă)
          </Label>
        </div>
      </div>

      <Separator />

      {/* Colors — company-specific palette */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold">Culori text</h3>
        {(Object.keys(COLOR_LABELS) as (keyof SignatureColors)[]).map(
          (colorKey) => (
            <div key={colorKey} className="flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
                {COLOR_LABELS[colorKey]}
              </span>
              <div className="flex gap-1.5">
                {Object.values(palette).map((color) => (
                  <button
                    key={color}
                    type="button"
                    onClick={() => onUpdateColor(colorKey, color)}
                    className={cn(
                      "h-6 w-6 rounded-full border-2 transition-all",
                      config.colors[colorKey] === color
                        ? "border-primary scale-110 ring-2 ring-primary/30"
                        : "border-transparent hover:scale-105",
                    )}
                    style={{ backgroundColor: color }}
                  />
                ))}
              </div>
            </div>
          ),
        )}
      </div>

      <Separator />

      {/* Layout sliders */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold">Stil & Aranjare</h3>

        {/* Logo scale slider */}
        <div>
          <div className="flex justify-between text-sm">
            <Label>Dimensiune logo</Label>
            <span className="text-muted-foreground">
              {Math.round((config.layout.logoScale ?? 1) * 100)}%
            </span>
          </div>
          <input
            type="range"
            min={50}
            max={200}
            step={5}
            value={Math.round((config.layout.logoScale ?? 1) * 100)}
            onChange={(e) =>
              onUpdateLayout("logoScale", parseInt(e.target.value, 10) / 100)
            }
            className="mt-1 w-full accent-primary"
          />
        </div>

        {LAYOUT_CONTROLS.map(({ key, label, min, max }) => (
          <div key={key}>
            <div className="flex justify-between text-sm">
              <Label>{label}</Label>
              <span className="text-muted-foreground">
                {config.layout[key]}px
              </span>
            </div>
            <input
              type="range"
              min={min}
              max={max}
              value={config.layout[key]}
              onChange={(e) =>
                onUpdateLayout(key, parseInt(e.target.value, 10))
              }
              className="mt-1 w-full accent-primary"
            />
          </div>
        ))}
      </div>

      <Separator />

      {/* Promotional banner */}
      {onSetBanner && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <h3 className="text-sm font-semibold">Banner promoțional</h3>
            {config.banner ? (
              <Button
                variant="ghost"
                size="sm"
                className="h-7 text-xs text-destructive hover:text-destructive"
                onClick={() => onSetBanner(undefined)}
              >
                <Trash2 className="mr-1 h-3 w-3" />
                Șterge
              </Button>
            ) : (
              <Button
                variant="outline"
                size="sm"
                className="h-7 text-xs"
                onClick={() =>
                  onSetBanner({
                    imageUrl: "",
                    linkUrl: "",
                    alt: "Banner",
                    width: 540,
                    height: 80,
                  })
                }
              >
                <ImagePlus className="mr-1 h-3 w-3" />
                Adaugă
              </Button>
            )}
          </div>
          {config.banner && (
            <div className="space-y-2">
              <div>
                <Label htmlFor="banner-img">URL Imagine</Label>
                <Input
                  id="banner-img"
                  placeholder="https://example.com/banner.png"
                  value={config.banner.imageUrl}
                  onChange={(e) =>
                    onSetBanner({
                      ...config.banner!,
                      imageUrl: e.target.value,
                    })
                  }
                  className="mt-1"
                />
              </div>
              <div>
                <Label htmlFor="banner-link">URL Link (click)</Label>
                <Input
                  id="banner-link"
                  placeholder="https://example.com"
                  value={config.banner.linkUrl}
                  onChange={(e) =>
                    onSetBanner({
                      ...config.banner!,
                      linkUrl: e.target.value,
                    })
                  }
                  className="mt-1"
                />
              </div>
              <div>
                <Label htmlFor="banner-alt">Text alternativ</Label>
                <Input
                  id="banner-alt"
                  placeholder="Banner promoțional"
                  value={config.banner.alt}
                  onChange={(e) =>
                    onSetBanner({ ...config.banner!, alt: e.target.value })
                  }
                  className="mt-1"
                />
              </div>
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <Label htmlFor="banner-w">Lățime (px)</Label>
                  <Input
                    id="banner-w"
                    type="number"
                    value={config.banner.width}
                    onChange={(e) =>
                      onSetBanner({
                        ...config.banner!,
                        width: parseInt(e.target.value, 10) || 540,
                      })
                    }
                    className="mt-1"
                  />
                </div>
                <div>
                  <Label htmlFor="banner-h">Înălțime (px)</Label>
                  <Input
                    id="banner-h"
                    type="number"
                    value={config.banner.height}
                    onChange={(e) =>
                      onSetBanner({
                        ...config.banner!,
                        height: parseInt(e.target.value, 10) || 80,
                      })
                    }
                    className="mt-1"
                  />
                </div>
              </div>
              {config.banner.imageUrl && (
                <div className="rounded-md border p-2">
                  <p className="mb-1 text-xs text-muted-foreground">
                    Previzualizare:
                  </p>
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={config.banner.imageUrl}
                    alt={config.banner.alt || "Banner"}
                    className="max-h-24 w-full rounded object-contain"
                  />
                </div>
              )}
            </div>
          )}
        </div>
      )}
    </div>
  );
}
