"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import { shareVersionWithClient } from "@/actions/versions";
import { shareWithClient } from "@/actions/shots";
import { Send, CheckCircle2 } from "lucide-react";

interface ShareWithClientButtonProps {
  versionId: string;
  isAlreadyShared?: boolean;
  /**
   * The shot the version belongs to, if any. Sharing is then shot-level —
   * the same action as the shot page's button — because the client portal
   * only lists shots marked sharedWithClient; making just this version
   * visible left the client seeing nothing.
   */
  shot?: { id: string; shotApprovalStatus: string; sharedWithClient: boolean } | null;
  onShared?: () => void;
  size?: "sm" | "default";
}

const SHAREABLE = ["INTERNALLY_APPROVED", "CLIENT_APPROVED"];

export function ShareWithClientButton({
  versionId,
  isAlreadyShared = false,
  shot,
  onShared,
  size = "sm",
}: ShareWithClientButtonProps) {
  const [sharedHere, setSharedHere] = useState(false);
  const [loading, setLoading] = useState(false);
  const { toast } = useToast();

  // Read from props so a refresh after approving or unsharing elsewhere shows.
  const shared = sharedHere || (shot ? shot.sharedWithClient : isAlreadyShared);
  const needsApproval = !!shot && !SHAREABLE.includes(shot.shotApprovalStatus);

  const handleShare = async () => {
    if (shared || needsApproval) return;
    setLoading(true);
    try {
      if (shot) {
        await shareWithClient(shot.id);
        toast({ title: "Shot shared with client", description: "The latest version of each task is now in client review" });
      } else {
        await shareVersionWithClient(versionId);
        toast({ title: "Version shared with client" });
      }
      setSharedHere(true);
      onShared?.();
    } catch (err) {
      toast({
        title: "Failed to share",
        description: (err as Error).message,
        variant: "destructive",
      });
    } finally {
      setLoading(false);
    }
  };

  if (shared) {
    return (
      <Button
        size={size}
        variant="outline"
        disabled
        className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30"
      >
        <CheckCircle2 className="h-3 w-3" />
        <span className="hidden sm:inline">Shared with Client</span>
      </Button>
    );
  }

  const button = (
    <Button
      size={size}
      variant="outline"
      disabled={loading || needsApproval}
      onClick={handleShare}
      className="h-7 text-xs gap-1 text-amber-400 border-amber-500/30 hover:bg-amber-500/10"
    >
      <Send className="h-3 w-3" />
      <span className="hidden sm:inline">{loading ? "Sharing…" : "Share with Client"}</span>
    </Button>
  );

  // A disabled button takes no pointer events, so the explanation sits on a wrapper.
  return needsApproval ? (
    <span title="Approve the shot internally before sharing it with the client" className="inline-flex">
      {button}
    </span>
  ) : (
    button
  );
}