import { useStudentStore } from '@/stores/studentStore';
import { useUIStore } from '@/stores/uiStore';
import { Avatar, SkillLevelBadge, StatusBadge, ProgressRing, WhatsAppButton } from '@/components/common';
import { formatDate, calculateAge } from '@/lib/formatters';
import { Phone, Calendar, User, MapPin, MessageCircle } from 'lucide-react';

export default function AssistantStudentDetail() {
  const { selectedStudent } = useStudentStore();
  const { goBack } = useUIStore();

  const s = selectedStudent;
  if (!s) return null;

  return (
    <div className="px-4 pt-4 pb-4 space-y-4">
      {/* Profile Header */}
      <div className="bg-white rounded-2xl p-6 card-shadow text-center">
        <Avatar name={s.fullName} size="xl" photoUrl={s.photoUrl} />
        <h2 className="text-xl font-bold text-gray-900 mt-3">{s.fullName}</h2>
        <p className="text-sm font-medium text-orange-500 mt-1">{s.studentId}</p>
        <div className="flex items-center justify-center gap-2 mt-2">
          <SkillLevelBadge level={s.skillLevel} />
          <StatusBadge status="active" />
        </div>
      </div>

      {/* Info Grid */}
      <div className="grid grid-cols-2 gap-3">
        {[
          { icon: <Phone className="w-4 h-4" />, label: 'Phone', value: s.phone },
          { icon: <Phone className="w-4 h-4" />, label: 'Guardian', value: s.guardianPhone },
          { icon: <Calendar className="w-4 h-4" />, label: 'Joined', value: formatDate(s.joiningDate) },
          { icon: <User className="w-4 h-4" />, label: 'Age', value: `${s.age || calculateAge(s.dateOfBirth)} years` },
          { icon: <Calendar className="w-4 h-4" />, label: 'DOB', value: formatDate(s.dateOfBirth) },
          { icon: <MapPin className="w-4 h-4" />, label: 'Batch', value: s.batchName || `Batch ${s.batchId}` },
        ].map((item, i) => (
          <div key={i} className="bg-white rounded-xl p-3 card-shadow">
            <div className="text-orange-500 mb-1">{item.icon}</div>
            <p className="text-[10px] text-gray-400 uppercase font-medium">{item.label}</p>
            <p className="text-sm font-semibold text-gray-800 mt-0.5">{item.value}</p>
          </div>
        ))}
      </div>

      {/* Fee Status - Assistant View: ONLY status badge, NO amounts */}
      <div className={`bg-white rounded-2xl p-4 card-shadow ${s.feeStatus === 'due' ? 'border-l-4 border-red-500' : ''}`}>
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-bold text-gray-900">Fee Status</h3>
          <StatusBadge status={s.feeStatus || 'pending'} />
        </div>
        <p className="text-xs text-gray-400 mt-2">
          {s.feeStatus === 'paid' 
            ? 'Fees are up to date for this month.' 
            : s.feeStatus === 'due' 
            ? 'Fees are pending for this month. Please follow up.' 
            : 'Fee status being verified.'}
        </p>
      </div>

      {/* Attendance */}
      <div className="bg-white rounded-2xl p-4 card-shadow">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-bold text-gray-900">Attendance</h3>
          <span className="text-xs text-orange-500 font-medium">This Month</span>
        </div>
        <div className="flex items-center gap-4 mt-2">
          <ProgressRing percentage={75} size={64} />
          <div className="flex-1">
            <div className="flex justify-between text-sm">
              <span className="text-gray-500">Present</span>
              <span className="font-semibold text-gray-800">18 days</span>
            </div>
            <div className="flex justify-between text-sm mt-1">
              <span className="text-gray-500">Absent</span>
              <span className="font-semibold text-gray-800">2 days</span>
            </div>
          </div>
        </div>
      </div>

      {/* WhatsApp Only */}
      <div className="flex items-center justify-center gap-4 pt-2 pb-4">
        <WhatsAppButton phone={s.phone} message={`Hi ${s.fullName}, this is from SkatePro Academy!`} />
        <div className="text-center">
          <div className="w-14 h-14 rounded-full bg-orange-500 flex items-center justify-center shadow-md">
            <MessageCircle className="w-5 h-5 text-white" />
          </div>
          <span className="text-[10px] text-gray-500 mt-1 block">Message</span>
        </div>
      </div>
    </div>
  );
}
