"use client";

interface Suggestion {
  label: string;
  prompt: string;
}

const SUGGESTIONS: Suggestion[] = [
  {
    label: "Explain this project",
    prompt: "Can you give me an overview of this project and its key components?",
  },
  {
    label: "Help me debug",
    prompt: "I have a bug I need help debugging. Can you walk me through the process?",
  },
  {
    label: "Write a test for",
    prompt: "Can you help me write a test for the following function or component?",
  },
  {
    label: "Refactor this code",
    prompt: "I have some code I'd like to refactor for better readability and maintainability.",
  },
];

interface ChatEmptyStateProps {
  onSuggestionClick: (prompt: string) => void;
}

export function ChatEmptyState({ onSuggestionClick }: ChatEmptyStateProps): React.JSX.Element {
  return (
    <div
      className="flex flex-col items-center justify-center gap-6 py-12 px-4 text-center"
      data-testid="chat-empty-state"
    >
      {/* Icon */}
      <div
        className="flex h-16 w-16 items-center justify-center rounded-2xl"
        style={{ backgroundColor: "rgb(var(--accent-primary) / 0.12)" }}
      >
        <svg
          className="h-8 w-8"
          style={{ color: "rgb(var(--accent-primary))" }}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={1.5}
          aria-hidden="true"
        >
          <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
        </svg>
      </div>

      {/* Greeting */}
      <div className="space-y-1">
        <h3 className="text-lg font-semibold" style={{ color: "rgb(var(--text-primary))" }}>
          How can I help you today?
        </h3>
        <p className="text-sm max-w-sm" style={{ color: "rgb(var(--text-secondary))" }}>
          Ask me anything — I can help with code, explanations, debugging, and more.
        </p>
      </div>

      {/* Suggestions */}
      <div className="grid grid-cols-1 gap-2 w-full max-w-sm sm:grid-cols-2">
        {SUGGESTIONS.map((suggestion) => (
          <button
            key={suggestion.label}
            onClick={() => {
              onSuggestionClick(suggestion.prompt);
            }}
            className="rounded-lg border px-3 py-2.5 text-left text-sm transition-all duration-150 hover:shadow-sm focus:outline-none focus:ring-2"
            style={{
              backgroundColor: "rgb(var(--surface-1))",
              borderColor: "rgb(var(--border-default))",
              color: "rgb(var(--text-secondary))",
            }}
            aria-label={`Suggestion: ${suggestion.label}`}
            data-testid={`suggestion-${suggestion.label.toLowerCase().replace(/\s+/g, "-")}`}
          >
            <span
              className="block text-xs font-medium mb-0.5"
              style={{ color: "rgb(var(--text-primary))" }}
            >
              {suggestion.label}
            </span>
            <span
              className="block text-xs leading-relaxed line-clamp-2"
              style={{ color: "rgb(var(--text-muted))" }}
            >
              {suggestion.prompt}
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}
