Projects/front/src/components/project/ProjectSettingsPanel.tsx

import { useState } from "react";
import { useProjectSpace } from "@/hooks/useProjectSpace";
import type { Project } from "@/types/project";
import { Save, Shield, Lock } from "lucide-react";

interface ProjectSettingsPanelProps {
  projectId: string;
  project: Project;
}

export function ProjectSettingsPanel({ projectId, project }: ProjectSettingsPanelProps) {
  const { updateProject } = useProjectSpace(projectId);
  const [isPrivate, setIsPrivate] = useState(project.isPrivate);
  const [description, setDescription] = useState(project.description);
  const [objectives, setObjectives] = useState(project.objectives);

  const handleSave = () => {
    updateProject({ isPrivate, description, objectives });
  };

  return (
    <div className="space-y-6 max-w-2xl">
      <h3 className="font-bold text-lg">Project Settings</h3>

      <div>
        <label className="text-sm font-semibold">Description</label>
        <textarea value={description} onChange={e => setDescription(e.target.value)} className="input mt-1" rows={3} />
      </div>
      <div>
        <label className="text-sm font-semibold">Objectives</label>
        <textarea value={objectives} onChange={e => setObjectives(e.target.value)} className="input mt-1" rows={5} />
      </div>

      <div className="glass rounded-xl p-5 space-y-3">
        <h4 className="font-semibold flex items-center gap-2"><Lock className="w-5 h-5"/> Privacy & Access</h4>
        <label className="flex items-center justify-between cursor-pointer">
          <div>
            <p className="font-medium text-sm">Invite‑Only (Closed Group)</p>
            <p className="text-xs text-gray-500">Only invited members can see and access this project. No external visibility.</p>
          </div>
          <input
            type="checkbox"
            checked={isPrivate}
            onChange={e => setIsPrivate(e.target.checked)}
            className="rounded"
          />
        </label>
        {project.isHIPAACompliant !== undefined && (
          <div className="flex items-center gap-2 text-sm text-green-600">
            <Shield className="w-4 h-4"/> HIPAA‑Ready
          </div>
        )}
      </div>

      <button onClick={handleSave} className="btn btn-primary gap-2"><Save className="w-4 h-4"/> Save Settings</button>
    </div>
  );
}