"use client";

import { removeOrganizationIcon } from "@/actions/organization/remove-icon";
import { uploadOrganizationIcon } from "@/actions/organization/upload-organization-icon";
import { FileInput } from "@/components/FileInput";
import { CardDescription, Label } from "@cap/ui";
import { useState } from "react";
import { toast } from "sonner";
import { useDashboardContext } from "../../../Contexts";

export const OrganizationIcon = () => {
  const { activeOrganization } = useDashboardContext();
  const organizationId = activeOrganization?.organization.id;
  const existingIconUrl = activeOrganization?.organization.iconUrl;

  const [isUploading, setIsUploading] = useState(false);

  const handleFileChange = async (file: File | null) => {
    // If file is null, it means the user removed the file
    if (!file || !organizationId) return;

    // Upload the file to the server immediately
    try {
      setIsUploading(true);
      const formData = new FormData();
      formData.append("file", file);

      const result = await uploadOrganizationIcon(formData, organizationId);

      if (result.success) {
        toast.success("Organization icon updated successfully");
      }
    } catch (error) {
      console.error("Error uploading organization icon:", error);
      toast.error(
        error instanceof Error ? error.message : "Failed to upload icon"
      );
    } finally {
      setIsUploading(false);
    }
  };

  const handleRemoveIcon = async () => {
    if (!organizationId) return;

    try {
      const result = await removeOrganizationIcon(organizationId);

      if (result.success) {
        toast.success("Organization icon removed successfully");
      }
    } catch (error) {
      console.error("Error removing organization icon:", error);
      toast.error(
        error instanceof Error ? error.message : "Failed to remove icon"
      );
    }
  };

  return (
    <div className="space-y-4">
      <div className="space-y-1">
        <Label htmlFor="icon">Organization Icon</Label>
        <CardDescription className="w-full">
          Upload a custom logo or icon for your organization and make it unique.
        </CardDescription>
      </div>
      <FileInput
        height={62}
        previewIconSize={32}
        id="icon"
        name="icon"
        onChange={handleFileChange}
        disabled={isUploading}
        isLoading={isUploading}
        initialPreviewUrl={existingIconUrl || null}
        onRemove={handleRemoveIcon}
      />
    </div>
  );
};
