import { useParams } from 'react-router-dom';
import { useOrganization } from '../../hooks/useClients';

export function OrgGeneralPage() {
  const { orgSlug } = useParams<{ orgSlug: string }>();
  const orgId = orgSlug ?? '';
  const { data: org, isLoading } = useOrganization(orgId);

  if (isLoading) return <div className="text-gray-400 py-8 text-center">Loading…</div>;
  if (!org) return <div className="text-red-600 py-4">Organization not found.</div>;

  return (
    <div className="max-w-lg">
      <div className="bg-white rounded-lg border border-gray-200 p-6 space-y-5">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Organization Name</label>
          <div className="text-gray-900 font-medium">{org.name}</div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Slug</label>
          <div className="font-mono text-sm text-gray-600">{org.slug}</div>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Plan</label>
          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 capitalize">
            {org.plan}
          </span>
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
          <span className={`text-xs font-medium ${org.is_active ? 'text-green-600' : 'text-red-600'}`}>
            {org.is_active ? 'Active' : 'Inactive'}
          </span>
        </div>
      </div>
      <p className="text-xs text-gray-400 mt-3">To rename or deactivate this organization, contact your platform admin.</p>
    </div>
  );
}
