import { useAuth } from '@clerk/nextjs';
import { observer } from 'mobx-react-lite';
import { useEffect, useState } from 'react';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import Modal from '@/components/modal/Modal';
import Selector from '@/components/select/Selector';
import { CheckIcon, CopyIcon } from '@/icons';

import { getModalBaseUrl } from './utils';

export type ChatPermission = 'link-only' | 'read-only';

const ShareChatModal = observer(
  ({
    chatUUID,
    isOpen,
    onClose,
    currentVisibility,
  }: {
    chatUUID: string;
    isOpen: boolean;
    onClose: () => void;
    currentVisibility: ChatPermission;
  }) => {
    const { getToken } = useAuth();

    const [visibility, setVisibility] = useState<string>(currentVisibility);
    const [isLinkedCopied, setIsLinkedCopied] = useState(false);

    useEffect(() => {
      setVisibility(currentVisibility);
    }, [currentVisibility]);

    if (!isOpen) return null;

    const handleCopyLink = async () => {
      try {
        // Generate shareable link for the chat session with permission
        const shareableLink = `${window.location.origin}/chat/${chatUUID}`;
        await navigator.clipboard.writeText(shareableLink);
        setIsLinkedCopied(true);
      } catch (error) {
        console.error('Failed to copy link:', error);
      }
    };

    return (
      <Modal
        title='Share Chat'
        titleClassName='text-2xl font-medium font-sans'
        onClose={() => {
          onClose();
        }}
        wrapperClasses='mb-4'
        withHorizontalPadding
        width={600}
      >
        <div className='space-y-6'>
          {/* General Access Section */}
          <div className='space-y-3'>
            <h4 className='font-medium text-foreground-primary'>
              General access
            </h4>
            <div className='rounded-lg border border-border-primary bg-background-primary p-3'>
              <div className='flex items-center justify-between'>
                <div className='flex items-center space-x-3'>
                  <div>
                    <div className='font-medium text-foreground-primary'>
                      Anyone with the link can:
                    </div>
                  </div>
                </div>
                <div className='flex items-center space-x-2'>
                  <Selector
                    selections={[
                      { name: 'View', key: 'read-only' },
                      { name: 'Collaborate', key: 'link-only' },
                    ]}
                    initialSelection={visibility}
                    onChange={async (key) => {
                      setVisibility(key as ChatPermission);
                      const modalBaseUrl = getModalBaseUrl();
                      const token = await getToken();
                      await fetch(`${modalBaseUrl}/session/${chatUUID}`, {
                        method: 'POST',
                        body: JSON.stringify({
                          metadata_key: 'visibility',
                          metadata_value: key,
                        }),
                        headers: {
                          'Content-Type': 'application/json',
                          Authorization: `Bearer ${token}`,
                        },
                      });
                      // const success = await response.json();
                    }}
                    selectorButtonClassName='bg-background-primary border-border-primary border text-foreground-primary'
                  />
                </div>
              </div>
            </div>
          </div>

          {/* Action Buttons */}
          <div className='flex items-center justify-center border-t border-secondary/20 pt-4'>
            <Button
              iconEnd={isLinkedCopied ? CheckIcon : CopyIcon}
              variant={
                isLinkedCopied ? ButtonVariant.Primary : ButtonVariant.Secondary
              }
              shape={ButtonShape.Pill}
              onClick={handleCopyLink}
              className='whitespace-nowrap'
            >
              {isLinkedCopied ? 'Linked copied' : 'Copy link'}
            </Button>
          </div>
        </div>
      </Modal>
    );
  }
);

export default ShareChatModal;