import { Component, createSignal } from 'solid-js';
import { A } from '@solidjs/router';
import { useAuth } from '../../lib/auth';
import { createProjectService } from '../../lib/projects/service';

export const ProjectList: Component = () => {
  const auth = useAuth();
  const projectService = createProjectService();
  const [search, setSearch] = createSignal('');
  const [filter, setFilter] = createSignal<'all' | 'active' | 'draft' | 'archived'>('all');

  const filteredProjects = () => {
    let projects = projectService.projects();
    if (filter() !== 'all') {
      projects = projects.filter((p) => p.status === filter());
    }
    if (search()) {
      const q = search().toLowerCase();
      projects = projects.filter(
        (p) => p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q)
      );
    }
    return projects;
  };

  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  return (
    <div class="freno-project-list">
      <div class="freno-page-header">
        <h1>Projects</h1>
        <A href="/projects/new" class="freno-btn freno-btn-primary">
          + New Project
        </A>
      </div>

      <div class="freno-toolbar">
        <div class="freno-search-box">
          <input
            type="text"
            placeholder="Search projects..."
            value={search()}
            onInput={(e) => setSearch(e.target.value)}
            class="freno-input"
          />
        </div>

        <div class="freno-filter-tabs">
          {(['all', 'active', 'draft', 'archived'] as const).map((f) => (
            <button
              class={`freno-tab ${filter() === f ? 'freno-tab-active' : ''}`}
              onClick={() => setFilter(f)}
            >
              {f.charAt(0).toUpperCase() + f.slice(1)}
            </button>
          ))}
        </div>
      </div>

      <div class="freno-project-grid">
        {filteredProjects().length === 0 ? (
          <div class="freno-empty-state">
            <div class="freno-empty-icon">📁</div>
            <h3>No projects found</h3>
            <p>
              {search() || filter() !== 'all'
                ? 'Try adjusting your search or filters.'
                : 'Create your first project to get started.'}
            </p>
          </div>
        ) : (
          filteredProjects().map((project) => (
            <A href={`/projects/${project.id}`} class="freno-project-card">
              <div class="freno-project-card-header">
                <h3>{project.name}</h3>
                <span class={`freno-badge freno-badge-${project.status}`}>
                  {project.status}
                </span>
              </div>
              <p class="freno-project-card-desc">{project.description}</p>
              <div class="freno-project-card-footer">
                <span class="freno-collab-count">
                  {project.collaborators.length} collaborator{project.collaborators.length !== 1 ? 's' : ''}
                </span>
                <span class="freno-date">Updated {formatDate(project.updatedAt)}</span>
              </div>
            </A>
          ))
        )}
      </div>
    </div>
  );
};
