'use client';
import { useState } from 'react';
import { interviews, Interview } from './recruitmentData';

const modeIcons: Record<string, string> = {
  'In-person': 'ri-map-pin-line',
  'Video Call': 'ri-video-chat-line',
  'Phone': 'ri-phone-line',
};

export default function InterviewsTab() {
  const [data] = useState<Interview[]>(interviews);
  const [filterStatus, setFilterStatus] = useState('All');
  const [showFeedbackId, setShowFeedbackId] = useState<string | null>(null);
  const [feedbackForm, setFeedbackForm] = useState({ technical: 0, communication: 0, culturalFit: 0, overall: 0, recommendation: '' as 'Hire' | 'No Hire' | 'Maybe' | '', notes: '' });

  const filtered = data.filter(i => filterStatus === 'All' || i.status === filterStatus);

  const RatingSelector = ({ label, value, onChange }: { label: string; value: number; onChange: (v: number) => void }) => (
    <div className="flex items-center gap-3">
      <span className="text-sm text-gray-600 w-28">{label}</span>
      <div className="flex gap-1">
        {[1, 2, 3, 4, 5].map(n => (
          <button key={n} onClick={() => onChange(n)} className={`w-8 h-8 flex items-center justify-center rounded-lg border cursor-pointer transition-all ${value >= n ? 'border-yellow-400 bg-yellow-50' : 'border-gray-200 hover:border-gray-300'}`}>
            <i className={value >= n ? 'ri-star-fill text-yellow-400 text-sm' : 'ri-star-line text-gray-300 text-sm'}></i>
          </button>
        ))}
      </div>
      <span className="text-sm font-semibold text-gray-700 w-8">{value > 0 ? `${value}/5` : '—'}</span>
    </div>
  );

  return (
    <div>
      <div className="flex flex-wrap items-center gap-3 mb-5">
        <div className="flex gap-2">
          {['All', 'Scheduled', 'Completed', 'Cancelled'].map(s => (
            <button key={s} onClick={() => setFilterStatus(s)} className={`px-3 py-1.5 rounded-lg text-sm font-medium cursor-pointer transition-all whitespace-nowrap ${filterStatus === s ? 'text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`} style={filterStatus === s ? { background: '#b828a0' } : {}}>
              {s}
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-3">
        {filtered.map(interview => (
          <div key={interview.id} className="bg-white border border-gray-100 rounded-xl p-5 shadow-sm">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0" style={{ background: '#b828a0' }}>
                  {interview.candidateName.split(' ').map(n => n[0]).join('').slice(0, 2)}
                </div>
                <div>
                  <div className="font-semibold text-gray-800">{interview.candidateName}</div>
                  <div className="text-sm text-gray-500">{interview.jobTitle} · {interview.round}</div>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${interview.status === 'Completed' ? 'bg-green-100 text-green-700' : interview.status === 'Scheduled' ? 'bg-blue-100 text-blue-700' : interview.status === 'Cancelled' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-600'}`}>{interview.status}</span>
              </div>
            </div>

            <div className="grid grid-cols-3 gap-4 mb-3">
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-calendar-line text-gray-400 text-sm"></i></div>
                <span>{interview.scheduledDate} at {interview.scheduledTime}</span>
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <div className="w-4 h-4 flex items-center justify-center"><i className={`${modeIcons[interview.mode]} text-gray-400 text-sm`}></i></div>
                <span>{interview.mode}</span>
              </div>
              <div className="flex items-center gap-2 text-sm text-gray-600">
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-group-line text-gray-400 text-sm"></i></div>
                <span>{interview.interviewers.join(', ')}</span>
              </div>
            </div>

            {interview.meetingLink && (
              <div className="bg-blue-50 border border-blue-100 rounded-lg px-3 py-2 mb-3 flex items-center gap-2">
                <div className="w-4 h-4 flex items-center justify-center"><i className="ri-link text-blue-500 text-sm"></i></div>
                <a href={interview.meetingLink} target="_blank" rel="noreferrer" className="text-blue-600 text-sm hover:underline cursor-pointer">{interview.meetingLink}</a>
              </div>
            )}

            {interview.feedback ? (
              <div className="bg-gray-50 rounded-xl p-4 border border-gray-100">
                <div className="text-xs font-semibold text-gray-600 mb-3">Interview Feedback</div>
                <div className="grid grid-cols-2 gap-2 mb-3">
                  {[
                    { label: 'Technical Skills', score: interview.feedback.technical },
                    { label: 'Communication', score: interview.feedback.communication },
                    { label: 'Cultural Fit', score: interview.feedback.culturalFit },
                    { label: 'Overall', score: interview.feedback.overall },
                  ].map(item => (
                    <div key={item.label} className="flex items-center gap-2">
                      <span className="text-xs text-gray-500 w-28">{item.label}</span>
                      <div className="flex gap-0.5">
                        {[1, 2, 3, 4, 5].map(n => (
                          <i key={n} className={n <= item.score ? 'ri-star-fill text-yellow-400 text-xs' : 'ri-star-line text-gray-300 text-xs'}></i>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xs text-gray-500">Recommendation:</span>
                  <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${interview.feedback.recommendation === 'Hire' ? 'bg-green-100 text-green-700' : interview.feedback.recommendation === 'No Hire' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700'}`}>{interview.feedback.recommendation}</span>
                </div>
                <p className="text-xs text-gray-600 italic">"{interview.feedback.notes}"</p>
              </div>
            ) : interview.status === 'Scheduled' && (
              <div className="mt-2">
                {showFeedbackId === interview.id ? (
                  <div className="border border-gray-200 rounded-xl p-4 space-y-3">
                    <div className="text-sm font-semibold text-gray-700 mb-2">Submit Feedback</div>
                    <RatingSelector label="Technical Skills" value={feedbackForm.technical} onChange={v => setFeedbackForm(f => ({ ...f, technical: v }))} />
                    <RatingSelector label="Communication" value={feedbackForm.communication} onChange={v => setFeedbackForm(f => ({ ...f, communication: v }))} />
                    <RatingSelector label="Cultural Fit" value={feedbackForm.culturalFit} onChange={v => setFeedbackForm(f => ({ ...f, culturalFit: v }))} />
                    <RatingSelector label="Overall Rating" value={feedbackForm.overall} onChange={v => setFeedbackForm(f => ({ ...f, overall: v }))} />
                    <div>
                      <div className="text-sm text-gray-600 mb-1">Recommendation</div>
                      <div className="flex gap-2">
                        {(['Hire', 'No Hire', 'Maybe'] as const).map(r => (
                          <button key={r} onClick={() => setFeedbackForm(f => ({ ...f, recommendation: r }))} className={`px-3 py-1.5 rounded-lg text-sm font-medium border cursor-pointer transition-all whitespace-nowrap ${feedbackForm.recommendation === r ? (r === 'Hire' ? 'border-green-400 bg-green-50 text-green-700' : r === 'No Hire' ? 'border-red-400 bg-red-50 text-red-700' : 'border-yellow-400 bg-yellow-50 text-yellow-700') : 'border-gray-200 text-gray-500 hover:border-gray-300'}`}>{r}</button>
                        ))}
                      </div>
                    </div>
                    <div>
                      <textarea value={feedbackForm.notes} onChange={e => setFeedbackForm(f => ({ ...f, notes: e.target.value }))} placeholder="Additional notes about the candidate..." rows={3} maxLength={500} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-pink-300 resize-none" />
                    </div>
                    <div className="flex gap-2">
                      <button onClick={() => setShowFeedbackId(null)} className="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 cursor-pointer whitespace-nowrap">Cancel</button>
                      <button onClick={() => setShowFeedbackId(null)} className="px-3 py-1.5 rounded-lg text-sm font-medium text-white cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Submit Feedback</button>
                    </div>
                  </div>
                ) : (
                  <button onClick={() => setShowFeedbackId(interview.id)} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-pink-200 text-sm text-pink-700 hover:bg-pink-50 cursor-pointer whitespace-nowrap">
                    <div className="w-4 h-4 flex items-center justify-center"><i className="ri-feedback-line text-sm"></i></div>
                    Submit Feedback
                  </button>
                )}
              </div>
            )}
          </div>
        ))}
        {filtered.length === 0 && <div className="text-center py-10 text-gray-400 text-sm">No interviews found</div>}
      </div>
    </div>
  );
}