import React, { useState } from "react";
import { Plus, Mic, ArrowUp, ChevronDown, BarChart3, Search, FileText } from "lucide-react";

const QUICK_ACTIONS = [
  { icon: BarChart3, label: "Analyze my week" },
  { icon: FileText, label: "Draft a briefing" },
  { icon: Search, label: "Look something up" },
];

export default function KrowCommandAsk({ onSubmit, onQuickAction }) {
  const [input, setInput] = useState("");

  const handleSubmit = (e) => {
    e?.preventDefault();
    const text = input.trim();
    if (!text) return;
    onSubmit(text);
    setInput("");
  };

  return (
    <div className="min-h-[70vh] flex flex-col items-center justify-center bg-black px-4 -mx-6 -my-6">
      <div className="w-full max-w-2xl flex flex-col items-center">
        <h1 className="text-2xl md:text-3xl font-semibold text-white mb-8 text-center">
          Ask KROW
        </h1>

        <form onSubmit={handleSubmit} className="w-full">
          <div className="flex items-center gap-2 bg-[#212121] rounded-full pl-4 pr-2 py-2 border border-white/10 focus-within:border-white/25 transition-colors">
            <Plus className="w-5 h-5 text-[#8E8E8E] flex-shrink-0" />
            <input
              value={input}
              onChange={(e) => setInput(e.target.value)}
              placeholder="Ask KROW"
              className="flex-1 bg-transparent text-white placeholder:text-[#8E8E8E] text-sm outline-none min-w-0"
            />
            <button
              type="button"
              className="flex items-center gap-1 text-xs text-[#D1D1D1] hover:text-white px-2 py-1 rounded-full hover:bg-white/5 transition-colors"
            >
              Instant
              <ChevronDown className="w-3 h-3" />
            </button>
            <button type="button" className="text-[#8E8E8E] hover:text-white p-1.5 transition-colors">
              <Mic className="w-4 h-4" />
            </button>
            <button
              type="submit"
              disabled={!input.trim()}
              className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center disabled:opacity-30 disabled:cursor-not-allowed hover:bg-white/90 transition-colors flex-shrink-0"
            >
              <ArrowUp className="w-4 h-4" strokeWidth={2.5} />
            </button>
          </div>
        </form>

        <div className="mt-6 w-full flex flex-col items-start gap-1 pl-2">
          {QUICK_ACTIONS.map((action, i) => (
            <button
              key={i}
              onClick={() => onQuickAction(action.label)}
              className="flex items-center gap-3 px-2 py-2 text-sm text-[#D1D1D1] hover:text-white transition-colors"
            >
              <action.icon className="w-4 h-4" strokeWidth={1.5} />
              {action.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}