import { useState } from "react";
import type { ContractPhase } from "../../lib/api";

/** Phase configuration for styling */
const phaseConfig: Record<
  ContractPhase,
  { label: string; color: string; borderColor: string }
> = {
  research: {
    label: "Research",
    color: "text-purple-400",
    borderColor: "border-purple-400/50",
  },
  specify: {
    label: "Specify",
    color: "text-blue-400",
    borderColor: "border-blue-400/50",
  },
  plan: {
    label: "Plan",
    color: "text-cyan-400",
    borderColor: "border-cyan-400/50",
  },
  execute: {
    label: "Execute",
    color: "text-green-400",
    borderColor: "border-green-400/50",
  },
  review: {
    label: "Review",
    color: "text-yellow-400",
    borderColor: "border-yellow-400/50",
  },
};

export interface PhaseConfirmationData {
  questionId: string;
  contractId: string;
  contractName?: string;
  currentPhase: ContractPhase;
  nextPhase: ContractPhase;
  summary?: string;
  deliverables?: Array<{
    name: string;
    completed: boolean;
  }>;
}

interface PhaseConfirmationModalProps {
  data: PhaseConfirmationData;
  onApprove: (questionId: string) => Promise<void>;
  onRequestChanges: (questionId: string, feedback: string) => Promise<void>;
  onDismiss?: () => void;
}

export function PhaseConfirmationModal({
  data,
  onApprove,
  onRequestChanges,
  onDismiss,
}: PhaseConfirmationModalProps) {
  const [mode, setMode] = useState<"choice" | "feedback">("choice");
  const [feedback, setFeedback] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const currentConfig = phaseConfig[data.currentPhase];
  const nextConfig = phaseConfig[data.nextPhase];

  const handleApprove = async () => {
    setSubmitting(true);
    setError(null);
    try {
      await onApprove(data.questionId);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to approve");
    } finally {
      setSubmitting(false);
    }
  };

  const handleRequestChanges = () => {
    setMode("feedback");
  };

  const handleSubmitFeedback = async () => {
    if (!feedback.trim()) return;
    setSubmitting(true);
    setError(null);
    try {
      await onRequestChanges(data.questionId, feedback.trim());
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to submit feedback");
    } finally {
      setSubmitting(false);
    }
  };

  const handleBack = () => {
    setMode("choice");
    setFeedback("");
    setError(null);
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
      <div className="w-full max-w-lg mx-4 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-[rgba(117,170,252,0.2)]">
          <div className="flex items-center gap-2">
            <span className="text-amber-400 text-lg">?</span>
            <h2 className="font-mono text-sm text-[#75aafc] uppercase tracking-wide">
              Phase Transition Confirmation
            </h2>
          </div>
          {onDismiss && (
            <button
              onClick={onDismiss}
              className="text-[#555] hover:text-[#9bc3ff] transition-colors"
              aria-label="Dismiss"
            >
              <span className="text-xl">&times;</span>
            </button>
          )}
        </div>

        {/* Content */}
        <div className="p-4 space-y-4">
          {/* Contract name */}
          {data.contractName && (
            <p className="font-mono text-sm text-[#9bc3ff]">
              Contract: <span className="text-[#dbe7ff]">{data.contractName}</span>
            </p>
          )}

          {/* Phase transition indicator */}
          <div className="flex items-center justify-center gap-3 py-4">
            <div
              className={`px-4 py-2 border ${currentConfig.borderColor} ${currentConfig.color} font-mono text-sm uppercase`}
            >
              {currentConfig.label}
            </div>
            <div className="text-[#555] font-mono">&rarr;</div>
            <div
              className={`px-4 py-2 border ${nextConfig.borderColor} ${nextConfig.color} font-mono text-sm uppercase`}
            >
              {nextConfig.label}
            </div>
          </div>

          {/* Summary */}
          {data.summary && (
            <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.15)] p-3">
              <p className="font-mono text-xs text-[#9bc3ff] mb-2 uppercase">
                Phase Summary
              </p>
              <p className="font-mono text-sm text-[#dbe7ff] whitespace-pre-wrap">
                {data.summary}
              </p>
            </div>
          )}

          {/* Deliverables checklist */}
          {data.deliverables && data.deliverables.length > 0 && (
            <div className="bg-[#0d1b2d] border border-[rgba(117,170,252,0.15)] p-3">
              <p className="font-mono text-xs text-[#9bc3ff] mb-2 uppercase">
                Phase Deliverables
              </p>
              <ul className="space-y-1">
                {data.deliverables.map((d, idx) => (
                  <li key={idx} className="flex items-center gap-2">
                    <span
                      className={
                        d.completed ? "text-green-400" : "text-[#555]"
                      }
                    >
                      {d.completed ? "+" : "-"}
                    </span>
                    <span
                      className={`font-mono text-sm ${
                        d.completed ? "text-[#9bc3ff]" : "text-[#555]"
                      }`}
                    >
                      {d.name}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Error message */}
          {error && (
            <div className="bg-red-900/20 border border-red-500/30 p-3 text-red-400 font-mono text-sm">
              {error}
            </div>
          )}

          {/* Choice mode */}
          {mode === "choice" && (
            <div className="space-y-3 pt-4 border-t border-[rgba(117,170,252,0.2)]">
              <p className="font-mono text-sm text-[#dbe7ff]">
                Ready to advance to the {nextConfig.label.toLowerCase()} phase?
              </p>
              <div className="flex gap-3">
                <button
                  onClick={handleApprove}
                  disabled={submitting}
                  className="flex-1 px-4 py-2.5 font-mono text-sm text-[#dbe7ff] bg-green-700/30 border border-green-400/50 hover:bg-green-700/40 hover:border-green-400/70 disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
                >
                  {submitting ? "Advancing..." : "Approve & Advance"}
                </button>
                <button
                  onClick={handleRequestChanges}
                  disabled={submitting}
                  className="flex-1 px-4 py-2.5 font-mono text-sm text-amber-300 border border-amber-500/50 hover:border-amber-400/70 hover:bg-amber-900/20 disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
                >
                  Request Changes
                </button>
              </div>
            </div>
          )}

          {/* Feedback mode */}
          {mode === "feedback" && (
            <div className="space-y-3 pt-4 border-t border-[rgba(117,170,252,0.2)]">
              <div>
                <label className="block font-mono text-xs text-[#9bc3ff] uppercase mb-2">
                  What changes are needed before advancing?
                </label>
                <textarea
                  value={feedback}
                  onChange={(e) => setFeedback(e.target.value)}
                  placeholder="Describe what needs to be changed or completed..."
                  rows={4}
                  className="w-full px-3 py-2 bg-[#0d1b2d] border border-[#3f6fb3] text-[#dbe7ff] font-mono text-sm focus:outline-none focus:border-[#75aafc] resize-none"
                  autoFocus
                />
              </div>
              <div className="flex gap-3">
                <button
                  onClick={handleBack}
                  disabled={submitting}
                  className="px-4 py-2 font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors uppercase"
                >
                  &larr; Back
                </button>
                <button
                  onClick={handleSubmitFeedback}
                  disabled={submitting || !feedback.trim()}
                  className="flex-1 px-4 py-2 font-mono text-sm text-[#dbe7ff] bg-[#0f3c78] border border-[#3f6fb3] hover:bg-[#153667] disabled:opacity-50 disabled:cursor-not-allowed transition-colors uppercase"
                >
                  {submitting ? "Submitting..." : "Submit Feedback"}
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/** Inline variant for task output view */
interface PhaseConfirmationInlineProps {
  data: PhaseConfirmationData;
  isPending: boolean;
  onApprove: (questionId: string) => Promise<void>;
  onRequestChanges: (questionId: string, feedback: string) => Promise<void>;
}

export function PhaseConfirmationInline({
  data,
  isPending,
  onApprove,
  onRequestChanges,
}: PhaseConfirmationInlineProps) {
  const [mode, setMode] = useState<"choice" | "feedback">("choice");
  const [feedback, setFeedback] = useState("");
  const [submitting, setSubmitting] = useState(false);

  const currentConfig = phaseConfig[data.currentPhase];
  const nextConfig = phaseConfig[data.nextPhase];

  const handleApprove = async () => {
    setSubmitting(true);
    try {
      await onApprove(data.questionId);
    } finally {
      setSubmitting(false);
    }
  };

  const handleSubmitFeedback = async () => {
    if (!feedback.trim()) return;
    setSubmitting(true);
    try {
      await onRequestChanges(data.questionId, feedback.trim());
      setFeedback("");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="bg-[#0f1825] border border-[rgba(117,170,252,0.4)] rounded p-3 my-2">
      <div className="flex items-center gap-2 mb-3">
        <span className="text-[#75aafc] text-lg">?</span>
        <span className="font-mono text-sm text-[#75aafc] uppercase">
          Phase Transition
        </span>
        {!isPending && (
          <span className="text-green-400 text-xs font-mono">(Responded)</span>
        )}
      </div>

      {/* Phase transition indicator */}
      <div className="flex items-center gap-2 mb-3">
        <span className={`font-mono text-sm ${currentConfig.color}`}>
          {currentConfig.label}
        </span>
        <span className="text-[#555] font-mono">&rarr;</span>
        <span className={`font-mono text-sm ${nextConfig.color}`}>
          {nextConfig.label}
        </span>
      </div>

      {/* Summary */}
      {data.summary && (
        <p className="font-mono text-xs text-[#9bc3ff] mb-3 whitespace-pre-wrap">
          {data.summary}
        </p>
      )}

      {/* Deliverables */}
      {data.deliverables && data.deliverables.length > 0 && (
        <div className="mb-3">
          <p className="font-mono text-[10px] text-[#555] uppercase mb-1">
            Deliverables
          </p>
          <div className="flex flex-wrap gap-2">
            {data.deliverables.map((d, idx) => (
              <span
                key={idx}
                className={`px-2 py-0.5 font-mono text-xs border ${
                  d.completed
                    ? "border-green-400/30 text-green-400"
                    : "border-[#555] text-[#555]"
                }`}
              >
                {d.completed ? "+" : "-"} {d.name}
              </span>
            ))}
          </div>
        </div>
      )}

      {isPending && (
        <>
          {mode === "choice" && (
            <div className="flex flex-wrap gap-2">
              <button
                onClick={handleApprove}
                disabled={submitting}
                className="px-3 py-1.5 font-mono text-xs bg-green-700/30 border border-green-400/50 text-green-300 hover:bg-green-700/40 disabled:opacity-50 transition-colors"
              >
                {submitting ? "..." : "Approve & Advance"}
              </button>
              <button
                onClick={() => setMode("feedback")}
                disabled={submitting}
                className="px-3 py-1.5 font-mono text-xs border border-amber-500/50 text-amber-300 hover:bg-amber-900/20 disabled:opacity-50 transition-colors"
              >
                Request Changes
              </button>
            </div>
          )}

          {mode === "feedback" && (
            <div className="space-y-2">
              <textarea
                value={feedback}
                onChange={(e) => setFeedback(e.target.value)}
                placeholder="Describe what changes are needed..."
                rows={2}
                className="w-full px-2 py-1.5 bg-[#0a1525] border border-[rgba(117,170,252,0.3)] text-[#dbe7ff] font-mono text-xs focus:outline-none focus:border-[#75aafc] resize-none"
                autoFocus
              />
              <div className="flex gap-2">
                <button
                  onClick={() => setMode("choice")}
                  disabled={submitting}
                  className="px-2 py-1 font-mono text-[10px] text-[#555] hover:text-[#9bc3ff] transition-colors"
                >
                  Cancel
                </button>
                <button
                  onClick={handleSubmitFeedback}
                  disabled={submitting || !feedback.trim()}
                  className="px-3 py-1 font-mono text-xs bg-[#0f3c78] border border-[#3f6fb3] text-[#dbe7ff] hover:bg-[#153667] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                >
                  {submitting ? "..." : "Submit"}
                </button>
              </div>
            </div>
          )}
        </>
      )}
    </div>
  );
}