"use client";

import type { ThemeSettings } from "@domainops/shared-types";
import { App, Button, Card, Form, Input, InputNumber, Popconfirm, Select, Switch, Typography } from "antd";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { resetTheme, updateTheme } from "@/lib/api/theme";
import { ApiError } from "@/lib/api/client";
import { useThemeSettings } from "@/lib/theme/ThemeProvider";

// Plain native color inputs, not AntD's ColorPicker - this session hit
// several AntD v6 prop-shape surprises already (Space, Alert), and a
// native <input type="color"> is a simpler, well-understood contract.
function ColorField({ label, name }: { label: string; name: string }) {
  return (
    <Form.Item name={name} label={label} valuePropName="value" className={`dms_settings_appearance_${name}_field`}>
      <input type="color" className="h-9 w-16 rounded border border-gray-600 bg-transparent" />
    </Form.Item>
  );
}

// AntD's own defaults for an unset semantic color - shown here so an
// untouched field doesn't get silently overwritten with an arbitrary
// swatch value when the form submits (native <input type="color"> can't
// represent "null / inherit the default", it always holds a concrete color).
const COLOR_FALLBACKS: Record<string, string> = {
  light_success_color: "#52c41a",
  light_warning_color: "#faad14",
  light_error_color: "#ff4d4f",
  dark_success_color: "#52c41a",
  dark_warning_color: "#faad14",
  dark_error_color: "#ff4d4f",
  light_login_background_color: "#ffffff",
  dark_login_background_color: "#000000",
};

function ColorSchemeSection({
  mode,
  isResetting,
  onReset,
}: {
  mode: "light" | "dark";
  isResetting: boolean;
  onReset: () => void;
}) {
  const label = mode === "light" ? "Light Theme" : "Dark Theme";

  return (
    <div className="md:col-span-2">
      <div className="flex items-center justify-between mb-1">
        <Typography.Text strong>{label} Colors</Typography.Text>
        <Popconfirm title={`Reset ${label.toLowerCase()} colors to default?`} onConfirm={onReset}>
          <Button size="small" loading={isResetting} className={`dms_settings_appearance_${mode}_reset_btn`}>
            Reset To Default
          </Button>
        </Popconfirm>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-x-4">
        <ColorField label="Primary" name={`${mode}_primary_color`} />
        <ColorField label="Success" name={`${mode}_success_color`} />
        <ColorField label="Warning" name={`${mode}_warning_color`} />
        <ColorField label="Error" name={`${mode}_error_color`} />
      </div>
    </div>
  );
}

export function AppearanceTab() {
  const { message } = App.useApp();
  const router = useRouter();
  const theme = useThemeSettings();
  const [form] = Form.useForm<Partial<ThemeSettings>>();
  const [isSaving, setIsSaving] = useState(false);
  const [resettingMode, setResettingMode] = useState<"light" | "dark" | null>(null);

  const initialValues = { ...theme };
  for (const [key, fallback] of Object.entries(COLOR_FALLBACKS)) {
    const typedKey = key as keyof ThemeSettings;
    if (!initialValues[typedKey]) {
      (initialValues as Record<string, unknown>)[typedKey] = fallback;
    }
  }

  async function handleSubmit(values: Partial<ThemeSettings>) {
    setIsSaving(true);
    try {
      await updateTheme(values);
      message.success("Appearance updated.");
      router.refresh();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't save those changes.");
    } finally {
      setIsSaving(false);
    }
  }

  async function handleReset(mode: "light" | "dark") {
    setResettingMode(mode);
    try {
      const updated = await resetTheme(mode);
      form.setFieldsValue({
        [`${mode}_primary_color`]: updated[`${mode}_primary_color` as keyof ThemeSettings],
        [`${mode}_success_color`]: updated[`${mode}_success_color` as keyof ThemeSettings] ?? undefined,
        [`${mode}_warning_color`]: updated[`${mode}_warning_color` as keyof ThemeSettings] ?? undefined,
        [`${mode}_error_color`]: updated[`${mode}_error_color` as keyof ThemeSettings] ?? undefined,
      });
      message.success(`${mode === "light" ? "Light" : "Dark"} theme reset to default.`);
      router.refresh();
    } catch (err) {
      message.error(err instanceof ApiError ? err.message : "Couldn't reset that theme.");
    } finally {
      setResettingMode(null);
    }
  }

  return (
    <Card className="dms_settings_appearance_card">
      <Typography.Paragraph type="secondary">
        Applies system-wide at runtime - no rebuild needed. Changes reflect immediately once saved.
      </Typography.Paragraph>

      <Form<Partial<ThemeSettings>>
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={initialValues}
        className="grid grid-cols-1 md:grid-cols-2 gap-x-8 dms_settings_appearance_form"
      >
        <Form.Item
          name="mode"
          label="Color Mode"
          extra="Match System is the default - it follows the visitor's OS setting."
          className="dms_settings_appearance_mode_field"
        >
          <Select
            options={[
              { value: "system", label: "Match System" },
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]}
          />
        </Form.Item>

        <Form.Item
          name="allow_user_override"
          label="Let Users Override The Mode"
          valuePropName="checked"
          className="dms_settings_appearance_allow_user_override_field"
        >
          <Switch />
        </Form.Item>

        <ColorSchemeSection mode="light" isResetting={resettingMode === "light"} onReset={() => handleReset("light")} />
        <ColorSchemeSection mode="dark" isResetting={resettingMode === "dark"} onReset={() => handleReset("dark")} />

        <Form.Item name="border_radius" label="Border Radius (px)" className="dms_settings_appearance_border_radius_field">
          <InputNumber min={0} max={24} className="w-full" />
        </Form.Item>

        <Form.Item name="spacing_scale" label="Spacing" className="dms_settings_appearance_spacing_scale_field">
          <Select
            options={[
              { value: "compact", label: "Compact" },
              { value: "comfortable", label: "Comfortable" },
              { value: "spacious", label: "Spacious" },
            ]}
          />
        </Form.Item>

        <Form.Item name="card_style" label="Card Style" className="dms_settings_appearance_card_style_field">
          <Select
            options={[
              { value: "flat", label: "Flat" },
              { value: "bordered", label: "Bordered" },
              { value: "shadow", label: "Shadow" },
            ]}
          />
        </Form.Item>

        <Form.Item name="button_style" label="Button Style" className="dms_settings_appearance_button_style_field">
          <Select
            options={[
              { value: "solid", label: "Solid" },
              { value: "outline", label: "Outline" },
              { value: "ghost", label: "Ghost" },
            ]}
          />
        </Form.Item>

        <Form.Item name="login_layout" label="Login Page Layout" className="dms_settings_appearance_login_layout_field">
          <Select
            options={[
              { value: "centered-card", label: "Centered Card" },
              { value: "split-image", label: "Split Image" },
              { value: "minimal-fullscreen", label: "Minimal Fullscreen" },
            ]}
          />
        </Form.Item>

        <ColorField label="Login Background Color (Light)" name="light_login_background_color" />
        <ColorField label="Login Background Color (Dark)" name="dark_login_background_color" />

        <Form.Item
          name="login_image_url"
          label="Login Split-Image URL"
          extra="Used by the Split Image layout - defaults to a random picsum.photos photo."
          className="md:col-span-2 dms_settings_appearance_login_image_url_field"
        >
          <Input placeholder="https://picsum.photos/1200/1600" />
        </Form.Item>

        <Form.Item className="md:col-span-2 dms_settings_appearance_submit_field">
          <Button type="primary" htmlType="submit" loading={isSaving} className="dms_settings_appearance_save_btn">
            Save Appearance
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}