CapaKraken/apps/web/src/components/resources/SkillMatrixUpload.tsx

"use client";

import { useState, useRef } from "react";
import { trpc } from "~/lib/trpc/client.js";
import { parseSkillMatrixWorkbook, matchRoleName } from "~/lib/skillMatrixParser.js";
import type { SkillEntry } from "@planarchy/shared";

interface Props {
  resourceId: string;
  isOwner: boolean;  // true = self-service, false = manager import
  onClose: () => void;
  onSuccess: () => void;
}

type PreviewState = {
  skills: SkillEntry[];
  employeeInfo: {
    roleId?: string;
    portfolioUrl?: string;
  };
  matchedRoleName?: string;
};

export function SkillMatrixUpload({ resourceId, isOwner, onClose, onSuccess }: Props) {
  const [preview, setPreview] = useState<PreviewState | null>(null);
  const [parseError, setParseError] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const fileRef = useRef<HTMLInputElement>(null);

  const { data: roles } = trpc.role.list.useQuery({ isActive: true }, { staleTime: 60_000 });

  const selfMutation = trpc.resource.importSkillMatrix.useMutation({
    onSuccess: () => { setSubmitting(false); onSuccess(); },
    onError: (err) => { setSubmitting(false); setParseError(err.message); },
  });

  const managerMutation = trpc.resource.importSkillMatrixForResource.useMutation({
    onSuccess: () => { setSubmitting(false); onSuccess(); },
    onError: (err) => { setSubmitting(false); setParseError(err.message); },
  });

  async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setParseError(null);
    setPreview(null);

    try {
      const buffer = await file.arrayBuffer();
      const parsed = await parseSkillMatrixWorkbook(buffer);

      // Fuzzy match areaOfExpertise → roleId
      let roleId: string | undefined;
      let matchedRoleName: string | undefined;
      if (parsed.employeeInfo.areaOfExpertise && roles) {
        const roleNames = roles.map((r) => r.name);
        const matched = matchRoleName(parsed.employeeInfo.areaOfExpertise, roleNames);
        if (matched) {
          const role = roles.find((r) => r.name === matched);
          roleId = role?.id;
          matchedRoleName = matched;
        }
      }

      setPreview({
        skills: parsed.skills,
        employeeInfo: {
          ...(roleId !== undefined ? { roleId } : {}),
          ...(parsed.employeeInfo.portfolioUrl !== undefined ? { portfolioUrl: parsed.employeeInfo.portfolioUrl } : {}),
        },
        ...(matchedRoleName !== undefined ? { matchedRoleName } : {}),
      });
    } catch (err) {
      setParseError(String(err instanceof Error ? err.message : err));
    }
  }

  function handleConfirm() {
    if (!preview) return;
    setSubmitting(true);

    const payload = {
      skills: preview.skills,
      employeeInfo: {
        roleId: preview.employeeInfo.roleId,
        portfolioUrl: preview.employeeInfo.portfolioUrl,
      },
    };

    if (isOwner) {
      selfMutation.mutate(payload);
    } else {
      managerMutation.mutate({ resourceId, ...payload });
    }
  }

  const mainSkills = preview?.skills.filter((s) => s.isMainSkill) ?? [];

  return (
    <div
      className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-lg">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h2 className="text-base font-semibold text-gray-900">Update Skill Matrix</h2>
          <button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <div className="px-6 py-5 space-y-4">
          {/* File picker */}
          {!preview && (
            <div
              className="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-brand-400 transition-colors"
              onClick={() => fileRef.current?.click()}
            >
              <svg className="w-10 h-10 text-gray-300 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
              </svg>
              <p className="text-sm font-medium text-gray-700">Click to select skill matrix file</p>
              <p className="text-xs text-gray-400 mt-1">.xlsx accepted</p>
              <input
                ref={fileRef}
                type="file"
                accept=".xlsx,.xls"
                className="hidden"
                onChange={handleFile}
              />
            </div>
          )}

          {parseError && (
            <div className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
              {parseError}
            </div>
          )}

          {/* Preview */}
          {preview && (
            <div className="space-y-3">
              <div className="grid grid-cols-2 gap-3">
                <div className="bg-brand-50 rounded-lg p-3 text-center">
                  <div className="text-2xl font-bold text-brand-700">{preview.skills.length}</div>
                  <div className="text-xs text-brand-600 mt-0.5">Skills found</div>
                </div>
                <div className="bg-green-50 rounded-lg p-3 text-center">
                  <div className="text-2xl font-bold text-green-700">{mainSkills.length}</div>
                  <div className="text-xs text-green-600 mt-0.5">Main skills</div>
                </div>
              </div>

              {mainSkills.length > 0 && (
                <div>
                  <p className="text-xs font-medium text-gray-500 mb-1.5">Main skills:</p>
                  <div className="flex flex-wrap gap-1.5">
                    {mainSkills.map((s) => (
                      <span key={s.skill} className="px-2.5 py-0.5 text-xs font-medium rounded-full bg-amber-50 text-amber-700 border border-amber-200">
                        ★ {s.skill}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {preview.matchedRoleName && (
                <p className="text-xs text-gray-600">
                  <span className="font-medium">Area of expertise</span> matched to plANARCHY role:{" "}
                  <span className="font-semibold text-brand-700">{preview.matchedRoleName}</span>
                </p>
              )}

              {preview.employeeInfo.portfolioUrl && (
                <p className="text-xs text-gray-600 truncate">
                  <span className="font-medium">Portfolio URL:</span>{" "}
                  <a href={preview.employeeInfo.portfolioUrl} target="_blank" rel="noopener noreferrer" className="text-brand-600 hover:underline">
                    {preview.employeeInfo.portfolioUrl}
                  </a>
                </p>
              )}

              <p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
                This will <strong>replace all existing skills</strong> for this resource.
              </p>

              <button
                type="button"
                onClick={() => { setPreview(null); setParseError(null); if (fileRef.current) fileRef.current.value = ""; }}
                className="text-xs text-gray-400 hover:text-gray-600 underline"
              >
                Choose a different file
              </button>
            </div>
          )}
        </div>

        <div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-xl">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50"
          >
            Cancel
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={!preview || submitting}
            className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
          >
            {submitting ? "Importing…" : "Confirm Import"}
          </button>
        </div>
      </div>
    </div>
  );
}