import { useState } from "react";
import { getWidgetType } from "../widgets/WidgetRegistry";
import { useTranslation } from "@termix/plugin-sdk/frontend";
import {
  Button,
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  Input,
} from "@termix/plugin-sdk/ui";

import type {
  CanvasWidget,
  ServiceLinkConfig,
  FolderConfig,
  NotesConfig,
  BookmarkListConfig,
  ClockConfig,
  HostStatusConfig,
  WeatherConfig,
  IframeConfig,
  RssFeedConfig,
  HostGridConfig,
  PingStatusConfig,
  RecentActivityConfig,
  TermixUptimeConfig,
  SystemOverviewConfig,
  SshTerminalConfig,
  QuickConnectConfig,
  CalendarConfig,
  CountdownConfig,
  SearchBarConfig,
  TextBannerConfig,
  ImageWidgetConfig,
  MarkdownNotesConfig,
  CustomApiConfig,
  ServiceGridConfig,
  DashboardLinksConfig,
  SearchLinksConfig,
  LinkTreeConfig,
} from "../types.js";
import { ServiceLinkEditForm } from "./ServiceLinkEditForm";
import { FolderEditForm } from "./FolderEditForm";
import { NotesEditForm } from "./NotesEditForm";
import { BookmarkListEditForm } from "./BookmarkListEditForm";
import { ClockEditForm } from "./ClockEditForm";
import { HostStatusEditForm } from "./HostStatusEditForm";
import { WeatherEditForm } from "./WeatherEditForm";
import { IframeEditForm } from "./IframeEditForm";
import { RssFeedEditForm } from "./RssFeedEditForm";
import { HostGridEditForm } from "./HostGridEditForm";
import { PingStatusEditForm } from "./PingStatusEditForm";
import { RecentActivityEditForm } from "./RecentActivityEditForm";
import { TermixUptimeEditForm } from "./TermixUptimeEditForm";
import { SystemOverviewEditForm } from "./SystemOverviewEditForm";
import { SshTerminalEditForm } from "./SshTerminalEditForm";
import { QuickConnectEditForm } from "./QuickConnectEditForm";
import { CalendarEditForm } from "./CalendarEditForm";
import { CountdownEditForm } from "./CountdownEditForm";
import { SearchBarEditForm } from "./SearchBarEditForm";
import { TextBannerEditForm } from "./TextBannerEditForm";
import { ImageWidgetEditForm } from "./ImageWidgetEditForm";
import { MarkdownNotesEditForm } from "./MarkdownNotesEditForm";
import { CustomApiEditForm } from "./CustomApiEditForm";
import { ServiceGridEditForm } from "./ServiceGridEditForm";
import { DashboardLinksEditForm } from "./DashboardLinksEditForm";
import { SearchLinksEditForm } from "./SearchLinksEditForm";
import { LinkTreeEditForm } from "./LinkTreeEditForm";
import { validateClockTimezone } from "../clock-timezone";

interface WidgetEditDialogProps {
  widget: CanvasWidget | null;
  onSave: (
    id: number,
    title: string | null,
    config: Record<string, unknown>,
  ) => void;
  onClose: () => void;
}

export function WidgetEditDialog({
  widget,
  onSave,
  onClose,
}: WidgetEditDialogProps) {
  const { t } = useTranslation();
  const [title, setTitle] = useState(widget?.title ?? "");
  const [config, setConfig] = useState<Record<string, unknown>>(
    widget?.config ?? {},
  );

  if (!widget) return null;

  // Configs that need checking before they can be stored. The clock keeps the
  // normalized zone rather than the raw input, so "America/New York" is filed
  // as "America/New_York"; the form flags an unusable one and Save stays off.
  const clockTimezone =
    widget.typeId === "clock" ? validateClockTimezone(config.timezone) : null;
  const configInvalid = clockTimezone ? !clockTimezone.valid : false;

  const handleSave = () => {
    if (configInvalid) return;
    onSave(
      widget.id,
      title || null,
      clockTimezone ? { ...config, timezone: clockTimezone.timezone } : config,
    );
    onClose();
  };

  const renderForm = () => {
    switch (widget.typeId) {
      case "service_link":
        return (
          <ServiceLinkEditForm
            config={config as unknown as ServiceLinkConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "folder":
        return (
          <FolderEditForm
            config={config as unknown as FolderConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "notes":
        return (
          <NotesEditForm
            config={config as unknown as NotesConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "bookmark_list":
        return (
          <BookmarkListEditForm
            config={config as unknown as BookmarkListConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "clock":
        return (
          <ClockEditForm
            config={config as unknown as ClockConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "host_status":
        return (
          <HostStatusEditForm
            config={config as unknown as HostStatusConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "weather":
        return (
          <WeatherEditForm
            config={config as unknown as WeatherConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "iframe_embed":
        return (
          <IframeEditForm
            config={config as unknown as IframeConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "rss_feed":
        return (
          <RssFeedEditForm
            config={config as unknown as RssFeedConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "host_grid":
        return (
          <HostGridEditForm
            config={config as unknown as HostGridConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "ping_status":
        return (
          <PingStatusEditForm
            config={config as unknown as PingStatusConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "recent_activity":
        return (
          <RecentActivityEditForm
            config={config as unknown as RecentActivityConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "termix_uptime":
        return (
          <TermixUptimeEditForm
            config={config as unknown as TermixUptimeConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "system_overview":
        return (
          <SystemOverviewEditForm
            config={config as unknown as SystemOverviewConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "ssh_terminal":
        return (
          <SshTerminalEditForm
            config={config as unknown as SshTerminalConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "quick_connect":
        return (
          <QuickConnectEditForm
            config={config as unknown as QuickConnectConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "calendar":
        return (
          <CalendarEditForm
            config={config as unknown as CalendarConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "countdown":
        return (
          <CountdownEditForm
            config={config as unknown as CountdownConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "search_bar":
        return (
          <SearchBarEditForm
            config={config as unknown as SearchBarConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "text_banner":
        return (
          <TextBannerEditForm
            config={config as unknown as TextBannerConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "image_widget":
        return (
          <ImageWidgetEditForm
            config={config as unknown as ImageWidgetConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "markdown_notes":
        return (
          <MarkdownNotesEditForm
            config={config as unknown as MarkdownNotesConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "custom_api":
        return (
          <CustomApiEditForm
            config={config as unknown as CustomApiConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "service_grid":
        return (
          <ServiceGridEditForm
            config={config as unknown as ServiceGridConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "dashboard_links":
        return (
          <DashboardLinksEditForm
            config={config as unknown as DashboardLinksConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "search_links":
        return (
          <SearchLinksEditForm
            config={config as unknown as SearchLinksConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      case "link_tree":
        return (
          <LinkTreeEditForm
            config={config as unknown as LinkTreeConfig}
            onChange={(c) => setConfig(c as unknown as Record<string, unknown>)}
          />
        );
      default: {
        // Plugin widgets bring their own form.
        const EditForm = getWidgetType(widget.typeId)?.editFormComponent;
        return EditForm ? (
          <EditForm config={config} onChange={setConfig} />
        ) : null;
      }
    }
  };

  return (
    <Dialog
      open={!!widget}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
    >
      <DialogContent
        className="max-w-sm"
        onMouseDown={(e) => e.stopPropagation()}
      >
        <DialogHeader>
          <DialogTitle>{t("homepage.editWidget")}</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-4">
          <div className="flex flex-col gap-1">
            <label className="text-xs font-medium text-muted-foreground">
              {t("homepage.title_label")}
            </label>
            <Input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder={t("homepage.widgetTitlePlaceholder")}
              className="h-8 text-sm"
            />
          </div>
          {renderForm()}
        </div>
        <DialogFooter>
          <Button variant="outline" size="sm" onClick={onClose}>
            {t("homepage.cancel")}
          </Button>
          <Button size="sm" onClick={handleSave} disabled={configInvalid}>
            {t("homepage.save")}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}