'use client';
import { useState } from 'react';
import { motion } from 'framer-motion';

export interface IPIType {
  id: string;
  employeeId: string;
  workPlanTaskId: string;
  taskTitle: string;
  indicatorName: string;
  target: string;
  measurementCriteria: string;
  expectedPerformance: string;
  ratingScale: string;
  supervisorRating?: number;
  supervisorComment?: string;
  progress: number;
}

const ratingColor = (r?: number) => {
  if (!r) return 'bg-gray-100 text-gray-600';
  if (r >= 4) return 'bg-green-100 text-green-700';
  if (r >= 3) return 'bg-blue-100 text-blue-700';
  if (r >= 2) return 'bg-amber-100 text-amber-700';
  return 'bg-red-100 text-red-700';
};

interface Props {
  ipi: IPIType;
  index: number;
  onUpdate?: (updated: IPIType) => void;
}

export default function IPICard({ ipi, index, onUpdate }: Props) {
  const [editing, setEditing] = useState(false);
  const [form, setForm] = useState<IPIType>({ ...ipi });

  const handleSave = () => {
    onUpdate?.(form);
    setEditing(false);
  };

  return (
    <>
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.35, delay: index * 0.08 }}
        whileHover={{ scale: 1.015, y: -3, boxShadow: '0 10px 32px rgba(0,0,0,0.08)' }}
        whileTap={{ scale: 0.985 }}
        className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 cursor-pointer"
      >
        <div className="flex items-start justify-between mb-3">
          <div className="flex-1 pr-3">
            <div className="flex items-center gap-2 mb-1.5 flex-wrap">
              <span className="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-indigo-100 text-indigo-700">
                Linked: {form.taskTitle}
              </span>
            </div>
            <h4 className="font-semibold text-gray-800 text-sm">{form.indicatorName}</h4>
            <p className="text-xs text-gray-500 mt-1">Target: {form.target}</p>
          </div>
          <div className="text-right flex-shrink-0">
            <span className="text-xs text-gray-400">Rating Scale</span>
            <p className="text-xs font-semibold text-gray-700">{form.ratingScale}</p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 mb-3">
          <div className="bg-gray-50 rounded-lg p-2">
            <p className="text-xs text-gray-400">Measurement</p>
            <p className="text-xs font-medium text-gray-700">{form.measurementCriteria}</p>
          </div>
          <div className="bg-gray-50 rounded-lg p-2">
            <p className="text-xs text-gray-400">Expected</p>
            <p className="text-xs font-medium text-gray-700">{form.expectedPerformance}</p>
          </div>
        </div>

        <div className="flex items-center gap-3 mb-3">
          <div className="flex-1 bg-gray-100 rounded-full h-2">
            <motion.div
              initial={{ width: 0 }}
              whileInView={{ width: `${form.progress}%` }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="h-2 rounded-full"
              style={{ background: form.progress >= 80 ? '#16a34a' : form.progress >= 50 ? '#b828a0' : '#dc2626' }}
            />
          </div>
          <span className="text-xs font-bold text-gray-700 w-10 text-right">{form.progress}%</span>
        </div>

        {form.supervisorRating !== undefined && (
          <div className="border-t border-gray-100 pt-3 mb-3">
            <p className="text-xs font-semibold text-gray-600 mb-1.5">Supervisor Rating</p>
            <div className="flex items-center gap-3">
              <span className={`text-sm font-bold px-3 py-1 rounded-full ${ratingColor(form.supervisorRating)}`}>
                {form.supervisorRating}/5
              </span>
              {form.supervisorComment && (
                <p className="text-xs text-gray-600 italic">"{form.supervisorComment}"</p>
              )}
            </div>
          </div>
        )}

        <button onClick={e => { e.stopPropagation(); setForm({ ...ipi }); setEditing(true); }}
          className="mt-1 flex items-center gap-1 text-xs px-3 py-1.5 rounded-lg text-white font-medium cursor-pointer whitespace-nowrap"
          style={{ background: '#b828a0' }}>
          <i className="ri-edit-line text-xs"></i> Update
        </button>
      </motion.div>

      {editing && (
        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between" style={{ background: '#b828a0' }}>
              <h3 className="text-white font-bold text-base">Update IPI</h3>
              <button onClick={() => setEditing(false)} className="w-7 h-7 flex items-center justify-center cursor-pointer">
                <i className="ri-close-line text-white text-lg"></i>
              </button>
            </div>
            <div className="p-5 space-y-3">
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Indicator Name</label>
                <input value={form.indicatorName} onChange={e => setForm(f => ({ ...f, indicatorName: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Target</label>
                <input value={form.target} onChange={e => setForm(f => ({ ...f, target: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Measurement Criteria</label>
                <input value={form.measurementCriteria} onChange={e => setForm(f => ({ ...f, measurementCriteria: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div>
                <label className="text-xs font-medium text-gray-600 block mb-1">Expected Performance</label>
                <input value={form.expectedPerformance} onChange={e => setForm(f => ({ ...f, expectedPerformance: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Progress (%)</label>
                  <input type="number" min={0} max={100} value={form.progress} onChange={e => setForm(f => ({ ...f, progress: Math.min(100, Math.max(0, Number(e.target.value))) }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                </div>
                <div>
                  <label className="text-xs font-medium text-gray-600 block mb-1">Rating Scale</label>
                  <input value={form.ratingScale} onChange={e => setForm(f => ({ ...f, ratingScale: e.target.value }))} className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm outline-none" />
                </div>
              </div>
              <div className="flex gap-2 pt-2">
                <button onClick={() => setEditing(false)} className="flex-1 py-2.5 border border-gray-200 rounded-xl text-sm text-gray-600 cursor-pointer whitespace-nowrap">Cancel</button>
                <button onClick={handleSave} className="flex-1 py-2.5 text-white rounded-xl text-sm font-semibold cursor-pointer whitespace-nowrap" style={{ background: '#b828a0' }}>Save Changes</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}