"use client";

import { useEffect, useState } from "react";
import { useLang } from "@/context/LanguageContext";
import { Alert, Button, Input, Spinner, StatusBadge, Textarea } from "@/components/ui";
import { api, useApi } from "@/lib/client";
import { formatNumber } from "@/lib/utils";
import { IconActivity, IconSettings } from "@/components/icons";

interface AnalyticsView {
  measurementId: string | null;
  propertyId: string | null;
  clientEmail: string | null;
  hasKey: boolean;
  active: boolean;
}

interface AnalyticsStats {
  activeUsers: number;
  sessions: number;
  pageViews: number;
  bounceRatePct: number;
  avgSessionDurationSec: number;
  topPages: Array<{ path: string; views: number }>;
  topCountries: Array<{ country: string; users: number }>;
}

function fmtDuration(sec: number): string {
  const m = Math.floor(sec / 60);
  const s = sec % 60;
  return `${m}m ${String(s).padStart(2, "0")}s`;
}

/** Central → Accounts → Google Analytics control panel:
    connection settings plus live GA4 Data API reports. */
export default function AnalyticsCard() {
  const { t, locale } = useLang();
  const a = t.analytics;
  const { data, loading, reload } = useApi<{ analytics: AnalyticsView | null }>("/api/central/analytics");

  const [measurementId, setMeasurementId] = useState("");
  const [propertyId, setPropertyId] = useState("");
  const [clientEmail, setClientEmail] = useState("");
  const [privateKey, setPrivateKey] = useState("");
  const [active, setActive] = useState(true);
  const [saving, setSaving] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

  const [stats, setStats] = useState<AnalyticsStats | null>(null);
  const [statsError, setStatsError] = useState<string | null>(null);
  const [loadingStats, setLoadingStats] = useState(false);

  useEffect(() => {
    if (data?.analytics) {
      const v = data.analytics;
      setMeasurementId(v.measurementId ?? "");
      setPropertyId(v.propertyId ?? "");
      setClientEmail(v.clientEmail ?? "");
      setActive(v.active);
    }
  }, [data]);

  async function save() {
    setSaving(true);
    setMessage(null);
    try {
      await api("/api/central/analytics", {
        method: "PUT",
        body: JSON.stringify({ measurementId, propertyId, clientEmail, privateKey, active }),
      });
      setMessage({ type: "success", text: a.saved });
      setPrivateKey("");
      reload();
    } catch (err) {
      const code = err instanceof Error ? err.message : "";
      setMessage({
        type: "error",
        text:
          code === "INVALID_MEASUREMENT_ID"
            ? `${a.measurementId}: G-XXXXXXXXXX`
            : code === "INVALID_PROPERTY_ID"
              ? a.propertyHint
              : code === "INVALID_CLIENT_EMAIL"
                ? a.clientHint
                : t.common.tryAgain,
      });
    } finally {
      setSaving(false);
    }
  }

  async function loadStats() {
    setLoadingStats(true);
    setStatsError(null);
    try {
      const res = await api<{ stats: AnalyticsStats | null; statsError?: string }>(
        "/api/central/analytics?stats=1"
      );
      if (res.stats) {
        setStats(res.stats);
      } else {
        setStats(null);
        setStatsError(res.statsError === "NOT_CONFIGURED" ? a.notConfigured : a.statsFailed);
      }
    } catch {
      setStatsError(a.statsFailed);
    } finally {
      setLoadingStats(false);
    }
  }

  if (loading) {
    return (
      <div className="card">
        <div className="card-body d-flex justify-content-center py-4">
          <Spinner />
        </div>
      </div>
    );
  }

  const configured = Boolean(data?.analytics?.propertyId && data?.analytics?.hasKey && data?.analytics?.clientEmail);

  return (
    <div className="card">
      <div className="card-header d-flex align-items-center justify-content-between">
        <div>
          <h5 className="mb-0 f-w-700">{a.title}</h5>
          <p className="mb-0 ems-fs-12 text-muted">{a.subtitle}</p>
        </div>
        <div className="d-flex align-items-center gap-2">
          <StatusBadge
            status={data?.analytics?.active && configured ? "ACTIVE" : "SUSPENDED"}
            label={data?.analytics?.active && configured ? t.common.active : t.common.inactive}
          />
          <IconSettings className="svg-20 text-muted" />
        </div>
      </div>

      {message && (
        <div className="px-3 pt-3">
          <Alert type={message.type} onClose={() => setMessage(null)}>{message.text}</Alert>
        </div>
      )}

      <div className="card-body pt-2">
        {/* live statistics */}
        <div className="mb-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
          <h6 className="mb-0 f-w-700 ems-fs-13">
            {a.statsTitle}
            <IconActivity className="svg-14 ms-2 text-muted" />
          </h6>
          <Button size="sm" variant="secondary" loading={loadingStats} onClick={loadStats}>
            {a.loadStats}
          </Button>
        </div>

        {loadingStats ? (
          <div className="text-center py-4">
            <Spinner />
          </div>
        ) : statsError ? (
          <p className="ems-fs-12 text-muted mb-3">{statsError}</p>
        ) : stats ? (
          <>
            <div className="row g-2 mb-3">
              {([
                [a.activeUsers, formatNumber(stats.activeUsers, locale)],
                [a.sessions, formatNumber(stats.sessions, locale)],
                [a.pageViews, formatNumber(stats.pageViews, locale)],
                [a.bounceRate, `${formatNumber(stats.bounceRatePct, locale)}%`],
                [a.avgDuration, fmtDuration(stats.avgSessionDurationSec)],
              ] as const).map(([label, value]) => (
                <div className="col" key={label}>
                  <div className="border rounded-3 px-2 py-2 text-center">
                    <p className="mb-0 ems-fs-11 text-muted text-truncate">{label}</p>
                    <p className="mb-0 f-w-800 ems-fs-15">{value}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="row g-3">
              <div className="col-md-6">
                <p className="ems-fs-11 f-w-800 text-uppercase text-muted mb-1">{a.topPages}</p>
                {stats.topPages.length === 0 ? (
                  <p className="ems-fs-12 text-muted mb-0">{a.noData}</p>
                ) : (
                  <ul className="list-unstyled ems-fs-12 mb-0">
                    {stats.topPages.map((pg) => (
                      <li key={pg.path} className="d-flex justify-content-between border-bottom py-1">
                        <span className="text-truncate me-2">{pg.path}</span>
                        <span className="f-w-700 text-nowrap">
                          {formatNumber(pg.views, locale)} {a.views}
                        </span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
              <div className="col-md-6">
                <p className="ems-fs-11 f-w-800 text-uppercase text-muted mb-1">{a.topCountries}</p>
                {stats.topCountries.length === 0 ? (
                  <p className="ems-fs-12 text-muted mb-0">{a.noData}</p>
                ) : (
                  <ul className="list-unstyled ems-fs-12 mb-0">
                    {stats.topCountries.map((c) => (
                      <li key={c.country} className="d-flex justify-content-between border-bottom py-1">
                        <span>{c.country}</span>
                        <span className="f-w-700">
                          {formatNumber(c.users, locale)} {a.users}
                        </span>
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          </>
        ) : (
          <p className="ems-fs-12 text-muted mb-3">{a.notConfigured}</p>
        )}

        {/* connection settings */}
        <div className="border-top pt-3 mt-3">
          <div className="row g-3">
            <div className="col-md-6">
              <Input
                label={a.measurementId}
                value={measurementId}
                placeholder="G-XXXXXXXXXX"
                onChange={(e) => setMeasurementId(e.target.value)}
              />
              <p className="ems-fs-11 text-muted mb-0 mt-1">{a.measurementHint}</p>
            </div>
            <div className="col-md-6">
              <Input
                label={a.propertyId}
                value={propertyId}
                placeholder="123456789"
                onChange={(e) => setPropertyId(e.target.value)}
              />
              <p className="ems-fs-11 text-muted mb-0 mt-1">{a.propertyHint}</p>
            </div>
            <div className="col-12">
              <Input
                label={a.clientEmail}
                value={clientEmail}
                placeholder="ems-analytics@project-id.iam.gserviceaccount.com"
                onChange={(e) => setClientEmail(e.target.value)}
              />
              <p className="ems-fs-11 text-muted mb-0 mt-1">{a.clientHint}</p>
            </div>
            <div className="col-12">
              <Textarea
                label={a.privateKey}
                value={privateKey}
                placeholder={data?.analytics?.hasKey ? a.keyPlaceholder : "-----BEGIN PRIVATE KEY-----\\n…"}
                onChange={(e) => setPrivateKey(e.target.value)}
              />
            </div>
          </div>
          <div className="d-flex flex-wrap align-items-center justify-content-between gap-2 pt-3">
            <div className="form-check form-switch mb-0">
              <input
                className="form-check-input"
                type="checkbox"
                role="switch"
                id="ga-active"
                checked={active}
                onChange={(e) => setActive(e.target.checked)}
              />
              <label className="form-check-label ems-fs-12 f-w-600" htmlFor="ga-active">
                {a.activeLabel}
              </label>
            </div>
            <Button loading={saving} onClick={save}>{t.common.save}</Button>
          </div>
          <p className="ems-fs-11 text-muted mb-0 mt-2">{a.setupGuide}</p>
        </div>
      </div>
    </div>
  );
}