import React from 'react';
import './dashboard.css';
const RetailerFeedbackPage = () => {
  const feedbackStats = [
    { label: 'Total Feedback', value: '142', change: '+8%' },
    { label: 'Average Rating', value: '4.2/5', change: '+0.1' },
    { label: 'Positive Feedback', value: '87%', change: '+3%' },
    { label: 'Response Rate', value: '92%', change: '+2%' },
  ];

  const recentFeedback = [
    { id: 'FB-1056', retailer: 'Tech Haven', rating: 5, comment: 'Excellent service and fast response times!', date: '2023-05-15', status: 'Responded' },
    { id: 'FB-1055', retailer: 'Digital World', rating: 4, comment: 'Good products but delivery could be faster', date: '2023-05-14', status: 'Pending' },
    { id: 'FB-1054', retailer: 'Software Plus', rating: 3, comment: 'Had some issues with license activation', date: '2023-05-13', status: 'In Progress' },
    { id: 'FB-1053', retailer: 'CompuZone', rating: 5, comment: 'Best software distributor we work with', date: '2023-05-12', status: 'Responded' },
  ];

  const ratingDistribution = [
    { stars: 5, count: 85, percent: 60 },
    { stars: 4, count: 32, percent: 22 },
    { stars: 3, count: 15, percent: 10 },
    { stars: 2, count: 6, percent: 4 },
    { stars: 1, count: 4, percent: 3 },
  ];

  return (
    <div className="dashboard-container">
      <h2 className="dashboard-header">Retailer Feedback Management</h2>
      
      <div className="stats-grid">
        {feedbackStats.map((stat, index) => (
          <div key={index} className="stat-card">
            <div className="stat-value">{stat.value}</div>
            <div className="stat-label">{stat.label}</div>
            <small style={{ color: stat.change.startsWith('+') ? '#27ae60' : '#e74c3c' }}>
              {stat.change} from last month
            </small>
          </div>
        ))}
      </div>
      
      <div className="dashboard-card">
        <h3 className="card-title">Recent Feedback</h3>
        <div className="search-filter">
          <input type="text" className="search-box" placeholder="Search feedback..." />
          <select className="filter-select">
            <option>All Status</option>
            <option>Responded</option>
            <option>Pending</option>
            <option>In Progress</option>
          </select>
        </div>
        <div className="table-container">
          <table className="data-table">
            <thead>
              <tr>
                <th>Feedback ID</th>
                <th>Retailer</th>
                <th>Rating</th>
                <th>Comment</th>
                <th>Date</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {recentFeedback.map((feedback, index) => (
                <tr key={index}>
                  <td>{feedback.id}</td>
                  <td>{feedback.retailer}</td>
                  <td>
                    <div style={{ display: 'flex' }}>
                      {[...Array(5)].map((_, i) => (
                        <span key={i} style={{ 
                          color: i < feedback.rating ? '#f39c12' : '#ddd',
                          fontSize: '18px'
                        }}>★</span>
                      ))}
                    </div>
                  </td>
                  <td style={{ maxWidth: '300px' }}>{feedback.comment}</td>
                  <td>{feedback.date}</td>
                  <td>
                    <span style={{
                      padding: '4px 8px',
                      borderRadius: '12px',
                      backgroundColor: 
                        feedback.status === 'Responded' ? '#d5f5e3' :
                        feedback.status === 'Pending' ? '#fadbd8' : '#fef9e7',
                      color: 
                        feedback.status === 'Responded' ? '#27ae60' :
                        feedback.status === 'Pending' ? '#e74c3c' : '#f39c12'
                    }}>
                      {feedback.status}
                    </span>
                  </td>
                  <td>
                    <button className="action-btn">View</button>
                    {feedback.status !== 'Responded' && (
                      <button className="action-btn secondary">Respond</button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div className="dashboard-card">
          <h3 className="card-title">Rating Distribution</h3>
          <div style={{ marginTop: '20px' }}>
            {ratingDistribution.map((item, index) => (
              <div key={index} style={{ marginBottom: '10px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
                  <span>
                    {[...Array(item.stars)].map((_, i) => (
                      <span key={i} style={{ color: '#f39c12' }}>★</span>
                    ))}
                  </span>
                  <span>{item.count} ({item.percent}%)</span>
                </div>
                <div style={{
                  height: '10px',
                  backgroundColor: '#ecf0f1',
                  borderRadius: '5px',
                  overflow: 'hidden'
                }}>
                  <div style={{
                    width: `${item.percent}%`,
                    height: '100%',
                    backgroundColor: '#f39c12',
                    borderRadius: '5px'
                  }}></div>
                </div>
              </div>
            ))}
          </div>
        </div>
        
        <div className="dashboard-card">
          <h3 className="card-title">Feedback Response</h3>
          <div style={{ 
            height: '250px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}>
            {/* This would be replaced with an actual chart component */}
            <div style={{
              background: '#f8f9fa',
              width: '100%',
              height: '200px',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#7f8c8d'
            }}>
              [Response Time and Satisfaction Chart]
            </div>
          </div>
          <div style={{ 
            display: 'flex',
            justifyContent: 'space-around',
            marginTop: '20px',
            textAlign: 'center'
          }}>
            <div>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#27ae60' }}>92%</div>
              <div style={{ color: '#7f8c8d' }}>Response Rate</div>
            </div>
            <div>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#3498db' }}>6.2h</div>
              <div style={{ color: '#7f8c8d' }}>Avg. Response Time</div>
            </div>
            <div>
              <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#f39c12' }}>87%</div>
              <div style={{ color: '#7f8c8d' }}>Satisfaction After Response</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RetailerFeedbackPage;