import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, ChevronDown, ChevronUp } from 'lucide-react';
import { updateAsset } from '../../../services/assets-api';
import type { Asset, Organization, ShareItem } from '../../../types/assets';

interface ShareAssetModalProps {
  isOpen: boolean;
  onClose: () => void;
  asset: Asset | null;
  organizations: Organization[];
  onSuccess: () => void;
}

export const ShareAssetModal: React.FC<ShareAssetModalProps> = ({
  isOpen,
  onClose,
  asset,
  organizations,
  onSuccess
}) => {
  const [sharesList, setSharesList] = useState<ShareItem[]>([]);
  const [isSavingShare, setIsSavingShare] = useState(false);
  const [expandedOrgId, setExpandedOrgId] = useState<string | null>(null);

  useEffect(() => {
    if (asset) {
      setSharesList(
        asset.sharedWith?.map(s => ({
          organizationId: s.organizationId,
          userId: s.userId
        })) || []
      );
    }
  }, [asset]);

  const isOrgSharedEntirely = (orgId: string) => {
    return sharesList.some(s => s.organizationId === orgId && s.userId === null);
  };

  const isUserSharedSpecifically = (orgId: string, userId: string) => {
    return sharesList.some(s => s.organizationId === orgId && s.userId === userId);
  };

  const handleToggleOrg = (orgId: string) => {
    const isShared = isOrgSharedEntirely(orgId);
    if (isShared) {
      setSharesList(prev => prev.filter(s => s.organizationId !== orgId));
    } else {
      setSharesList(prev => [
        ...prev.filter(s => s.organizationId !== orgId),
        { organizationId: orgId, userId: null }
      ]);
    }
  };

  const handleToggleUser = (orgId: string, userId: string) => {
    const isShared = isUserSharedSpecifically(orgId, userId);
    if (isShared) {
      setSharesList(prev => prev.filter(s => !(s.organizationId === orgId && s.userId === userId)));
    } else {
      setSharesList(prev => [
        ...prev.filter(s => !(s.organizationId === orgId && s.userId === null)),
        { organizationId: orgId, userId }
      ]);
    }
  };

  const handleShareSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!asset) return;

    setIsSavingShare(true);
    try {
      await updateAsset(asset.id, {
        shares: sharesList
      });
      onSuccess();
      onClose();
    } catch (err) {
      console.error('Failed to update share permissions', err);
    } finally {
      setIsSavingShare(false);
    }
  };

  return (
    <AnimatePresence>
      {isOpen && asset && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
            className="absolute inset-0 bg-ink-950/40 backdrop-blur-sm"
          />
          <motion.div 
            initial={{ opacity: 0, scale: 0.95, y: 10 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 10 }}
            className="relative bg-ink-0 border border-ink-200 rounded-2xl p-6 max-w-lg w-full shadow-xl z-10 flex flex-col max-h-[85vh] overflow-hidden"
          >
            <div className="flex justify-between items-center pb-3.5 border-b border-ink-100 flex-shrink-0">
              <div>
                <h3 className="text-lg font-bold text-ink-900">Share Settings</h3>
                <p className="text-xs text-ink-500 mt-0.5">{asset.title}</p>
              </div>
              <button 
                onClick={onClose}
                className="p-1 rounded-lg text-ink-400 hover:text-ink-900 hover:bg-ink-50 transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleShareSubmit} className="flex-1 min-h-0 flex flex-col mt-4">
              <div className="flex-1 overflow-y-auto pr-1 space-y-4 scrollbar-thin">
                <p className="text-xs text-ink-600 leading-relaxed">
                  Select organizations or expand to specify exact users that can access this asset:
                </p>

                <div className="max-h-64 overflow-y-auto border border-ink-200 rounded-xl divide-y divide-ink-250 bg-ink-50 scrollbar-thin">
                  {organizations.length === 0 ? (
                    <p className="p-4 text-xs text-ink-500 text-center font-medium">No partner organizations registered yet.</p>
                  ) : (
                    organizations.map(org => {
                      const isEntireShared = isOrgSharedEntirely(org.id);
                      const isExpanded = expandedOrgId === org.id;
                      const activeUsers = org.users || [];
                      const specificSharedCount = sharesList.filter(s => s.organizationId === org.id && s.userId !== null).length;

                      return (
                        <div key={org.id} className="flex flex-col">
                          <div className="flex items-center justify-between p-3 hover:bg-ink-100 transition-colors">
                            <label className="flex items-center gap-3 cursor-pointer flex-1 select-none">
                              <input 
                                type="checkbox"
                                checked={isEntireShared}
                                onChange={() => handleToggleOrg(org.id)}
                                className="w-4 h-4 rounded border-ink-300 text-ink-900 focus:ring-ink-900/10 cursor-pointer"
                              />
                              <div className="flex flex-col">
                                <span className="text-xs font-bold text-ink-900">{org.name}</span>
                                {specificSharedCount > 0 && !isEntireShared && (
                                  <span className="text-[10px] text-ink-500 font-semibold">
                                    Shared with {specificSharedCount} specific {specificSharedCount === 1 ? 'user' : 'users'}
                                  </span>
                                )}
                              </div>
                            </label>
                            
                            <button
                              type="button"
                              onClick={() => setExpandedOrgId(isExpanded ? null : org.id)}
                              className="p-1 rounded-lg text-ink-400 hover:text-ink-900 hover:bg-ink-200 transition-colors flex items-center gap-1 text-[11px] font-bold"
                            >
                              <span>Users</span>
                              {isExpanded ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
                            </button>
                          </div>

                          <AnimatePresence>
                            {isExpanded && (
                              <motion.div 
                                initial={{ height: 0, opacity: 0 }}
                                animate={{ height: 'auto', opacity: 1 }}
                                exit={{ height: 0, opacity: 0 }}
                                className="bg-ink-100 border-t border-b border-ink-200 overflow-hidden divide-y divide-ink-150"
                              >
                                {activeUsers.length === 0 ? (
                                  <p className="p-3 text-[10px] text-ink-500 italic">No users found in this organization.</p>
                                ) : (
                                  activeUsers.map(userItem => {
                                    const isUserShared = isUserSharedSpecifically(org.id, userItem.id);
                                    
                                    return (
                                      <label key={userItem.id} className="flex items-center gap-3 py-2 px-8 cursor-pointer hover:bg-ink-200/50 transition-all select-none">
                                        <input
                                          type="checkbox"
                                          disabled={isEntireShared}
                                          checked={isEntireShared || isUserShared}
                                          onChange={() => handleToggleUser(org.id, userItem.id)}
                                          className="w-3.5 h-3.5 rounded border-ink-300 text-ink-900 focus:ring-ink-900/10 cursor-pointer disabled:opacity-50"
                                        />
                                        <span className={`text-[11px] font-semibold ${isEntireShared ? 'text-ink-400' : 'text-ink-800'}`}>
                                          {userItem.email}
                                        </span>
                                      </label>
                                    );
                                  })
                                )}
                              </motion.div>
                            )}
                          </AnimatePresence>
                        </div>
                      );
                    })
                  )}
                </div>
              </div>

              <div className="pt-3.5 border-t border-ink-100 flex justify-end gap-3 flex-shrink-0 mt-4">
                <button
                  type="button"
                  onClick={onClose}
                  className="px-4 py-2 rounded-lg border border-ink-200 text-ink-700 text-xs font-bold hover:bg-ink-50 transition-colors"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={isSavingShare}
                  className="px-5 py-2 rounded-lg bg-ink-900 text-ink-0 text-xs font-bold hover:bg-ink-800 transition-colors shadow-sm disabled:opacity-50"
                >
                  {isSavingShare ? 'Saving...' : 'Update Shares'}
                </button>
              </div>
            </form>
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
};