"use client"

import { useState, useMemo } from "react"
import { PageHeader } from "@/components/shared/page-header"
import { LeadsTable } from "@/components/leads/leads-table"
import { LeadsTableToolbar } from "@/components/leads/leads-table-toolbar"
import { LeadFormDialog } from "@/components/leads/lead-form-dialog"
import { leads } from "@/data/leads"

export default function LeadsPage() {
  const [search, setSearch] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [createOpen, setCreateOpen] = useState(false)

  const filteredLeads = useMemo(() => {
    let result = leads

    if (search) {
      const q = search.toLowerCase()
      result = result.filter(
        (l) =>
          l.companyName.toLowerCase().includes(q) ||
          l.contactName.toLowerCase().includes(q) ||
          l.email.toLowerCase().includes(q) ||
          l.phone.includes(q)
      )
    }

    if (statusFilter && statusFilter !== "all") {
      result = result.filter((l) => l.status === statusFilter)
    }

    return result
  }, [search, statusFilter])

  return (
    <div className="space-y-4">
      <PageHeader
        title="Leads"
        description="Manage and track your sales leads"
      />

      <div className="rounded-lg border bg-card">
        <div className="p-4">
          <LeadsTableToolbar
            search={search}
            onSearchChange={setSearch}
            statusFilter={statusFilter}
            onStatusFilterChange={setStatusFilter}
            onCreateClick={() => setCreateOpen(true)}
          />
        </div>
        <LeadsTable data={filteredLeads} />
      </div>

      <LeadFormDialog open={createOpen} onOpenChange={setCreateOpen} />
    </div>
  )
}