"use client";

import { useEffect, useId, useState, type ReactNode } from "react";
import { Button } from "@/components/Button";
import { SocialProviderIcon } from "@/components/dashboard/SocialProviderIcon";
import { cn } from "@/lib/cn";
import { formatFollowerCount } from "@/lib/format";
import { accountDisplayName, socialProviderLabel } from "@/lib/social-providers";
import {
  reconnectStatusLabel,
  socialAccountNeedsReconnect,
} from "@/lib/social-auth-failure";
import { reconnectSyncingMessage } from "@/lib/social-oauth-return";
import { StatusBadge } from "@/components/ui/StatusBadge";
import {
  SOCIAL_ACCOUNT_CARD_METRIC_LABELS,
  cardMetricDisplay,
  type SocialAccountCardViewModel,
} from "@/lib/social-account-card-metrics";
import type { SocialAccount } from "@/types/social-account";

function isDisplayableImage(value: string): boolean {
  return /^(https?:\/\/|\/|blob:)/i.test(value.trim());
}

export function SocialAccountAvatar({
  account,
  size = "default",
}: {
  account: SocialAccount;
  size?: "default" | "sm";
}) {
  const src = account.profile_image_url?.trim() ?? "";
  const [failed, setFailed] = useState(false);
  const showImage = Boolean(src) && isDisplayableImage(src) && !failed;
  const sizeClass = size === "sm" ? "size-8" : "size-9";

  useEffect(() => {
    setFailed(false);
  }, [src]);

  return (
    <span
      className={cn(
        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg text-primary",
        sizeClass,
      )}
    >
      {showImage ? (
        <img
          src={src}
          alt=""
          className="size-full object-cover"
          onError={() => setFailed(true)}
        />
      ) : (
        <SocialProviderIcon provider={account.provider} className={size === "sm" ? "size-4" : "size-[1.125rem]"} />
      )}
    </span>
  );
}

export function ViewProfileLink({
  href,
  compact = false,
}: {
  href: string;
  compact?: boolean;
}) {
  return (
    <Button
      href={href}
      variant="secondary"
      size="sm"
      target="_blank"
      rel="noopener noreferrer"
      className={cn(compact && "w-full sm:w-auto")}
    >
      View
    </Button>
  );
}

export function DisconnectConfirmDialog({
  providerLabel,
  busy,
  onCancel,
  onConfirm,
}: {
  providerLabel: string;
  busy: boolean;
  onCancel: () => void;
  onConfirm: () => void;
}) {
  const titleId = useId();
  const descriptionId = useId();

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-primary/40 p-4 sm:items-center">
      <div
        role="dialog"
        aria-modal="true"
        aria-labelledby={titleId}
        aria-describedby={descriptionId}
        className="w-full max-w-sm rounded-pv border border-line bg-surface p-4"
      >
        <h2 id={titleId} className="text-[0.9375rem] font-semibold text-primary">
          Disconnect {providerLabel}?
        </h2>
        <p id={descriptionId} className="mt-1 text-[0.8125rem] text-ink-60">
          This removes the connection from Postvertise and deletes stored access credentials and
          synced metrics/content for this account. It does not delete your account on {providerLabel}.
        </p>
        <div className="mt-4 flex flex-col gap-2 sm:flex-row sm:justify-end">
          <Button type="button" variant="secondary" size="sm" disabled={busy} onClick={onCancel}>
            Cancel
          </Button>
          <Button type="button" size="sm" disabled={busy} onClick={onConfirm}>
            {busy ? "Disconnecting…" : "Disconnect"}
          </Button>
        </div>
      </div>
    </div>
  );
}

export function ConnectedAccountChip({ account }: { account: SocialAccount }) {
  const label = socialProviderLabel(account.provider);
  const followers = formatFollowerCount(account.followers_count);
  const handle = account.username ? `@${account.username}` : accountDisplayName(account);
  const accessibleLabel =
    followers !== null
      ? `${label}, ${handle}, ${followers} followers`
      : `${label}, ${handle}`;

  const chipClassName =
    "inline-flex items-center gap-1.5 rounded-pv border border-line bg-bg px-2.5 py-1.5 text-[0.8125rem] transition hover:border-primary/40 hover:bg-surface";

  const inner = (
    <>
      <SocialProviderIcon provider={account.provider} className="size-4 shrink-0" />
      <span className="font-medium text-primary">{label}</span>
      <span className="text-ink-40" aria-hidden="true">
        ·
      </span>
      <span className="tabular-nums text-ink-60">{followers !== null ? followers : "—"}</span>
    </>
  );

  if (account.profile_url) {
    return (
      <a
        href={account.profile_url}
        target="_blank"
        rel="noopener noreferrer"
        className={chipClassName}
        aria-label={accessibleLabel}
        title={handle}
      >
        {inner}
      </a>
    );
  }

  return (
    <span className={chipClassName} aria-label={accessibleLabel} title={handle}>
      {inner}
    </span>
  );
}

export function ConnectedAccountSummary({
  account,
  actions,
  postReconnectSyncing = false,
}: {
  account: SocialAccount;
  actions?: ReactNode;
  postReconnectSyncing?: boolean;
}) {
  const followersLabel = formatFollowerCount(account.followers_count);
  const needsReconnect = socialAccountNeedsReconnect(account);

  return (
    <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div className="flex min-w-0 items-center gap-2.5">
        <SocialAccountAvatar account={account} />
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
            <p className="truncate text-[0.8125rem] font-semibold text-primary">
              {socialProviderLabel(account.provider)}
            </p>
            {postReconnectSyncing ? (
              <StatusBadge variant="accent" pulse>
                Syncing
              </StatusBadge>
            ) : needsReconnect ? (
              <StatusBadge variant="warning">{reconnectStatusLabel()}</StatusBadge>
            ) : account.sync_status === "pending" ? (
              <StatusBadge variant="accent" pulse>
                Syncing
              </StatusBadge>
            ) : account.sync_status === "failed" ? (
              <StatusBadge variant="error">Sync failed</StatusBadge>
            ) : (
              <StatusBadge variant="success">Connected</StatusBadge>
            )}
          </div>
          <p className="truncate text-[0.8125rem] text-ink-60">{accountDisplayName(account)}</p>
          {postReconnectSyncing ? (
            <p className="mt-0.5 text-[0.75rem] text-ink-60">
              {reconnectSyncingMessage(account.provider)}
            </p>
          ) : needsReconnect ? (
            <p className="mt-0.5 text-[0.75rem] text-ink-60">
              Authorization expired. Reconnect to resume syncing.
            </p>
          ) : followersLabel ? (
            <p className="mt-0.5 text-[0.75rem] font-medium tabular-nums text-primary">
              {followersLabel} followers
            </p>
          ) : null}
        </div>
      </div>
      {actions ? <div className="flex min-w-0 flex-wrap gap-2 sm:shrink-0">{actions}</div> : null}
    </div>
  );
}

function CardMetric({
  label,
  display,
  unavailable,
}: {
  label: string;
  display: string;
  unavailable: boolean;
}) {
  return (
    <div className="min-w-0">
      <dt className="text-[0.6875rem] font-medium uppercase tracking-[0.06em] text-ink-40">{label}</dt>
      <dd
        className={cn(
          "mt-1 tabular-nums tracking-[-0.02em]",
          unavailable
            ? "text-[0.8125rem] font-normal text-ink-40"
            : "text-[1.0625rem] font-semibold text-primary",
        )}
      >
        {display}
      </dd>
    </div>
  );
}

/**
 * Connected-account card shared by Social Accounts and Analytics.
 * Shows identity, verified badge, and synced overview metrics.
 */
export function ConnectedSocialAccountCard({
  account,
  metrics,
  actions,
  postReconnectSyncing = false,
}: {
  account: SocialAccount;
  metrics: SocialAccountCardViewModel;
  actions?: ReactNode;
  postReconnectSyncing?: boolean;
}) {
  const needsReconnect = socialAccountNeedsReconnect(account);
  const avatarAccount: SocialAccount = {
    ...account,
    profile_image_url: metrics.profileImageUrl,
    profile_url: metrics.profileUrl,
  };

  return (
    <article className="rounded-pv border border-line bg-surface p-4">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div className="flex min-w-0 items-start gap-3">
          <SocialAccountAvatar account={avatarAccount} />
          <div className="min-w-0">
            <div className="flex flex-wrap items-center gap-2">
              <p className="truncate text-[0.9375rem] font-semibold tracking-[-0.01em] text-primary">
                {metrics.usernameDisplay}
              </p>
              {metrics.isVerified ? (
                <StatusBadge variant="success">Verified</StatusBadge>
              ) : null}
            </div>
            <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1">
              <p className="text-[0.8125rem] font-medium text-ink-60">
                {socialProviderLabel(account.provider)}
              </p>
              {postReconnectSyncing ? (
                <StatusBadge variant="accent" pulse>
                  Syncing
                </StatusBadge>
              ) : needsReconnect ? (
                <StatusBadge variant="warning">{reconnectStatusLabel()}</StatusBadge>
              ) : account.sync_status === "pending" ? (
                <StatusBadge variant="accent" pulse>
                  Syncing
                </StatusBadge>
              ) : account.sync_status === "failed" ? (
                <StatusBadge variant="error">Sync failed</StatusBadge>
              ) : (
                <StatusBadge variant="success">Connected</StatusBadge>
              )}
            </div>
            {postReconnectSyncing ? (
              <p className="mt-1.5 text-[0.75rem] text-ink-60">
                {reconnectSyncingMessage(account.provider)}
              </p>
            ) : needsReconnect ? (
              <p className="mt-1.5 text-[0.75rem] text-ink-60">
                Authorization expired. Reconnect to resume syncing.
              </p>
            ) : null}
            {metrics.profileUrl ? (
              <a
                href={metrics.profileUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-2 inline-flex items-center gap-1 text-[0.8125rem] font-medium text-accent underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
              >
                View Profile
                <span aria-hidden="true">↗</span>
              </a>
            ) : (
              <p className="mt-2 text-[0.8125rem] text-ink-40">Profile URL unavailable</p>
            )}
          </div>
        </div>

        {actions ? (
          <div className="flex min-w-0 flex-wrap gap-2 sm:shrink-0 sm:justify-end">{actions}</div>
        ) : null}
      </div>

      <dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-3 border-t border-line pt-4 sm:grid-cols-3">
        {metrics.visibleMetrics.map((key) => {
          const metric = cardMetricDisplay(metrics, key);
          return (
            <CardMetric
              key={key}
              label={SOCIAL_ACCOUNT_CARD_METRIC_LABELS[key]}
              display={metric.display}
              unavailable={metric.unavailable}
            />
          );
        })}
      </dl>
    </article>
  );
}