// BAD -- direct firebase/firestore import in a component
import { collection, getDocs } from 'firebase/firestore';

// BAD -- direct firebase/functions import in a hook
import { httpsCallable } from 'firebase/functions';

// BAD -- direct firebase/storage import in a page
import { ref, uploadBytes } from 'firebase/storage';

// GOOD -- use the service layer
import { projectService } from '@/features/projects/services/projectService';

// GOOD -- use the cloud functions abstraction
import { callFunction } from '@/core/cloudFunctionsService';

// GOOD -- use the storage abstraction
import { uploadFile } from '@/core/storageService';

// BAD -- importing eventBus in a component
import { eventBus } from '@/core/eventBus';

function ProjectCard() {
  eventBus.emit('project:updated', data);
}

// GOOD -- emit events from the service layer
// In projectService.ts:
import { eventBus } from '@/core/eventBus';

async function updateProject(data) {
  await save(data);
  eventBus.emit('project:updated', data);
}

// BAD -- useState from a prop
function UserCard({ name }) {
  const [localName, setLocalName] = useState(name);
}

// BAD -- useState from another state variable
function Form({ items }) {
  const [selected, setSelected] = useState(items[0]);
  const [count, setCount] = useState(selected); // derived from state
}

// BAD -- expression involving props
function Widget({ width, height }) {
  const [area, setArea] = useState(width * height);
}

// GOOD -- calculate during render
function UserCard({ name }) {
  const displayName = name.toUpperCase();
}

// GOOD -- use useMemo
function Widget({ width, height }) {
  const area = useMemo(() => width * height, [width, height]);
}

// GOOD -- lazy initializer (allowed, not flagged)
function List({ items }) {
  const [sorted, setSorted] = useState(() => sortItems(items));
}

// BAD -- direct onSnapshot import
import { onSnapshot, collection } from 'firebase/firestore';

onSnapshot(collection(db, 'projects'), (snap) => { ... });

// GOOD -- use listenerManager
import { listenerManager } from '@/core/listenerManager';

listenerManager.subscribe('projects', query, (snap) => { ... });

// BAD -- raw collection/doc imports in a service
import { collection, doc, getDocs } from 'firebase/firestore';

const ref = collection(db, 'projects');
const docRef = doc(db, 'projects', id);

// GOOD -- typed helpers
import { collections, docs } from '@/core/firestoreCollections';

const ref = collections.projects();
const docRef = docs.projects(id);

// BAD -- getDocs without limit
const q = query(collection(db, 'expenses'));
const snapshot = await getDocs(q);

// BAD -- collection ref directly
const snapshot = await getDocs(collection(db, 'expenses'));

// GOOD -- with limit
const q = query(collection(db, 'expenses'), limit(100));
const snapshot = await getDocs(q);

// GOOD -- exact document lookup (inherently bounded)
const q = query(collection(db, 'expenses'), where('__name__', '==', docId));
const snapshot = await getDocs(q);

// BAD -- blue-* in a file that already uses primary-* tokens
<div className="bg-primary-600 text-blue-500">...</div>
<span className={cn('border-blue-200', 'ring-primary-400')}>...</span>

// GOOD -- use primary-* tokens consistently
<div className="bg-primary-600 text-primary-500">...</div>
<span className={cn('border-primary-200', 'ring-primary-400')}>...</span>

// BAD -- raw <button> alongside design-system Button
import { Button } from '@/components/ui/button';

function Toolbar() {
  return (
    <div>
      <Button>Save</Button>
      <button className="px-4 py-2 bg-blue-500">Cancel</button>  {/* flagged */}
    </div>
  );
}

// GOOD -- use Button for everything
import { Button } from '@/components/ui/button';

function Toolbar() {
  return (
    <div>
      <Button>Save</Button>
      <Button variant="outline">Cancel</Button>
    </div>
  );
}

// BAD -- raw <input type="text"> alongside design-system Input
import { Input } from '@/components/ui/input';

function SearchBar() {
  return (
    <div>
      <Input placeholder="Main search" />
      <input type="text" placeholder="Filter" />  {/* flagged */}
      <input type="email" />                       {/* flagged */}
      <input type="checkbox" />                    {/* NOT flagged (non-text) */}
    </div>
  );
}

// GOOD -- use Input for all text-like inputs
import { Input } from '@/components/ui/input';

function SearchBar() {
  return (
    <div>
      <Input placeholder="Main search" />
      <Input placeholder="Filter" />
      <Input type="email" />
      <input type="checkbox" />  {/* non-text types are fine as raw */}
    </div>
  );
}

// BAD -- local status helper alongside StatusBadge import
import { StatusBadge } from '@/components/ui/StatusBadge';

function getStatusColor(status: string) {  // flagged
  return status === 'active' ? 'green' : 'gray';
}

// GOOD -- use StatusBadge and mapDomainStatus
import { StatusBadge, mapDomainStatus } from '@/components/ui/StatusBadge';

function ProjectRow({ status }) {
  return <StatusBadge status={mapDomainStatus(status)} />;
}

// GOOD -- use shared EmptyState component
<SurfaceEmptyState
  title="No projects found"
  description="Try adjusting your filters or create a new project."
  actionLabel="New project"
  onAction={onCreateProject}
/>

// GOOD -- route/page-specific skeleton preset
<Suspense fallback={<TablePageSkeleton />}>
  <LazyExpensesPage />
</Suspense>

// GOOD -- standardized page header
<PageHeader
  title="Platform Users"
  description="Manage users, access, and status across tenants."
  actions={<Button variant="outline">Export</Button>}
/>

// eslint-disable-next-line custom/no-direct-firestore-import -- one-off migration script
import { writeBatch } from 'firebase/firestore';

export default {
  meta: {
    type: 'problem' | 'suggestion',
    docs: {
      description: '...',
      category: 'Best Practices',
      recommended: false,
    },
    messages: {
      ruleId: 'Human-readable error message.',
    },
    schema: [],  // options schema (JSON Schema)
  },

  create(context) {
    const filename = context.getFilename();
    // Return AST visitor object
    return {
      ImportDeclaration(node) { ... },
      JSXOpeningElement(node) { ... },
    };
  },
};