orchard/frontend/src/components/AccessManagement.tsx

import { useState, useEffect, useCallback } from 'react';
import { AccessPermission, AccessLevel } from '../types';
import {
  listProjectPermissions,
  grantProjectAccess,
  updateProjectAccess,
  revokeProjectAccess,
} from '../api';
import './AccessManagement.css';

interface AccessManagementProps {
  projectName: string;
}

export function AccessManagement({ projectName }: AccessManagementProps) {
  const [permissions, setPermissions] = useState<AccessPermission[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  // Form state
  const [showAddForm, setShowAddForm] = useState(false);
  const [newUsername, setNewUsername] = useState('');
  const [newLevel, setNewLevel] = useState<AccessLevel>('read');
  const [newExpiresAt, setNewExpiresAt] = useState('');
  const [submitting, setSubmitting] = useState(false);

  // Edit state
  const [editingUser, setEditingUser] = useState<string | null>(null);
  const [editLevel, setEditLevel] = useState<AccessLevel>('read');
  const [editExpiresAt, setEditExpiresAt] = useState('');

  const loadPermissions = useCallback(async () => {
    try {
      setLoading(true);
      const data = await listProjectPermissions(projectName);
      setPermissions(data);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load permissions');
    } finally {
      setLoading(false);
    }
  }, [projectName]);

  useEffect(() => {
    loadPermissions();
  }, [loadPermissions]);

  const handleGrant = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newUsername.trim()) return;

    try {
      setSubmitting(true);
      setError(null);
      await grantProjectAccess(projectName, {
        username: newUsername.trim(),
        level: newLevel,
        expires_at: newExpiresAt || undefined,
      });
      setSuccess(`Access granted to ${newUsername}`);
      setNewUsername('');
      setNewLevel('read');
      setNewExpiresAt('');
      setShowAddForm(false);
      await loadPermissions();
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to grant access');
    } finally {
      setSubmitting(false);
    }
  };

  const handleUpdate = async (username: string) => {
    try {
      setSubmitting(true);
      setError(null);
      await updateProjectAccess(projectName, username, {
        level: editLevel,
        expires_at: editExpiresAt || null,
      });
      setSuccess(`Updated access for ${username}`);
      setEditingUser(null);
      await loadPermissions();
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to update access');
    } finally {
      setSubmitting(false);
    }
  };

  const handleRevoke = async (username: string) => {
    if (!confirm(`Revoke access for ${username}?`)) return;

    try {
      setSubmitting(true);
      setError(null);
      await revokeProjectAccess(projectName, username);
      setSuccess(`Access revoked for ${username}`);
      await loadPermissions();
      setTimeout(() => setSuccess(null), 3000);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to revoke access');
    } finally {
      setSubmitting(false);
    }
  };

  const startEdit = (permission: AccessPermission) => {
    setEditingUser(permission.user_id);
    setEditLevel(permission.level as AccessLevel);
    // Convert ISO date to local date format for date input
    setEditExpiresAt(permission.expires_at ? permission.expires_at.split('T')[0] : '');
  };

  const cancelEdit = () => {
    setEditingUser(null);
    setEditExpiresAt('');
  };

  const formatExpiration = (expiresAt: string | null) => {
    if (!expiresAt) return 'Never';
    const date = new Date(expiresAt);
    const now = new Date();
    const isExpired = date < now;
    return (
      <span className={isExpired ? 'expired' : ''}>
        {date.toLocaleDateString()}
        {isExpired && ' (Expired)'}
      </span>
    );
  };

  if (loading) {
    return <div className="access-management loading">Loading permissions...</div>;
  }

  return (
    <div className="access-management card">
      <div className="access-management__header">
        <h3>Access Management</h3>
        <button
          className="btn btn-primary btn-sm"
          onClick={() => setShowAddForm(!showAddForm)}
        >
          {showAddForm ? 'Cancel' : '+ Add User'}
        </button>
      </div>

      {error && <div className="error-message">{error}</div>}
      {success && <div className="success-message">{success}</div>}

      {showAddForm && (
        <form className="access-management__form" onSubmit={handleGrant}>
          <div className="form-row">
            <div className="form-group">
              <label htmlFor="username">Username</label>
              <input
                id="username"
                type="text"
                value={newUsername}
                onChange={(e) => setNewUsername(e.target.value)}
                placeholder="Enter username"
                required
                disabled={submitting}
              />
            </div>
            <div className="form-group">
              <label htmlFor="level">Access Level</label>
              <select
                id="level"
                value={newLevel}
                onChange={(e) => setNewLevel(e.target.value as AccessLevel)}
                disabled={submitting}
              >
                <option value="read">Read</option>
                <option value="write">Write</option>
                <option value="admin">Admin</option>
              </select>
            </div>
            <div className="form-group">
              <label htmlFor="expires_at">Expires (optional)</label>
              <input
                id="expires_at"
                type="date"
                value={newExpiresAt}
                onChange={(e) => setNewExpiresAt(e.target.value)}
                disabled={submitting}
                min={new Date().toISOString().split('T')[0]}
              />
            </div>
            <button type="submit" className="btn btn-primary" disabled={submitting}>
              {submitting ? 'Granting...' : 'Grant Access'}
            </button>
          </div>
        </form>
      )}

      <div className="access-management__list">
        {permissions.length === 0 ? (
          <p className="text-muted">No explicit permissions set. Only the project owner has access.</p>
        ) : (
          <table className="access-table">
            <thead>
              <tr>
                <th>User</th>
                <th>Access Level</th>
                <th>Source</th>
                <th>Granted</th>
                <th>Expires</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {permissions.map((p) => {
                const isTeamBased = p.source === 'team';
                return (
                  <tr key={p.id} className={isTeamBased ? 'team-access-row' : ''}>
                    <td>{p.user_id}</td>
                    <td>
                      {editingUser === p.user_id && !isTeamBased ? (
                        <select
                          value={editLevel}
                          onChange={(e) => setEditLevel(e.target.value as AccessLevel)}
                          disabled={submitting}
                        >
                          <option value="read">Read</option>
                          <option value="write">Write</option>
                          <option value="admin">Admin</option>
                        </select>
                      ) : (
                        <span className={`access-badge access-badge--${p.level}`}>
                          {p.level}
                        </span>
                      )}
                    </td>
                    <td>
                      {isTeamBased ? (
                        <span className="access-source access-source--team" title={`Team role: ${p.team_role}`}>
                          Team: {p.team_slug}
                        </span>
                      ) : (
                        <span className="access-source access-source--explicit">
                          Explicit
                        </span>
                      )}
                    </td>
                    <td>{new Date(p.created_at).toLocaleDateString()}</td>
                    <td>
                      {editingUser === p.user_id && !isTeamBased ? (
                        <input
                          type="date"
                          value={editExpiresAt}
                          onChange={(e) => setEditExpiresAt(e.target.value)}
                          disabled={submitting}
                          min={new Date().toISOString().split('T')[0]}
                        />
                      ) : (
                        formatExpiration(p.expires_at)
                      )}
                    </td>
                    <td className="actions">
                      {isTeamBased ? (
                        <span className="text-muted" title="Manage access via team settings">
                          Via team
                        </span>
                      ) : editingUser === p.user_id ? (
                        <>
                          <button
                            className="btn btn-sm btn-primary"
                            onClick={() => handleUpdate(p.user_id)}
                            disabled={submitting}
                          >
                            Save
                          </button>
                          <button
                            className="btn btn-sm"
                            onClick={cancelEdit}
                            disabled={submitting}
                          >
                            Cancel
                          </button>
                        </>
                      ) : (
                        <>
                          <button
                            className="btn btn-sm"
                            onClick={() => startEdit(p)}
                            disabled={submitting}
                          >
                            Edit
                          </button>
                          <button
                            className="btn btn-sm btn-danger"
                            onClick={() => handleRevoke(p.user_id)}
                            disabled={submitting}
                          >
                            Revoke
                          </button>
                        </>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}