"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import type { Contact } from "@prisma/client";

const STAGE_STYLES: Record<string, string> = {
  NEW: "bg-black/[.06] text-ink",
  CONTACTED: "bg-hub-orange/10 text-hub-orange",
  QUALIFIED: "bg-hub-orange/20 text-hub-orange",
  PROPOSAL: "bg-yellow-100 text-yellow-700",
  WON: "bg-hub-green/10 text-hub-green",
  LOST: "bg-red-100 text-red-700",
};

export default function ContactsTable({ initialContacts }: { initialContacts: Contact[] }) {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    if (!query.trim()) return initialContacts;
    const q = query.toLowerCase();
    return initialContacts.filter(
      (c) =>
        c.email.toLowerCase().includes(q) ||
        c.name?.toLowerCase().includes(q) ||
        c.company?.toLowerCase().includes(q)
    );
  }, [initialContacts, query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search by name, company, or email..."
        className="w-full sm:w-80 border border-black/15 rounded-md px-3 py-2 text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-hub-orange"
      />

      {filtered.length === 0 ? (
        <div className="border border-dashed border-black/15 rounded-lg p-10 text-center text-slate">
          No contacts match.
        </div>
      ) : (
        <div className="border border-black/10 rounded-lg overflow-hidden bg-white">
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-black/[.03] text-left text-slate">
                <th className="px-4 py-3 font-medium">Name</th>
                <th className="px-4 py-3 font-medium">Company</th>
                <th className="px-4 py-3 font-medium">Email</th>
                <th className="px-4 py-3 font-medium">Tags</th>
                <th className="px-4 py-3 font-medium">Stage</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((c) => {
                const tags = Array.isArray(c.tags) ? (c.tags as string[]) : [];
                return (
                  <tr key={c.id} className="border-t border-black/5 hover:bg-black/[.02]">
                    <td className="px-4 py-3">
                      <Link href={`/contacts/${c.id}`} className="font-medium hover:text-hub-orange">
                        {c.name || "—"}
                      </Link>
                    </td>
                    <td className="px-4 py-3 text-slate">{c.company || "—"}</td>
                    <td className="px-4 py-3 text-slate">{c.email}</td>
                    <td className="px-4 py-3">
                      <div className="flex gap-1 flex-wrap">
                        {tags.map((t) => (
                          <span key={t} className="bg-black/[.05] text-ink px-2 py-0.5 rounded text-xs">
                            {t}
                          </span>
                        ))}
                      </div>
                    </td>
                    <td className="px-4 py-3">
                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${STAGE_STYLES[c.dealStage]}`}>
                        {c.dealStage}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}