import { Box, Button, Input, Text } from "@saleor/macaw-ui";
import { NextPage } from "next";
import { useCallback, useEffect, useState } from "react";

interface WebhookToggle {
  enabled: boolean;
  sendAdminNotification: boolean;
  sendCustomerNotification: boolean;
}

interface WebhookSettings {
  orderCreated: WebhookToggle;
  orderFulfilled: WebhookToggle;
  orderCancelled: WebhookToggle;
}

interface EmailSettings {
  fromEmail: string;
  fromName: string;
  adminEmails: string;
  siteUrl: string;
  dashboardUrl: string;
}

interface Settings {
  webhooks: WebhookSettings;
  email: EmailSettings;
  updatedAt: string;
}

const defaultSettings: Settings = {
  webhooks: {
    orderCreated: { enabled: true, sendAdminNotification: true, sendCustomerNotification: true },
    orderFulfilled: { enabled: true, sendAdminNotification: true, sendCustomerNotification: true },
    orderCancelled: { enabled: true, sendAdminNotification: true, sendCustomerNotification: true },
  },
  email: {
    fromEmail: "",
    fromName: "",
    adminEmails: "",
    siteUrl: "",
    dashboardUrl: "",
  },
  updatedAt: "",
};

const webhookLabels: Record<keyof WebhookSettings, { title: string; description: string }> = {
  orderCreated: {
    title: "Order Created",
    description: "Send email notifications when a new order is placed",
  },
  orderFulfilled: {
    title: "Order Fulfilled",
    description: "Send email notifications when an order is shipped",
  },
  orderCancelled: {
    title: "Order Cancelled",
    description: "Send email notifications when an order is cancelled",
  },
};

const Toggle: React.FC<{
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}> = ({ checked, onChange, disabled }) => (
  <button
    type="button"
    role="switch"
    aria-checked={checked}
    disabled={disabled}
    onClick={() => onChange(!checked)}
    style={{
      position: "relative",
      width: "44px",
      height: "24px",
      borderRadius: "12px",
      backgroundColor: checked ? "#22c55e" : "#d1d5db",
      border: "none",
      cursor: disabled ? "not-allowed" : "pointer",
      opacity: disabled ? 0.5 : 1,
      transition: "background-color 0.2s",
      padding: 0,
    }}
  >
    <span
      style={{
        position: "absolute",
        top: "2px",
        left: checked ? "22px" : "2px",
        width: "20px",
        height: "20px",
        borderRadius: "50%",
        backgroundColor: "white",
        transition: "left 0.2s",
        boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
      }}
    />
  </button>
);

const Card: React.FC<{
  children: React.ReactNode;
  style?: React.CSSProperties;
}> = ({ children, style }) => (
  <div
    style={{
      backgroundColor: "#ffffff",
      borderRadius: "12px",
      border: "1px solid #e5e7eb",
      padding: "24px",
      ...style,
    }}
  >
    {children}
  </div>
);

const SettingsPage: NextPage = () => {
  const [settings, setSettings] = useState<Settings>(defaultSettings);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const bgColor = "#f9fafb";
  const textColor = "#111827";
  const subtextColor = "#6b7280";
  const borderColor = "#e5e7eb";

  useEffect(() => {
    fetch("/api/settings")
      .then((res) => res.json())
      .then((data: Settings) => {
        setSettings({
          ...data,
          email: {
            ...data.email,
            adminEmails: Array.isArray(data.email.adminEmails)
              ? data.email.adminEmails.join(", ")
              : data.email.adminEmails || "",
          },
        });
        setLoading(false);
      })
      .catch((err) => {
        console.error("Failed to load settings:", err);
        setError("Failed to load settings");
        setLoading(false);
      });
  }, []);

  const handleWebhookChange = useCallback(
    (webhook: keyof WebhookSettings, field: keyof WebhookToggle) => {
      setSettings((prev) => ({
        ...prev,
        webhooks: {
          ...prev.webhooks,
          [webhook]: {
            ...prev.webhooks[webhook],
            [field]: !prev.webhooks[webhook][field],
          },
        },
      }));
      setSaved(false);
    },
    []
  );

  const handleEmailChange = useCallback((field: keyof EmailSettings, value: string) => {
    setSettings((prev) => ({
      ...prev,
      email: {
        ...prev.email,
        [field]: value,
      },
    }));
    setSaved(false);
  }, []);

  const handleSave = useCallback(async () => {
    setSaving(true);
    setError(null);
    setSaved(false);

    try {
      const toSave = {
        ...settings,
        email: {
          ...settings.email,
          adminEmails: settings.email.adminEmails
            .split(",")
            .map((e) => e.trim())
            .filter(Boolean),
        },
      };

      const res = await fetch("/api/settings", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(toSave),
      });

      if (!res.ok) {
        throw new Error("Failed to save settings");
      }

      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } catch (err) {
      console.error("Failed to save settings:", err);
      setError("Failed to save settings. Please try again.");
    } finally {
      setSaving(false);
    }
  }, [settings]);

  if (loading) {
    return (
      <Box padding={8} style={{ backgroundColor: bgColor, minHeight: "100vh" }}>
        <Text size={5} style={{ color: textColor, fontWeight: "bold" }}>
          Loading...
        </Text>
      </Box>
    );
  }

  return (
    <Box padding={8} style={{ backgroundColor: bgColor, minHeight: "100vh" }}>
      <Box marginBottom={8}>
        <Text size={7} style={{ color: textColor, fontWeight: "bold" }}>
          Email Notifications
        </Text>
        <Text style={{ color: subtextColor, marginTop: "8px" }}>
          Configure when to send email notifications for order events
        </Text>
      </Box>

      {error && (
        <Box
          padding={4}
          marginBottom={6}
          style={{
            backgroundColor: "#fee2e2",
            borderRadius: "8px",
            border: "1px solid #ef4444",
          }}
        >
          <Text style={{ color: "#991b1b" }}>{error}</Text>
        </Box>
      )}

      <Box marginBottom={6}>
        <Text size={5} style={{ color: textColor, fontWeight: "bold", marginBottom: "16px" }}>
          Webhooks
        </Text>

        {(Object.keys(webhookLabels) as Array<keyof WebhookSettings>).map((webhook) => {
          const { title, description } = webhookLabels[webhook];
          const webhookSettings = settings.webhooks[webhook];

          return (
            <Card key={webhook} style={{ marginBottom: "16px" }}>
              <Box display="flex" alignItems="flex-start" justifyContent="space-between">
                <Box style={{ flex: 1 }}>
                  <Text style={{ color: textColor, fontWeight: "bold" }}>
                    {title}
                  </Text>
                  <Text size={3} style={{ color: subtextColor, marginTop: "4px" }}>
                    {description}
                  </Text>
                </Box>
                <Toggle
                  checked={webhookSettings.enabled}
                  onChange={() => handleWebhookChange(webhook, "enabled")}
                />
              </Box>

              {webhookSettings.enabled && (
                <Box
                  marginTop={4}
                  paddingTop={4}
                  style={{ borderTop: `1px solid ${borderColor}` }}
                >
                  <Box
                    display="flex"
                    alignItems="center"
                    justifyContent="space-between"
                    marginBottom={3}
                  >
                    <Text size={3} style={{ color: subtextColor }}>
                      Send to admin emails
                    </Text>
                    <Toggle
                      checked={webhookSettings.sendAdminNotification}
                      onChange={() => handleWebhookChange(webhook, "sendAdminNotification")}
                    />
                  </Box>
                  <Box display="flex" alignItems="center" justifyContent="space-between">
                    <Text size={3} style={{ color: subtextColor }}>
                      Send to customer
                    </Text>
                    <Toggle
                      checked={webhookSettings.sendCustomerNotification}
                      onChange={() => handleWebhookChange(webhook, "sendCustomerNotification")}
                    />
                  </Box>
                </Box>
              )}
            </Card>
          );
        })}
      </Box>

      <Box marginBottom={6}>
        <Text size={5} style={{ color: textColor, fontWeight: "bold", marginBottom: "16px" }}>
          Email Configuration
        </Text>

        <Card>
          <Box marginBottom={4}>
            <Text size={3} style={{ color: textColor, fontWeight: 500, marginBottom: "8px" }}>
              From Name
            </Text>
            <Input
              value={settings.email.fromName}
              onChange={(e) => handleEmailChange("fromName", e.target.value)}
              placeholder="ManoonOils"
              style={{ width: "100%" }}
            />
          </Box>

          <Box marginBottom={4}>
            <Text size={3} style={{ color: textColor, fontWeight: 500, marginBottom: "8px" }}>
              From Email
            </Text>
            <Input
              type="email"
              value={settings.email.fromEmail}
              onChange={(e) => handleEmailChange("fromEmail", e.target.value)}
              placeholder="support@mail.manoonoils.com"
              style={{ width: "100%" }}
            />
          </Box>

          <Box marginBottom={4}>
            <Text size={3} style={{ color: textColor, fontWeight: 500, marginBottom: "8px" }}>
              Admin Emails (comma separated)
            </Text>
            <Input
              value={settings.email.adminEmails}
              onChange={(e) => handleEmailChange("adminEmails", e.target.value)}
              placeholder="admin@example.com, manager@example.com"
              style={{ width: "100%" }}
            />
          </Box>

          <Box marginBottom={4}>
            <Text size={3} style={{ color: textColor, fontWeight: 500, marginBottom: "8px" }}>
              Store URL
            </Text>
            <Input
              type="url"
              value={settings.email.siteUrl}
              onChange={(e) => handleEmailChange("siteUrl", e.target.value)}
              placeholder="https://manoonoils.com"
              style={{ width: "100%" }}
            />
          </Box>

          <Box>
            <Text size={3} style={{ color: textColor, fontWeight: 500, marginBottom: "8px" }}>
              Dashboard URL
            </Text>
            <Input
              type="url"
              value={settings.email.dashboardUrl}
              onChange={(e) => handleEmailChange("dashboardUrl", e.target.value)}
              placeholder="https://dashboard.manoonoils.com"
              style={{ width: "100%" }}
            />
          </Box>
        </Card>
      </Box>

      <Box display="flex" alignItems="center" gap={4}>
        <Button
          variant="primary"
          onClick={handleSave}
          disabled={saving}
        >
          {saving ? "Saving..." : "Save Settings"}
        </Button>
        {saved && (
          <Text size={3} style={{ color: "#22c55e" }}>
            Settings saved successfully!
          </Text>
        )}
      </Box>

      {settings.updatedAt && (
        <Text size={3} style={{ color: subtextColor, marginTop: "16px" }}>
          Last updated: {new Date(settings.updatedAt).toLocaleString()}
        </Text>
      )}
    </Box>
  );
};

export default SettingsPage;
