import { useState, useCallback } from "react";
import {
  analyzeTranscript,
  createContractFromTranscript,
  updateContractFromTranscript,
  type TranscriptAnalysisResult,
  type CreateContractResponse,
} from "../../lib/listenApi";

interface TranscriptAnalysisPanelProps {
  fileId: string;
  contractId: string;
  selectedContractId: string | null;
  onContractCreated?: (response: CreateContractResponse) => void;
  onContractUpdated?: (response: CreateContractResponse) => void;
  onClose?: () => void;
}

type AnalysisState = "idle" | "analyzing" | "analyzed" | "creating" | "updating";

export function TranscriptAnalysisPanel({
  fileId,
  contractId,
  selectedContractId,
  onContractCreated,
  onContractUpdated,
  onClose,
}: TranscriptAnalysisPanelProps) {
  const [state, setState] = useState<AnalysisState>("idle");
  const [analysis, setAnalysis] = useState<TranscriptAnalysisResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [successMessage, setSuccessMessage] = useState<string | null>(null);

  const handleAnalyze = useCallback(async () => {
    setState("analyzing");
    setError(null);
    setSuccessMessage(null);

    try {
      const response = await analyzeTranscript(fileId);
      setAnalysis(response.analysis);
      setState("analyzed");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to analyze transcript");
      setState("idle");
    }
  }, [fileId]);

  const handleCreateContract = useCallback(async () => {
    if (!analysis) return;

    setState("creating");
    setError(null);

    try {
      const response = await createContractFromTranscript(fileId, {
        name: analysis.suggestedContractName,
        description: analysis.suggestedDescription,
        includeRequirements: true,
        includeDecisions: true,
        includeActionItems: true,
      });
      setSuccessMessage(`Created contract "${response.contractName}"`);
      onContractCreated?.(response);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create contract");
      setState("analyzed");
    }
  }, [fileId, analysis, onContractCreated]);

  const handleUpdateContract = useCallback(async () => {
    if (!analysis || !selectedContractId) return;

    setState("updating");
    setError(null);

    try {
      const response = await updateContractFromTranscript(fileId, selectedContractId, {
        description: analysis.suggestedDescription,
        includeRequirements: true,
        includeDecisions: true,
        includeActionItems: true,
      });
      setSuccessMessage(`Updated contract "${response.contractName}"`);
      onContractUpdated?.(response);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update contract");
      setState("analyzed");
    }
  }, [fileId, analysis, selectedContractId, onContractUpdated]);

  // Group requirements by category
  const groupedRequirements = analysis?.requirements.reduce((acc, req) => {
    const category = req.category || "General";
    if (!acc[category]) {
      acc[category] = [];
    }
    acc[category].push(req);
    return acc;
  }, {} as Record<string, typeof analysis.requirements>) || {};

  return (
    <div className="panel p-4 flex flex-col gap-4">
      {/* Header */}
      <div className="flex justify-between items-center border-b border-dashed border-[rgba(117,170,252,0.35)] pb-2">
        <div className="font-mono text-xs text-[#9bc3ff] tracking-wide uppercase">
          TRANSCRIPT ANALYSIS//
        </div>
        {onClose && (
          <button
            onClick={onClose}
            className="font-mono text-xs text-[#9bc3ff] hover:text-[#dbe7ff] transition-colors"
          >
            [X]
          </button>
        )}
      </div>

      {/* Error display */}
      {error && (
        <div className="font-mono text-xs text-red-400 px-2 py-2 border border-red-400/50 bg-red-400/10">
          {error}
        </div>
      )}

      {/* Success message */}
      {successMessage && (
        <div className="font-mono text-xs text-green-400 px-2 py-2 border border-green-400/50 bg-green-400/10">
          {successMessage}
        </div>
      )}

      {/* Initial state - Show analyze button */}
      {state === "idle" && (
        <div className="flex flex-col items-center gap-3 py-4">
          <p className="font-mono text-sm text-[#9bc3ff] text-center">
            Transcript saved. Analyze to extract requirements, decisions, and action items.
          </p>
          <button
            onClick={handleAnalyze}
            className="px-4 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase tracking-wide"
          >
            Analyze Transcript
          </button>
        </div>
      )}

      {/* Analyzing state */}
      {state === "analyzing" && (
        <div className="flex flex-col items-center gap-3 py-8">
          <div className="w-6 h-6 border-2 border-[#3f6fb3] border-t-[#75aafc] rounded-full animate-spin" />
          <p className="font-mono text-sm text-[#9bc3ff]">Analyzing transcript...</p>
        </div>
      )}

      {/* Analysis results */}
      {(state === "analyzed" || state === "creating" || state === "updating") && analysis && (
        <div className="flex flex-col gap-4 overflow-y-auto max-h-[60vh]">
          {/* Suggested Contract Info */}
          {(analysis.suggestedContractName || analysis.suggestedDescription) && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Suggested Contract
              </div>
              {analysis.suggestedContractName && (
                <div className="font-mono text-sm text-[#dbe7ff] mb-1">
                  {analysis.suggestedContractName}
                </div>
              )}
              {analysis.suggestedDescription && (
                <div className="font-mono text-xs text-[#9bc3ff]">
                  {analysis.suggestedDescription}
                </div>
              )}
            </div>
          )}

          {/* Requirements */}
          {Object.keys(groupedRequirements).length > 0 && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Requirements ({analysis.requirements.length})
              </div>
              {Object.entries(groupedRequirements).map(([category, reqs]) => (
                <div key={category} className="mb-3 last:mb-0">
                  <div className="font-mono text-[10px] text-[#3f6fb3] uppercase tracking-wider mb-1">
                    {category}
                  </div>
                  <ul className="space-y-1">
                    {reqs.map((req, idx) => (
                      <li key={idx} className="font-mono text-xs text-[#dbe7ff] flex gap-2">
                        <span className="text-[#3f6fb3]">-</span>
                        <span>{req.text}</span>
                        {req.speaker && (
                          <span className="text-[#9bc3ff] text-[10px]">({req.speaker})</span>
                        )}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}

          {/* Decisions */}
          {analysis.decisions.length > 0 && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Decisions ({analysis.decisions.length})
              </div>
              <ul className="space-y-2">
                {analysis.decisions.map((decision, idx) => (
                  <li key={idx} className="font-mono text-xs text-[#dbe7ff]">
                    <div className="flex gap-2">
                      <span className="text-[#3f6fb3]">-</span>
                      <span>{decision.text}</span>
                    </div>
                    {decision.context && (
                      <div className="ml-4 text-[10px] text-[#9bc3ff] mt-1">
                        Context: {decision.context}
                      </div>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Action Items */}
          {analysis.actionItems.length > 0 && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Action Items ({analysis.actionItems.length})
              </div>
              <ul className="space-y-2">
                {analysis.actionItems.map((item, idx) => (
                  <li key={idx} className="font-mono text-xs text-[#dbe7ff]">
                    <div className="flex gap-2 items-start">
                      <span className="text-[#3f6fb3]">-</span>
                      <div className="flex-1">
                        <span>{item.text}</span>
                        <div className="flex gap-2 mt-1">
                          {item.assignee && (
                            <span className="text-[10px] px-1.5 py-0.5 bg-[#0f1c2f] border border-[#3f6fb3] text-[#9bc3ff]">
                              @{item.assignee}
                            </span>
                          )}
                          {item.priority && (
                            <span
                              className={`text-[10px] px-1.5 py-0.5 border ${
                                item.priority === "high"
                                  ? "border-red-400/50 text-red-400 bg-red-400/10"
                                  : item.priority === "medium"
                                  ? "border-yellow-400/50 text-yellow-400 bg-yellow-400/10"
                                  : "border-[#3f6fb3] text-[#9bc3ff] bg-[#0f1c2f]"
                              }`}
                            >
                              {item.priority}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {/* Key Topics */}
          {analysis.keyTopics.length > 0 && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Key Topics
              </div>
              <div className="flex flex-wrap gap-2">
                {analysis.keyTopics.map((topic, idx) => (
                  <span
                    key={idx}
                    className="font-mono text-[10px] px-2 py-1 bg-[#0f1c2f] border border-[#3f6fb3] text-[#9bc3ff]"
                  >
                    {topic}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Speaker Statistics */}
          {analysis.speakerSummary.length > 0 && (
            <div className="border border-[rgba(117,170,252,0.25)] p-3">
              <div className="font-mono text-xs text-[#75aafc] uppercase tracking-wide mb-2">
                Speaker Statistics
              </div>
              <div className="space-y-2">
                {analysis.speakerSummary.map((speaker, idx) => (
                  <div key={idx} className="flex items-center gap-3">
                    <span className="font-mono text-xs text-[#dbe7ff] min-w-[100px]">
                      {speaker.speaker}
                    </span>
                    <div className="flex-1 h-2 bg-[#0f1c2f] overflow-hidden">
                      <div
                        className="h-full bg-[#3f6fb3]"
                        style={{ width: `${speaker.contributionPercentage}%` }}
                      />
                    </div>
                    <span className="font-mono text-[10px] text-[#9bc3ff] min-w-[40px] text-right">
                      {speaker.contributionPercentage.toFixed(0)}%
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Action Buttons */}
          <div className="flex gap-2 pt-2 border-t border-dashed border-[rgba(117,170,252,0.35)]">
            <button
              onClick={handleCreateContract}
              disabled={state === "creating" || state === "updating"}
              className="flex-1 px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#3f6fb3] hover:bg-[#153667] transition-colors uppercase tracking-wide disabled:opacity-50 disabled:cursor-not-allowed"
            >
              {state === "creating" ? "Creating..." : "Create New Contract"}
            </button>
            {selectedContractId && selectedContractId !== contractId && (
              <button
                onClick={handleUpdateContract}
                disabled={state === "creating" || state === "updating"}
                className="flex-1 px-3 py-2 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#0f3c78] hover:border-[#3f6fb3] transition-colors uppercase tracking-wide disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {state === "updating" ? "Updating..." : "Add to Current Contract"}
              </button>
            )}
          </div>
        </div>
      )}
    </div>
  );
}
