"use client";

import { useState } from "react";
import type { ChangeEvent } from "react";
import type { FormEvent } from "react";

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;
  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 }
  >;
};

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;
  });

  function formatDate(value: string | null) {
    if (!value) return "—";
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? "—" : date.toLocaleString();
  }

  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 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">
                      Last sync: {formatDate(instance.last_sync_at)}
                      {instance.last_sync_status ? ` (${instance.last_sync_status})` : ""}
                    </p>
                    <p className="text-xs text-slate-500">
                      Last counts: {instance.last_sync_subscriptions ?? 0} subscriptions, {" "}
                      {instance.last_sync_domains ?? 0} domains
                    </p>
                    <p className="text-xs text-slate-500">
                      Last connected: {instance.last_connected_at ?? "never"}
                    </p>
                    {autoSyncByInstance[instance.id] ? (
                      <p className="text-xs text-slate-500">
                        Last auto-sync: {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">
        <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">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>
              </tr>
            </thead>
            <tbody>
              {filteredDomains.length === 0 ? (
                <tr>
                  <td className="px-2 py-3 text-slate-500" colSpan={6}>
                    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">{domain.domain_name}</td>
                    <td className="px-2 py-2">{domain.status ?? "unknown"}</td>
                    <td className="px-2 py-2">{domain.hosting_type ?? "unknown"}</td>
                    <td className="px-2 py-2">{formatDate(domain.source_created_at)}</td>
                    <td className="px-2 py-2">{domain.aliases_count ?? 0}</td>
                    <td className="px-2 py-2">{formatDate(domain.updated_at)}</td>
                  </tr>
                ))
              )}
            </tbody>
          </table>
        </div>
      </div>
      </div>
    </section>
  );
}