import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { CounterWithStats } from '../types';
import { Plus, Minus, Edit, Trash2, MoreVertical } from 'lucide-react';

interface CounterCardProps {
  counter: CounterWithStats;
  onIncrement: (id: number | string, value: number) => Promise<void>;
  onDelete: (id: number | string) => Promise<void>;
}

export const CounterCard: React.FC<CounterCardProps> = ({ counter, onIncrement, onDelete }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [showMenu, setShowMenu] = useState(false);

  const handleIncrement = async (value: number) => {
    setIsLoading(true);
    try {
      await onIncrement(counter.id, value);
      console.log('Counter incremented:', counter.id, value);
    } catch (error) {
      console.error('Failed to increment counter:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleDelete = async () => {
    if (window.confirm('Are you sure you want to delete this counter?')) {
      try {
        await onDelete(counter.id);
      } catch (error) {
        console.error('Failed to delete counter:', error);
      }
    }
  };

  return (
    <div className="counter-card">
      <div className="flex justify-between items-start mb-4">
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-gray-900 mb-1">
            {counter.name}
          </h3>
          {counter.description && (
            <p className="text-sm text-gray-600 mb-2">{counter.description}</p>
          )}
        </div>
        <div className="relative">
          <button
            onClick={() => setShowMenu(!showMenu)}
            className="p-1 text-gray-400 hover:text-gray-600"
          >
            <MoreVertical className="h-5 w-5" />
          </button>
          {showMenu && (
            <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 border border-gray-200">
              <Link
                to={`/counter/${counter.id}`}
                className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                onClick={() => setShowMenu(false)}
              >
                <Edit className="h-4 w-4 mr-2" />
                View Details
              </Link>
              <button
                onClick={() => {
                  handleDelete();
                  setShowMenu(false);
                }}
                className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
              >
                <Trash2 className="h-4 w-4 mr-2" />
                Delete
              </button>
            </div>
          )}
        </div>
      </div>

      {/* Counter Value */}
      <div className="text-center mb-6">
        <div className="text-4xl font-bold text-primary-600 mb-2">
          {counter.total_value}
        </div>
        <div className="text-sm text-gray-500">Total</div>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-3 gap-4 mb-6 text-center">
        <div>
          <div className="text-lg font-semibold text-gray-900">{counter.today_value}</div>
          <div className="text-xs text-gray-500">Today</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-gray-900">{counter.week_value}</div>
          <div className="text-xs text-gray-500">Week</div>
        </div>
        <div>
          <div className="text-lg font-semibold text-gray-900">{counter.month_value}</div>
          <div className="text-xs text-gray-500">Month</div>
        </div>
      </div>

      {/* Action Buttons */}
      <div className="flex space-x-2">
        <button
          onClick={() => handleIncrement(-1)}
          disabled={isLoading}
          className="btn btn-secondary flex-1 flex items-center justify-center disabled:opacity-50"
        >
          <Minus className="h-4 w-4" />
        </button>
        <button
          onClick={() => handleIncrement(1)}
          disabled={isLoading}
          className="btn btn-primary flex-1 flex items-center justify-center disabled:opacity-50"
        >
          <Plus className="h-4 w-4" />
        </button>
      </div>

      {/* Entry Count */}
      <div className="mt-4 text-center">
        <div className="text-xs text-gray-500">
          {counter.entry_count} entries
        </div>
      </div>
    </div>
  );
};
