import { Sparkles, MessageSquare, ShieldCheck, BarChart3, ArrowRight } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { useChatStore } from '@/store/useChatStore'

const ACTION_MATRIX = [
  {
    tag: 'QUICK QUERY',
    tagColor: 'bg-blue-500/10 text-blue-500 border-blue-500/20',
    title: 'Danh sách chiến dịch',
    description: 'Tra cứu thông tin các chương trình khuyến mãi và ưu đãi đang chạy.',
    icon: Sparkles,
    prompt: 'Cho tôi xem danh sách các chiến dịch khuyến mãi đang diễn ra.',
  },
  {
    tag: 'CAMPAIGN BUILDER',
    tagColor: 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20',
    title: 'Tạo campaign mới',
    description: 'Khởi tạo chiến dịch tích điểm & khuyến mãi mới cho khách hàng.',
    icon: MessageSquare,
    prompt: 'Tôi muốn tạo một chiến dịch khuyến mãi tích điểm mới cho khách hàng.',
  },
  {
    tag: 'VIP INSIGHTS',
    tagColor: 'bg-amber-500/10 text-amber-500 border-amber-500/20',
    title: 'Tra cứu hạng thẻ VIP',
    description: 'Kiểm tra điểm thưởng, lịch sử đổi quà và quyền lợi khách hàng VIP.',
    icon: ShieldCheck,
    prompt: 'Hãy tra cứu thông tin điểm thưởng và hạng thẻ của khách hàng VIP.',
  },
  {
    tag: 'DATA REPORT',
    tagColor: 'bg-purple-500/10 text-purple-500 border-purple-500/20',
    title: 'Báo cáo hiệu suất',
    description: 'Tổng hợp phân tích hiệu quả chương trình chăm sóc khách hàng.',
    icon: BarChart3,
    prompt: 'Phân tích tổng quan hiệu suất chương trình loyalty và tích điểm.',
  },
]

export function WelcomeScreen() {
  const sendMessage = useChatStore((s) => s.sendMessage)

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-6 text-center max-w-3xl mx-auto animate-in fade-in duration-300">

      <h1 className="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-foreground via-foreground/90 to-muted-foreground bg-clip-text text-transparent mb-2">
        Bắt đầu cuộc trò chuyện mới
      </h1>
      <p className="text-sm text-muted-foreground mb-8 max-w-lg leading-relaxed">
        Chọn một tác vụ studio nhanh bên dưới hoặc nhập yêu cầu để trợ lý AI thực hiện công việc cho bạn.
      </p>

      {/* Action Matrix 2x2 Grid */}
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5 w-full text-left">
        {ACTION_MATRIX.map((item, idx) => {
          const Icon = item.icon
          return (
            <div
              key={idx}
              onClick={() => sendMessage(item.prompt)}
              className="group cursor-pointer p-4 rounded-2xl bg-card border border-border/70 hover:border-primary/50 hover:shadow-md hover:bg-secondary/40 transition-all duration-200 flex flex-col justify-between min-h-[140px] relative overflow-hidden"
            >
              <div>
                <div className="flex items-center justify-between gap-2 mb-2.5">
                  <Badge variant="outline" className={`text-[10px] font-bold tracking-wider uppercase border ${item.tagColor}`}>
                    {item.tag}
                  </Badge>
                  <div className="p-1.5 rounded-lg bg-secondary text-muted-foreground group-hover:text-primary group-hover:bg-primary/10 transition-colors">
                    <Icon className="w-4 h-4" />
                  </div>
                </div>

                <h3 className="text-sm font-bold text-foreground group-hover:text-primary transition-colors">
                  {item.title}
                </h3>
                <p className="text-xs text-muted-foreground mt-1 line-clamp-2 leading-relaxed">
                  {item.description}
                </p>
              </div>

              <div className="pt-3 border-t border-border/40 mt-3 flex items-center justify-between text-xs font-medium text-muted-foreground group-hover:text-primary transition-colors">
                <span>Thử ngay</span>
                <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}


