tududi/frontend/components/Project/ProjectShareModal.tsx

import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Project } from '../../entities/Project';
import {
    AccessLevel,
    grantShare,
    listShares,
    revokeShare,
} from '../../utils/sharesService';

interface ProjectShareModalProps {
    isOpen: boolean;
    onClose: () => void;
    project: Project;
}

interface ShareRow {
    user_id: number;
    access_level: AccessLevel;
    created_at: string;
    email?: string; // best-effort; may stay undefined without a lookup API
}

const isValidEmail = (value: string) =>
    /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(value);

const ProjectShareModal: React.FC<ProjectShareModalProps> = ({
    isOpen,
    onClose,
    project,
}) => {
    const { t } = useTranslation();
    const [targetEmail, setTargetEmail] = useState('');
    const [access, setAccess] = useState<AccessLevel>('ro');
    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [rows, setRows] = useState<ShareRow[] | null>(null);
    const [loadingList, setLoadingList] = useState(false);

    const projectUid: string | null = useMemo(() => {
        // Prefer stable uid if present; fallback to id string if needed
        // Share APIs require resource_uid; projects list provides uid
        return (project as any).uid || null;
    }, [project]);

    useEffect(() => {
        if (!isOpen) return;
        setTargetEmail('');
        setAccess('ro');
        setError(null);
        if (!projectUid) return;
        const load = async () => {
            setLoadingList(true);
            try {
                const data = await listShares('project', projectUid);
                setRows(data);
            } catch (err: any) {
                setError(err.message || 'Failed to load shares');
                setRows([]);
            } finally {
                setLoadingList(false);
            }
        };
        load();
    }, [isOpen, projectUid]);

    if (!isOpen) return null;

    const onSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!projectUid) {
            setError(t('errors.generic', 'Something went wrong'));
            return;
        }
        if (!isValidEmail(targetEmail)) {
            setError(t('errors.invalidEmail', 'Invalid email address'));
            return;
        }
        setSubmitting(true);
        try {
            await grantShare({
                resource_type: 'project',
                resource_uid: projectUid,
                target_user_email: targetEmail,
                access_level: access,
            });
            setTargetEmail('');
            // refresh list
            const data = await listShares('project', projectUid);
            setRows(data);
        } catch (err: any) {
            setError(err.message || 'Failed to share');
        } finally {
            setSubmitting(false);
        }
    };

    const onRevoke = async (userId: number) => {
        if (!projectUid) return;
        try {
            await revokeShare('project', projectUid, userId);
            const data = await listShares('project', projectUid);
            setRows(data);
        } catch (err: any) {
            setError(err.message || 'Failed to revoke share');
        }
    };

    const accessLabel = (al: AccessLevel) =>
        al === 'rw'
            ? t('shares.readWrite', 'Read & write')
            : t('shares.readOnly', 'Read only');

    return (
        <div
            className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
            onClick={onClose}
        >
            <div
                className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md"
                onClick={(e) => e.stopPropagation()}
            >
                <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                        {t('projects.shareProject', 'Share project')}
                    </h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1 line-clamp-2">
                        {project?.name}
                    </p>
                </div>
                <form onSubmit={onSubmit} className="px-6 py-4 space-y-4">
                    <div>
                        <label className="block text-sm text-gray-700 dark:text-gray-300 mb-1">
                            {t('shares.targetUser', 'User email')}
                        </label>
                        <input
                            type="email"
                            value={targetEmail}
                            onChange={(e) => setTargetEmail(e.target.value)}
                            className="w-full rounded border px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100"
                            placeholder={
                                t(
                                    'shares.emailPlaceholder',
                                    'name@example.com'
                                )!
                            }
                        />
                    </div>
                    <div>
                        <label className="block text-sm text-gray-700 dark:text-gray-300 mb-1">
                            {t('shares.permission', 'Permission')}
                        </label>
                        <select
                            value={access}
                            onChange={(e) =>
                                setAccess(e.target.value as AccessLevel)
                            }
                            className="w-full rounded border px-3 py-2 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100"
                        >
                            <option value="ro">
                                {t('shares.readOnly', 'Read only')}
                            </option>
                            <option value="rw">
                                {t('shares.readWrite', 'Read & write')}
                            </option>
                        </select>
                    </div>
                    {error && (
                        <div className="text-sm text-red-500">{error}</div>
                    )}
                    <div className="flex justify-end space-x-2 pt-2">
                        <button
                            type="button"
                            onClick={onClose}
                            className="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200"
                        >
                            {t('common.close', 'Close')}
                        </button>
                        <button
                            type="submit"
                            disabled={submitting || !targetEmail}
                            className="px-4 py-2 rounded bg-blue-600 text-white disabled:opacity-60"
                        >
                            {submitting
                                ? t('common.saving', 'Saving...')
                                : t('shares.share', 'Share')}
                        </button>
                    </div>
                </form>
                <div className="px-6 pb-5">
                    <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {t('shares.currentShares', 'Users with access')}
                    </div>
                    <div className="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md max-h-56 overflow-auto">
                        {loadingList ? (
                            <div className="p-3 text-sm text-gray-500">
                                {t('common.loading', 'Loading...')}
                            </div>
                        ) : !rows || rows.length === 0 ? (
                            <div className="p-3 text-sm text-gray-500">
                                {t('shares.noShares', 'Not shared yet')}
                            </div>
                        ) : (
                            <ul className="divide-y divide-gray-200 dark:divide-gray-700">
                                {rows.map((r) => (
                                    <li
                                        key={`${r.user_id}-${r.created_at}`}
                                        className="flex items-center justify-between px-3 py-2"
                                    >
                                        <div>
                                            <div className="text-sm text-gray-900 dark:text-gray-100">
                                                {r.email || `#${r.user_id}`}
                                            </div>
                                            <div className="text-xs text-gray-500">
                                                {accessLabel(r.access_level)}
                                            </div>
                                        </div>
                                        <button
                                            onClick={() => onRevoke(r.user_id)}
                                            className="px-2 py-1 text-xs rounded bg-red-50 text-red-600 border border-red-200 hover:bg-red-100 dark:bg-transparent dark:text-red-400 dark:border-red-500"
                                        >
                                            {t('shares.revoke', 'Revoke')}
                                        </button>
                                    </li>
                                ))}
                            </ul>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ProjectShareModal;