"use client";

import { useState } from 'react';

export default function AITreeBuilderWidget() {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div 
      className={`bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg shadow-lg p-6 text-white transition-all duration-300 cursor-pointer ${
        isHovered ? 'shadow-xl scale-105' : ''
      }`}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={() => window.open('/admin/ai-tree-builder', '_blank')}
    >
      {/* Header with AI Icon */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center">
          <div className="text-3xl mr-3">🤖</div>
          <div>
            <h3 className="text-lg font-bold">AI Tree Builder</h3>
            <p className="text-purple-100 text-sm">Chat to Create</p>
          </div>
        </div>
        <div className={`transform transition-transform duration-300 ${isHovered ? 'rotate-12' : ''}`}>
          ✨
        </div>
      </div>

      {/* Description */}
      <div className="mb-4 text-purple-100">
        <p className="text-sm mb-2">
          🗣️ Just talk to our AI assistant and it will build perfect patient journeys for you
        </p>
        <div className="flex flex-wrap gap-1 text-xs">
          <span className="bg-white bg-opacity-20 px-2 py-1 rounded">No coding</span>
          <span className="bg-white bg-opacity-20 px-2 py-1 rounded">Simple chat</span>
          <span className="bg-white bg-opacity-20 px-2 py-1 rounded">AI powered</span>
        </div>
      </div>

      {/* Features List */}
      <div className="space-y-2 mb-4 text-sm text-purple-100">
        <div className="flex items-center">
          <span className="text-green-300 mr-2">✓</span>
          Describe your goals in plain English
        </div>
        <div className="flex items-center">
          <span className="text-green-300 mr-2">✓</span>
          AI creates the perfect tree structure
        </div>
        <div className="flex items-center">
          <span className="text-green-300 mr-2">✓</span>
          No technical knowledge required
        </div>
        <div className="flex items-center">
          <span className="text-green-300 mr-2">✓</span>
          Ready to use in 5 minutes
        </div>
      </div>

      {/* Call to Action */}
      <div className="bg-white bg-opacity-20 rounded-lg p-3 text-center">
        <div className="font-semibold mb-1">💬 "I want to reduce no-shows"</div>
        <div className="text-xs text-purple-100">
          Just say it and watch the AI build it! →
        </div>
      </div>

      {/* Hover Effect */}
      {isHovered && (
        <div className="absolute inset-0 bg-white bg-opacity-10 rounded-lg flex items-center justify-center">
          <div className="text-center">
            <div className="text-4xl mb-2">🚀</div>
            <div className="font-bold text-lg">Click to Start!</div>
          </div>
        </div>
      )}
    </div>
  );
}