import { Component, createSignal } from 'solid-js';
import { useAuth, UserRole } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';
import { Project } from '../../lib/auth/types';

interface SharingPanelProps {
  project: Project;
}

export const SharingPanel: Component<SharingPanelProps> = (props) => {
  const auth = useAuth();
  const projectService = createProjectService();
  const [email, setEmail] = createSignal('');
  const [role, setRole] = createSignal<UserRole>('editor');

  const handleAddCollaborator = async () => {
    if (!email().trim()) return;

    const userId = `user_${email().toLowerCase().replace(/[^a-z0-9]/g, '')}`;
    await projectService.addCollaborator(props.project.id, userId, role());
    setEmail('');
  };

  const handleRemoveCollaborator = async (userId: string) => {
    await projectService.removeCollaborator(props.project.id, userId);
  };

  return (
    <div class="freno-sharing-panel">
      <div class="freno-share-section">
        <h3>Add Collaborator</h3>
        <div class="freno-add-collaborator">
          <input
            class="freno-input"
            type="email"
            placeholder="Enter email address"
            value={email()}
            onInput={(e) => setEmail(e.target.value)}
          />
          <select class="freno-select" value={role()} onChange={(e) => setRole(e.target.value as UserRole)}>
            <option value="viewer">Viewer</option>
            <option value="editor">Editor</option>
            <option value="admin">Admin</option>
          </select>
          <button class="freno-btn freno-btn-primary" onClick={handleAddCollaborator}>
            Invite
          </button>
        </div>
      </div>

      <div class="freno-share-section">
        <h3>Collaborators</h3>
        <div class="freno-collaborator-list">
          <div class="freno-collaborator-item freno-collaborator-owner">
            <div class="freno-avatar">{auth().user?.name?.charAt(0)?.toUpperCase() || 'O'}</div>
            <div class="freno-collaborator-info">
              <div class="freno-collaborator-name">{auth().user?.name}</div>
              <div class="freno-collaborator-email">{auth().user?.email}</div>
            </div>
            <span class="freno-badge freno-badge-owner">Owner</span>
          </div>

          {props.project.collaborators.map((collab) => (
            <div class="freno-collaborator-item">
              <div class="freno-avatar">{String.fromCharCode(65 + Math.abs(collab.userId.charCodeAt(0) || 0) % 26)}</div>
              <div class="freno-collaborator-info">
                <div class="freno-collaborator-name">{collab.userId}</div>
                <div class="freno-collaborator-email">{collab.userId}@example.com</div>
              </div>
              <span class={`freno-badge freno-badge-${collab.role}`}>{collab.role}</span>
              <button
                class="freno-btn-icon freno-remove-collab"
                onClick={() => handleRemoveCollaborator(collab.userId)}
              >
                ✕
              </button>
            </div>
          ))}
        </div>
      </div>

      <div class="freno-share-section">
        <h3>Share Link</h3>
        <div class="freno-share-link">
          <input
            class="freno-input"
            type="text"
            readonly
            value={`${window.location.origin}/projects/${props.project.id}`}
          />
          <button class="freno-btn freno-btn-secondary">Copy</button>
        </div>
      </div>
    </div>
  );
};
