import React, { useState } from "react";
import { Check, CheckCircle2, Copy, Settings, User } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// IntegrationServiceCard
// ---------------------------------------------------------------------------

export type IntegrationServiceCardProps = {
  title: string;
  imageUrl?: string;
  iconNode?: React.ReactNode;
  description: string;
  isConnected: boolean;
  /** Not yet available — shows a "Coming Soon" badge and disables the
   * connect click-through. */
  isComingSoon?: boolean;
  onCardClick: () => void;
  onSettingsClick: () => void;
  className?: string;
};

export function IntegrationServiceCard({
  title,
  imageUrl,
  iconNode,
  description,
  isConnected,
  isComingSoon = false,
  onCardClick,
  onSettingsClick,
  className,
}: IntegrationServiceCardProps) {
  const isClickable = !isConnected && !isComingSoon;
  return (
    <Card
      className={cn(
        "flex flex-col gap-3 p-4",
        isClickable && "cursor-pointer transition-colors hover:bg-accent/50",
        className,
      )}
      onClick={isClickable ? onCardClick : undefined}
    >
      <div className="flex items-center gap-2">
        {iconNode ? (
          <span
            className={cn(
              "flex size-6 shrink-0 items-center justify-center [&>img]:size-6 [&>svg]:size-6",
              isComingSoon && "opacity-60",
            )}
          >
            {iconNode}
          </span>
        ) : (
          <Avatar
            className={cn("h-10 w-10 shrink-0", isComingSoon && "opacity-60")}
          >
            {imageUrl && <AvatarImage src={imageUrl} alt={title} />}
            <AvatarFallback>
              <User className="h-5 w-5" />
            </AvatarFallback>
          </Avatar>
        )}

        <div className="flex min-w-0 flex-1 flex-col gap-0.5">
          <div className="flex items-center gap-2">
            <span className="text-label-medium">{title}</span>
            {isConnected && (
              <Badge variant="success" className="gap-1 text-xs">
                <CheckCircle2 className="h-3 w-3" />
                Connected
              </Badge>
            )}
            {!isConnected && isComingSoon && (
              <Badge variant="secondary" className="text-xs">
                Coming Soon
              </Badge>
            )}
          </div>
        </div>

        {isConnected && (
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7 shrink-0"
            onClick={(e) => {
              e.stopPropagation();
              onSettingsClick();
            }}
            aria-label={`Settings for ${title}`}
          >
            <Settings className="h-4 w-4" />
          </Button>
        )}
      </div>

      <p className="text-body-small flex-1 text-muted-foreground">
        {description}
      </p>
    </Card>
  );
}

// ---------------------------------------------------------------------------
// IntegrationInstructionCard
// ---------------------------------------------------------------------------

export type IntegrationInstructionCardProps = {
  title: string;
  codeBlock: string;
  onCopy?: () => void;
  className?: string;
};

export function IntegrationInstructionCard({
  title,
  codeBlock,
  onCopy,
  className,
}: IntegrationInstructionCardProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(codeBlock);
      setCopied(true);
      onCopy?.();
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // clipboard unavailable (non-HTTPS or permissions denied)
    }
  };

  return (
    <Card className={cn("flex flex-col gap-3 p-4", className)}>
      <div className="flex items-center justify-between gap-2">
        <h3 className="text-sm font-semibold">{title}</h3>
        <Button
          variant="outline"
          size="sm"
          className="h-7 gap-1.5 text-xs"
          onClick={handleCopy}
        >
          {copied ? (
            <>
              <Check className="h-3 w-3" />
              Copied
            </>
          ) : (
            <>
              <Copy className="h-3 w-3" />
              Copy
            </>
          )}
        </Button>
      </div>
      <pre className="bg-muted overflow-x-auto p-3 text-xs leading-relaxed">
        <code>{codeBlock}</code>
      </pre>
    </Card>
  );
}