"use client";

import { useState } from "react";
import type { ChangeEvent } from "react";
import type { FormEvent } from "react";
import { formatDateTime } from "@/lib/dates";

type Instance = {
  id: string;
  name: string;
  base_url: string;
  auth_type: "api_key" | "basic";
  status: string;
  error_message: string | null;
  last_connected_at: string | null;
  last_sync_at: string | null;
  last_sync_status: string | null;
  last_sync_error: string | null;
  last_sync_subscriptions: number;
  last_sync_domains: number;
};

type Subscription = {
  id: string;
  name: string | null;
  status: string | null;
  plesk_subscription_id: string;
  plesk_instance_id: string;
};

type Domain = {
  id: string;
  plesk_instance_id: string;
  subscription_id: string | null;
  subscription_name?: string | null;
  domain_name: string;
  status: string | null;
  hosting_type: string | null;
  source_created_at: string | null;
  aliases_count: number | null;
  updated_at: string;
};

type Props = {
  instances: Instance[];
  subscriptions: Subscription[];
  domains: Domain[];
  autoSyncByInstance: Record<
    string,
    { status: string; created_at: string; error_message: string | null }
  >;
};

function getDomainStatusBadge(status: string | null) {
  const normalized = (status ?? "unknown").toLowerCase();

  if (normalized.includes("suspend") || normalized.includes("disabled")) {
    return "bg-rose-100 text-rose-700";
  }

  if (normalized.includes("expired")) {
    return "bg-amber-100 text-amber-700";
  }

  if (normalized.includes("active") || normalized.includes("enabled")) {
    return "bg-emerald-100 text-emerald-700";
  }

  if (normalized.includes("ok")) {
    return "bg-emerald-100 text-emerald-700";
  }

  return "bg-slate-100 text-slate-600";
}

function formatDomainStatusLabel(status: string | null) {
  const normalized = (status ?? "unknown").toLowerCase();

  if (normalized.includes("suspend")) return "Suspended";
  if (normalized.includes("disabled")) return "Disabled";
  if (normalized.includes("expired")) return "Expired";
  if (
    normalized.includes("active") ||
    normalized.includes("ok") ||
    normalized.includes("enabled")
  ) {
    return "Active";
  }

  return "Unknown";
}

function isDomainSuspended(status: string | null) {
  const normalized = (status ?? "unknown").toLowerCase();
  return normalized.includes("suspend") || normalized.includes("disabled");
}

function isDomainActive(status: string | null) {
  const normalized = (status ?? "unknown").toLowerCase();
  return (
    normalized.includes("active") ||
    normalized.includes("ok") ||
    normalized.includes("enabled")
  );
}

function getDomainHref(domainName: string) {
  const normalized = domainName.trim();
  if (/^https?:\/\//i.test(normalized)) return normalized;
  return `https://${normalized}`;
}

export function DashboardControls({
  instances,
  subscriptions,
  domains,
  autoSyncByInstance,
}: Props) {
  const [instanceName, setInstanceName] = useState("");
  const [baseUrl, setBaseUrl] = useState("");
  const [authType, setAuthType] = useState<"api_key" | "basic">("api_key");
  const [apiKey, setApiKey] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [actionSubId, setActionSubId] = useState(subscriptions[0]?.id ?? "");
  const [actionType, setActionType] = useState<"suspend" | "unsuspend">(
    "suspend",
  );
  const [domainSearch, setDomainSearch] = useState("");
  const [domainStatus, setDomainStatus] = useState("all");
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  const healthCounts = instances.reduce(
    (acc, instance) => {
      if (instance.status === "connected") acc.connected += 1;
      else if (instance.status === "syncing") acc.syncing += 1;
      else acc.error += 1;
      return acc;
    },
    { connected: 0, syncing: 0, error: 0 },
  );

  const domainStatusOptions = Array.from(
    new Set(
      domains.map((domain) => (domain.status ?? "unknown").toLowerCase()),
    ),
  ).sort();

  const filteredDomains = domains.filter((domain) => {
    const normalizedStatus = (domain.status ?? "unknown").toLowerCase();
    const statusMatches =
      domainStatus === "all" || normalizedStatus === domainStatus;
    const term = domainSearch.trim().toLowerCase();
    const searchMatches =
      !term ||
      domain.domain_name.toLowerCase().includes(term) ||
      (domain.hosting_type ?? "").toLowerCase().includes(term);
    return statusMatches && searchMatches;
  });

  async function runRequest(url: string, body?: unknown) {
    const response = await fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: body ? JSON.stringify(body) : undefined,
    });

    const payload = await response.json().catch(() => ({}));
    if (!response.ok) {
      throw new Error(payload.error ?? "Request failed");
    }
    return payload;
  }

  async function onCreateInstance(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);
    setMessage(null);
    try {
      await runRequest("/api/plesk/instances", {
        name: instanceName,
        base_url: baseUrl,
        auth_type: authType,
        api_key: authType === "api_key" ? apiKey : undefined,
        username: authType === "basic" ? username : undefined,
        password: authType === "basic" ? password : undefined,
      });
      setMessage("Plesk instance connected.");
      window.location.reload();
    } catch (error) {
      setMessage(
        error instanceof Error ? error.message : "Could not connect instance",
      );
    } finally {
      setLoading(false);
    }
  }

  async function onSync(instanceId: string) {
    setLoading(true);
    setMessage(null);
    try {
      const payload = await runRequest(
        `/api/plesk/instances/${instanceId}/sync`,
      );
      setMessage("Plesk sync completed.");
      if (payload?.skipped) {
        setMessage(`Sync skipped (${payload.reason ?? "no reason"}).`);
      } else if (
        payload?.domainsUpserted != null ||
        payload?.subscriptionsUpserted != null
      ) {
        setMessage(
          `Plesk sync completed. Subscriptions: ${payload.subscriptionsUpserted ?? 0}, Domains: ${payload.domainsUpserted ?? 0}`,
        );
      }
      window.location.reload();
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "Sync failed");
    } finally {
      setLoading(false);
    }
  }

  async function onTestConnection(instanceId: string) {
    setLoading(true);
    setMessage(null);
    try {
      await runRequest(`/api/plesk/instances/${instanceId}/test`);
      setMessage("Connection test completed.");
      window.location.reload();
    } catch (error) {
      setMessage(
        error instanceof Error ? error.message : "Connection test failed",
      );
    } finally {
      setLoading(false);
    }
  }

  async function onSubscriptionAction() {
    if (!actionSubId) return;
    setLoading(true);
    setMessage(null);
    try {
      await runRequest(`/api/plesk/subscriptions/${actionSubId}/action`, {
        action: actionType,
      });
      setMessage(`Subscription ${actionType} completed.`);
      window.location.reload();
    } catch (error) {
      setMessage(error instanceof Error ? error.message : "Action failed");
    } finally {
      setLoading(false);
    }
  }

  async function onDomainAction(
    domain: Domain,
    action: "suspend" | "unsuspend",
  ) {
    if (!domain.subscription_id) {
      setMessage(
        "Domain is not linked to a subscription yet. Run Sync Now (or backfill links) and try again.",
      );
      return;
    }

    setLoading(true);
    setMessage(null);
    try {
      await runRequest(`/api/plesk/domains/${domain.id}/action`, {
        action,
        subscription_id: domain.subscription_id,
      });
      setMessage("Domain action completed.");
      window.location.reload();
    } catch (error) {
      setMessage(
        error instanceof Error ? error.message : "Domain action failed",
      );
    } finally {
      setLoading(false);
    }
  }

  async function onCheckout() {
    setLoading(true);
    try {
      const payload = await runRequest("/api/stripe/checkout");
      if (payload.url) window.location.href = payload.url;
    } finally {
      setLoading(false);
    }
  }

  async function onPortal() {
    setLoading(true);
    try {
      const payload = await runRequest("/api/stripe/portal");
      if (payload.url) window.location.href = payload.url;
    } finally {
      setLoading(false);
    }
  }

  return (
    <section className="grid gap-4">
      <div className="grid gap-4 md:grid-cols-3">
        <div className="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
          <p className="text-sm text-emerald-700">Connected</p>
          <p className="text-2xl font-semibold text-emerald-900">
            {healthCounts.connected}
          </p>
        </div>
        <div className="rounded-xl border border-amber-200 bg-amber-50 p-4">
          <p className="text-sm text-amber-700">Syncing</p>
          <p className="text-2xl font-semibold text-amber-900">
            {healthCounts.syncing}
          </p>
        </div>
        <div className="rounded-xl border border-rose-200 bg-rose-50 p-4">
          <p className="text-sm text-rose-700">Error/Other</p>
          <p className="text-2xl font-semibold text-rose-900">
            {healthCounts.error}
          </p>
        </div>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <form
          onSubmit={onCreateInstance}
          className="space-y-3 rounded-xl border border-slate-200 bg-white p-4"
        >
          <h2 className="text-lg font-semibold">Connect Plesk Instance</h2>
          <input
            required
            value={instanceName}
            onChange={(e: ChangeEvent<HTMLInputElement>) =>
              setInstanceName(e.target.value)
            }
            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
            placeholder="Instance name"
          />
          <input
            required
            value={baseUrl}
            onChange={(e: ChangeEvent<HTMLInputElement>) =>
              setBaseUrl(e.target.value)
            }
            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
            placeholder="https://plesk.example.com"
          />
          <select
            value={authType}
            onChange={(e: ChangeEvent<HTMLSelectElement>) =>
              setAuthType(e.target.value as "api_key" | "basic")
            }
            className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
          >
            <option value="api_key">API Key</option>
            <option value="basic">Basic</option>
          </select>
          {authType === "api_key" ? (
            <input
              required
              value={apiKey}
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setApiKey(e.target.value)
              }
              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
              placeholder="Plesk API key"
            />
          ) : (
            <div className="grid gap-2 sm:grid-cols-2">
              <input
                required
                value={username}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setUsername(e.target.value)
                }
                className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
                placeholder="Plesk username"
              />
              <input
                required
                type="password"
                value={password}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setPassword(e.target.value)
                }
                className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
                placeholder="Plesk password"
              />
            </div>
          )}
          <button
            disabled={loading}
            className="rounded bg-brand-600 px-3 py-2 text-sm text-white"
          >
            Save & Validate
          </button>
        </form>

        <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4">
          <h2 className="text-lg font-semibold">Plesk Instances</h2>

          <div className="space-y-2">
            {instances.length === 0 ? (
              <p className="text-sm text-slate-500">
                No Plesk instances connected yet.
              </p>
            ) : (
              instances.map((instance) => (
                <div
                  key={instance.id}
                  className="rounded border border-slate-200 p-3"
                >
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      {autoSyncByInstance[instance.id] ? (
                        <span
                          className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${
                            autoSyncByInstance[instance.id].status === "success"
                              ? "bg-emerald-100 text-emerald-700"
                              : "bg-rose-100 text-rose-700"
                          }`}
                        >
                          Auto-sync {autoSyncByInstance[instance.id].status}
                        </span>
                      ) : null}
                      <p className="text-sm font-semibold text-slate-900">
                        {instance.name}
                      </p>
                      <p className="text-xs text-slate-500">
                        {instance.base_url}
                      </p>
                      <p className="mt-1 text-xs text-slate-600">
                        Status:{" "}
                        <span className="font-medium">{instance.status}</span>
                      </p>
                      <p className="text-xs text-slate-500">
                        Subscriptions: {instance.last_sync_subscriptions ?? 0}
                      </p>
                      <p className="text-xs text-slate-500">
                        Domains: {instance.last_sync_domains ?? 0}
                      </p>
                      <p className="text-xs text-slate-500">
                        Last sync status:{" "}
                        <span
                          className={`inline-flex rounded px-2 py-0.5 text-[11px] font-medium ${
                            instance.last_sync_status === "success"
                              ? "bg-emerald-100 text-emerald-700"
                              : instance.last_sync_status === "failed" ||
                                  instance.last_sync_status === "error"
                                ? "bg-rose-100 text-rose-700"
                                : "bg-slate-100 text-slate-600"
                          }`}
                        >
                          {instance.last_sync_status ?? "unknown"}
                        </span>
                      </p>
                      <p className="text-xs text-slate-500">
                        Last sync time: {formatDateTime(instance.last_sync_at)}
                      </p>
                      <p className="text-xs text-slate-500">
                        Last connected:{" "}
                        {instance.last_connected_at
                          ? formatDateTime(instance.last_connected_at)
                          : "never"}
                      </p>
                      {autoSyncByInstance[instance.id] ? (
                        <p className="text-xs text-slate-500">
                          Last auto-sync:{" "}
                          {formatDateTime(
                            autoSyncByInstance[instance.id].created_at,
                          )}
                        </p>
                      ) : null}
                      {instance.error_message ? (
                        <p className="mt-1 text-xs text-rose-600">
                          {instance.error_message}
                        </p>
                      ) : null}
                      {instance.last_sync_error ? (
                        <p className="mt-1 text-xs text-rose-600">
                          Last sync error: {instance.last_sync_error}
                        </p>
                      ) : null}
                      {autoSyncByInstance[instance.id]?.error_message ? (
                        <p className="mt-1 text-xs text-rose-600">
                          Auto-sync error:{" "}
                          {autoSyncByInstance[instance.id].error_message}
                        </p>
                      ) : null}
                    </div>
                    <div className="flex flex-col gap-2">
                      <button
                        onClick={() => onTestConnection(instance.id)}
                        disabled={loading}
                        className="rounded border px-3 py-1.5 text-xs"
                      >
                        Test Connection
                      </button>
                      <button
                        onClick={() => onSync(instance.id)}
                        disabled={loading}
                        className="rounded border px-3 py-1.5 text-xs"
                      >
                        Sync Now
                      </button>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Subscription Action</label>
            <select
              value={actionSubId}
              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                setActionSubId(e.target.value)
              }
              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
            >
              {subscriptions.map((subscription) => (
                <option key={subscription.id} value={subscription.id}>
                  {subscription.name ?? subscription.plesk_subscription_id}
                </option>
              ))}
            </select>
            <select
              value={actionType}
              onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                setActionType(e.target.value as "suspend" | "unsuspend")
              }
              className="w-full rounded border border-slate-300 px-3 py-2 text-sm"
            >
              <option value="suspend">Suspend</option>
              <option value="unsuspend">Unsuspend</option>
            </select>
            <button
              onClick={onSubscriptionAction}
              disabled={loading || !actionSubId}
              className="rounded border px-3 py-2 text-sm"
            >
              Execute Action
            </button>
          </div>

          <div className="flex gap-2 pt-2">
            <button
              onClick={onCheckout}
              disabled={loading}
              className="rounded bg-brand-600 px-3 py-2 text-sm text-white"
            >
              Start Checkout
            </button>
            <button
              onClick={onPortal}
              disabled={loading}
              className="rounded border px-3 py-2 text-sm"
            >
              Billing Portal
            </button>
          </div>

          {message ? <p className="text-sm text-slate-600">{message}</p> : null}
        </div>

        <div className="space-y-3 rounded-xl border border-slate-200 bg-white p-4 lg:col-span-2">
          <div className="flex flex-wrap items-end gap-2">
            <div className="flex-1 min-w-[220px]">
              <label className="text-sm font-medium">Search domains</label>
              <input
                value={domainSearch}
                onChange={(e: ChangeEvent<HTMLInputElement>) =>
                  setDomainSearch(e.target.value)
                }
                className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
                placeholder="Search by domain or hosting type"
              />
            </div>
            <div className="min-w-[180px]">
              <label className="text-sm font-medium">Status filter</label>
              <select
                value={domainStatus}
                onChange={(e: ChangeEvent<HTMLSelectElement>) =>
                  setDomainStatus(e.target.value)
                }
                className="mt-1 w-full rounded border border-slate-300 px-3 py-2 text-sm"
              >
                <option value="all">All statuses</option>
                {domainStatusOptions.map((status) => (
                  <option key={status} value={status}>
                    {status}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead>
                <tr className="border-b border-slate-200 text-xs uppercase text-slate-500">
                  <th className="px-2 py-2">Domain</th>
                  <th className="px-2 py-2">Subscription Status</th>
                  <th className="px-2 py-2">Hosting</th>
                  <th className="px-2 py-2">Created</th>
                  <th className="px-2 py-2">Aliases</th>
                  <th className="px-2 py-2">Last seen</th>
                  <th className="px-2 py-2">Actions</th>
                </tr>
              </thead>
              <tbody>
                {filteredDomains.length === 0 ? (
                  <tr>
                    <td className="px-2 py-3 text-slate-500" colSpan={7}>
                      No domains found.
                    </td>
                  </tr>
                ) : (
                  filteredDomains.map((domain) => (
                    <tr key={domain.id} className="border-b border-slate-100">
                      <td className="px-2 py-2 font-medium text-slate-900">
                        <a
                          href={getDomainHref(domain.domain_name)}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="underline decoration-slate-300 underline-offset-2 hover:text-brand-700"
                        >
                          {domain.domain_name}
                        </a>
                        {domain.subscription_id ? (
                          <p
                            className="text-xs font-normal text-slate-500"
                            title={`Subscription UUID: ${domain.subscription_id}`}
                          >
                            Subscription: {domain.subscription_name ?? "Linked"}
                          </p>
                        ) : (
                          <p
                            className="text-xs font-normal text-amber-700"
                            title="Run sync to link this domain to a subscription"
                          >
                            Subscription: Unlinked
                          </p>
                        )}
                      </td>
                      <td className="px-2 py-2">
                        <span
                          className={`inline-flex rounded px-2 py-0.5 text-xs font-medium ${getDomainStatusBadge(domain.status)}`}
                        >
                          {formatDomainStatusLabel(domain.status)}
                        </span>
                      </td>
                      <td className="px-2 py-2">
                        {domain.hosting_type ?? "unknown"}
                      </td>
                      <td className="px-2 py-2">
                        {formatDateTime(domain.source_created_at)}
                      </td>
                      <td className="px-2 py-2">{domain.aliases_count ?? 0}</td>
                      <td className="px-2 py-2">
                        {formatDateTime(domain.updated_at)}
                      </td>
                      <td className="px-2 py-2">
                        <div className="flex gap-2">
                          <button
                            onClick={() => onDomainAction(domain, "suspend")}
                            disabled={
                              loading ||
                              !domain.subscription_id ||
                              isDomainSuspended(domain.status)
                            }
                            title={
                              !domain.subscription_id
                                ? "Not linked to a subscription yet — run sync"
                                : undefined
                            }
                            className="rounded border border-rose-300 px-2 py-1 text-xs text-rose-700 disabled:cursor-not-allowed disabled:opacity-60"
                          >
                            Suspend
                          </button>
                          <button
                            onClick={() => onDomainAction(domain, "unsuspend")}
                            disabled={
                              loading ||
                              !domain.subscription_id ||
                              isDomainActive(domain.status)
                            }
                            title={
                              !domain.subscription_id
                                ? "Not linked to a subscription yet — run sync"
                                : undefined
                            }
                            className="rounded border border-emerald-300 px-2 py-1 text-xs text-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
                          >
                            Unsuspend
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </section>
  );
}