"use client";

import { SettingsPageLayout } from "@/components/dashboard/settings/settings-page-layout";
import {
  SettingsSubnavCard,
  type SettingsSubnavItem,
} from "@/components/dashboard/settings/settings-subnav-card";
import { SettingsSuccessDialog } from "@/components/dashboard/settings/settings-success-dialog";
import { FormSkeleton } from "@/components/ui/form-skeleton";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import type { GeneralSettingsTab } from "@/components/dashboard/settings/settings-types";
import { Loader2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import type { AdminSiteSettings } from "@/components/dashboard/settings/settings-api-types";

interface GeneralSettingsViewProps {
  activeTab: GeneralSettingsTab;
  isLoading: boolean;
  formData: Partial<AdminSiteSettings>;
  onChangeForm: (data: Partial<AdminSiteSettings>) => void;
  onSave: () => Promise<void>;
  onGenerateSitemap: () => Promise<void>;
  isSaving: boolean;
  isGeneratingSitemap: boolean;
}

export function GeneralSettingsView({
  activeTab,
  isLoading,
  formData,
  onChangeForm,
  onSave,
  onGenerateSitemap,
  isSaving,
  isGeneratingSitemap,
}: GeneralSettingsViewProps) {
  const t = useTranslations("dashboard.settings");
  const [successOpen, setSuccessOpen] = useState(false);

  const tabItems: SettingsSubnavItem[] = [
    { id: "sitemap", label: t("general.tabs.sitemap"), href: "/dashboard/settings/general?tab=sitemap" },
    { id: "warning", label: t("general.tabs.warning"), href: "/dashboard/settings/general?tab=warning" },
    { id: "cache", label: t("general.tabs.cache"), href: "/dashboard/settings/general?tab=cache" },
    { id: "media", label: t("general.tabs.media"), href: "/dashboard/settings/general?tab=media" },
  ];

  if (isLoading) {
    return (
      <SettingsPageLayout
        sideContent={<SettingsSubnavCard items={tabItems} activeId={activeTab} />}
      >
        <section className="rounded-2xl border border-border bg-card p-6">
          <FormSkeleton rows={4} />
        </section>
      </SettingsPageLayout>
    );
  }

  return (
    <>
      <SettingsPageLayout
        sideContent={<SettingsSubnavCard items={tabItems} activeId={activeTab} />}
      >
        {activeTab === "sitemap" ? (
          <section className="rounded-2xl border border-border bg-card p-6">
            <h2 className="mb-5 text-xl font-bold text-foreground">
              {t("general.sitemap.title")}
            </h2>
            <div className="space-y-2">
              <Label>{t("general.sitemap.fieldLabel")}</Label>
              <Input
                className="h-12 rounded-xl"
                value="Generated automatically"
                disabled
              />
            </div>
            <Button type="button" className="mt-6 h-12 rounded-xl px-8" onClick={onGenerateSitemap} disabled={isGeneratingSitemap}>
              {isGeneratingSitemap ? t("actions.generating") : t("general.sitemap.action")}
            </Button>
          </section>
        ) : null}

        {activeTab === "warning" ? (
          <section className="rounded-2xl border border-border bg-card p-6">
            <h2 className="mb-5 text-xl font-bold text-foreground">
              {t("general.warning.title")}
            </h2>

            <div className="space-y-4">
              <div className="space-y-2">
                <Label>{t("general.warning.fields.headline")}</Label>
                <Input
                  className="h-12 rounded-xl"
                  value="Coming Soon"
                />
              </div>

              <div className="space-y-2">
                <Label>{t("general.warning.fields.description")}</Label>
                <Textarea
                  className="min-h-[96px] rounded-xl"
                  value="This feature is coming soon!"
                />
              </div>

              <div className="space-y-2">
                <Label>{t("general.warning.fields.buttonLabel")}</Label>
                <Input
                  className="h-12 rounded-xl"
                  value="Learn More"
                />
              </div>

              <Button type="button" className="h-12 rounded-xl px-8" onClick={async () => { await onSave(); setSuccessOpen(true); }} disabled={isSaving}>
                {isSaving && <Loader2 className="me-1 size-4 animate-spin" />}
                {isSaving ? t("actions.saving") : t("actions.save")}
              </Button>
            </div>
          </section>
        ) : null}

        {activeTab === "cache" ? (
          <section className="rounded-2xl border border-border bg-card p-6">
            <h2 className="mb-5 text-xl font-bold text-foreground">
              {t("general.cache.title")}
            </h2>

            <div className="space-y-4">
              <ToggleRow
                label={t("general.cache.fields.system")}
                checked={formData.cache_enabled || false}
                onChange={(checked) => onChangeForm({ ...formData, cache_enabled: checked })}
              />
              <ToggleRow
                label={t("general.cache.fields.cookieBanner")}
                checked={formData.cookie_banner_enabled || false}
                onChange={(checked) => onChangeForm({ ...formData, cookie_banner_enabled: checked })}
              />
              <div className="space-y-2">
                <Label>{t("general.cache.fields.customCss")}</Label>
                <Textarea
                  className="min-h-[96px] rounded-xl"
                  value={formData.custom_css || ""}
                  onChange={(e) => onChangeForm({ ...formData, custom_css: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label>{t("general.cache.fields.headerHtml")}</Label>
                <Textarea
                  className="min-h-[96px] rounded-xl"
                  value={formData.header_html || ""}
                  onChange={(e) => onChangeForm({ ...formData, header_html: e.target.value })}
                />
              </div>
              <div className="space-y-2">
                <Label>{t("general.cache.fields.footerHtml")}</Label>
                <Textarea
                  className="min-h-[96px] rounded-xl"
                  value={formData.footer_html || ""}
                  onChange={(e) => onChangeForm({ ...formData, footer_html: e.target.value })}
                />
              </div>
            </div>

            <div className="mt-6 flex gap-3">
              <Button type="button" className="h-12 rounded-xl px-8" onClick={async () => { await onSave(); setSuccessOpen(true); }} disabled={isSaving}>
                {isSaving && <Loader2 className="me-1 size-4 animate-spin" />}
                {isSaving ? t("actions.saving") : t("actions.saveChanges")}
              </Button>
              <Button type="button" variant="outline" className="h-12 rounded-xl px-8">
                {t("actions.resetSettings")}
              </Button>
            </div>
          </section>
        ) : null}

        {activeTab === "media" ? (
          <section className="rounded-2xl border border-border bg-card p-6">
            <h2 className="mb-5 text-xl font-bold text-foreground">
              {t("general.media.title")}
            </h2>
            <div className="space-y-4">
              <ToggleRow label={t("general.media.fields.compression")} checked={true} />
              <ToggleRow label={t("general.media.fields.optimize")} checked={true} />
              <div className="space-y-2">
                <Label>{t("general.media.fields.quality")}</Label>
                <Input className="h-12 rounded-xl" defaultValue="85" />
              </div>
            </div>
            <Button type="button" className="mt-6 h-12 rounded-xl px-8">
              {t("actions.save")}
            </Button>
          </section>
        ) : null}
      </SettingsPageLayout>

      <SettingsSuccessDialog
        open={successOpen}
        onOpenChange={setSuccessOpen}
        title="Settings Saved"
        closeLabel="Close"
      />
    </>
  );
}

function ToggleRow({ label, checked, onChange }: { label: string; checked: boolean; onChange?: (checked: boolean) => void }) {
  const t = useTranslations("dashboard.settings");

  return (
    <div className="flex items-center justify-between rounded-xl border border-border p-4">
      <span className="text-sm text-foreground">{label}</span>
      <div className="flex items-center gap-3">
        <span className="text-sm text-muted-foreground">{t("filters.status.inactive")}</span>
        <Switch checked={checked} onCheckedChange={onChange} />
        <span className="text-sm text-muted-foreground">{t("filters.status.active")}</span>
      </div>
    </div>
  );
}