import { useState } from 'react';
import { format } from 'date-fns';
import { motion, AnimatePresence } from 'framer-motion';
import { Clock, CheckCircle, AlertCircle, Hourglass, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
import { useFeedbackStore, type FeedbackSubmission, type FeedbackStatus } from './feedbackStore';
import { Button, Badge } from '../ui';

const statusConfig: Record<FeedbackStatus, { label: string; color: string; icon: React.ReactNode }> = {
  pending: { label: 'Pending', color: 'text-gray-500', icon: <Clock className="w-4 h-4" /> },
  submitted: { label: 'Submitted', color: 'text-blue-500', icon: <CheckCircle className="w-4 h-4" /> },
  acknowledged: { label: 'Acknowledged', color: 'text-purple-500', icon: <CheckCircle className="w-4 h-4" /> },
  in_progress: { label: 'In Progress', color: 'text-yellow-500', icon: <Hourglass className="w-4 h-4" /> },
  resolved: { label: 'Resolved', color: 'text-green-500', icon: <CheckCircle className="w-4 h-4" /> },
};

const typeLabels: Record<string, string> = {
  bug: 'Bug Report',
  feature: 'Feature Request',
  general: 'General Feedback',
};
const priorityLabels: Record<string, string> = {
  low: 'Low',
  medium: 'Medium',
  high: 'High',
};

interface FeedbackHistoryProps {
  onViewDetails?: (feedback: FeedbackSubmission) => void;
}

export function FeedbackHistory({ onViewDetails: _onViewDetails }: FeedbackHistoryProps) {
  const { feedbackItems, deleteFeedback, updateFeedbackStatus } = useFeedbackStore();
  const [expandedId, setExpandedId] = useState<string | null>(null);

  const formatDate = (timestamp: number) => {
    return format(new Date(timestamp), 'yyyy-MM-dd HH:mm');
  };

  const handleDelete = (id: string) => {
    if (confirm('Are you sure you want to delete this feedback?')) {
      deleteFeedback(id);
    }
  };

  const handleStatusChange = (id: string, newStatus: FeedbackStatus) => {
    updateFeedbackStatus(id, newStatus);
  };

  if (feedbackItems.length === 0) {
    return (
      <div className="text-center py-8 text-gray-500 dark:text-gray-400">
        <p>No feedback submissions yet.</p>
        <p className="text-sm mt-1">Click the feedback button to submit your first feedback.</p>
      </div>
    );
  }

  return (
    <div className="space-y-3">
      {feedbackItems.map((feedback) => {
        const isExpanded = expandedId === feedback.id;
        const statusInfo = statusConfig[feedback.status];

        return (
          <motion.div
            key={feedback.id}
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden"
          >
            {/* Header */}
            <div
              className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50"
              onClick={() => setExpandedId(isExpanded ? null : feedback.id)}
            >
              <div className="flex items-center gap-3">
                <div className="flex-shrink-0">
                  {feedback.type === 'bug' && <span className="text-red-500"><AlertCircle className="w-4 h-4" /></span>}
                  {feedback.type === 'feature' && <span className="text-yellow-500"><ChevronUp className="w-4 h-4" /></span>}
                  {feedback.type === 'general' && <span className="text-blue-500"><CheckCircle className="w-4 h-4" /></span>}
                </div>
                <div className="min-w-0 flex-1">
                  <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                    {feedback.title}
                  </h4>
                  <p className="text-xs text-gray-500 dark:text-gray-400">
                    {typeLabels[feedback.type]} - {formatDate(feedback.createdAt)}
                  </p>
                </div>
                <Badge variant={feedback.priority === 'high' ? 'error' : feedback.priority === 'medium' ? 'warning' : 'default'}>
                  {priorityLabels[feedback.priority]}
                </Badge>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setExpandedId(isExpanded ? null : feedback.id);
                  }}
                  className="text-gray-400 hover:text-gray-600 p-1"
                >
                  {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                </button>
              </div>
            </div>

            {/* Expandable Content */}
            <AnimatePresence>
              {isExpanded && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: 'auto', opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  className="px-4 pb-3 border-t border-gray-100 dark:border-gray-700"
                >
                  <div className="space-y-3">
                    {/* Description */}
                    <div>
                      <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Description</h5>
                      <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
                        {feedback.description}
                      </p>
                    </div>

                    {/* Attachments */}
                    {feedback.attachments.length > 0 && (
                      <div>
                        <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
                          Attachments ({feedback.attachments.length})
                        </h5>
                        <div className="flex flex-wrap gap-2 mt-1">
                          {feedback.attachments.map((att, idx) => (
                            <span
                              key={idx}
                              className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded"
                            >
                              {att.name}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Metadata */}
                    <div>
                      <h5 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">System Info</h5>
                      <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
                        <p>App Version: {feedback.metadata.appVersion}</p>
                        <p>OS: {feedback.metadata.os}</p>
                        <p>Submitted: {formatDate(feedback.createdAt)}</p>
                      </div>
                    </div>

                    {/* Status and Actions */}
                    <div className="flex items-center justify-between pt-2 border-t border-gray-100 dark:border-gray-700">
                      <div className="flex items-center gap-2">
                        <span className={`flex items-center gap-1 text-xs ${statusInfo.color}`}>
                          {statusInfo.icon}
                          {statusInfo.label}
                        </span>
                      </div>
                      <div className="flex items-center gap-2">
                        <select
                          value={feedback.status}
                          onChange={(e) => handleStatusChange(feedback.id, e.target.value as FeedbackStatus)}
                          className="text-xs border border-gray-200 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800"
                        >
                          <option value="pending">Pending</option>
                          <option value="submitted">Submitted</option>
                          <option value="acknowledged">Acknowledged</option>
                          <option value="in_progress">In Progress</option>
                          <option value="resolved">Resolved</option>
                        </select>
                        <Button
                          variant="ghost"
                          size="sm"
                          onClick={() => handleDelete(feedback.id)}
                          className="text-red-500 hover:text-red-600"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </motion.div>
        );
      })}
    </div>
  );
}