"use client";

import { useEffect, useState } from "react";
import { getChannelSummary } from "@/lib/api";
import type { ChannelSummary as ChannelSummaryType } from "@/lib/api";
import { Sparkles, FileText, CheckCircle2, Users, RefreshCw, Loader2 } from "lucide-react";

interface ChannelSummaryProps {
  channelId: string;
}

export function ChannelSummary({ channelId }: ChannelSummaryProps) {
  const [summary, setSummary] = useState<ChannelSummaryType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadSummary = () => {
    setLoading(true);
    setError("");
    getChannelSummary(channelId)
      .then((data) => setSummary(data))
      .catch((err) => {
        console.error("Failed to load channel summary:", err);
        setError("Failed to generate channel summary");
      })
      .finally(() => setLoading(false));
  };

  useEffect(() => {
    loadSummary();
  }, [channelId]); // eslint-disable-line react-hooks/exhaustive-deps

  if (loading) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <Loader2 size={32} className="animate-pulse mb-3" />
        <p className="text-sm">Generating channel summary...</p>
        <p className="text-xs text-gray-300 mt-1">This may take a few seconds</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-slack-red">
        <p className="text-sm">{error}</p>
        <button
          onClick={loadSummary}
          className="mt-3 flex items-center gap-1 px-3 py-1.5 rounded-md bg-slack-purple text-white text-xs hover:bg-slack-darkpurple transition-colors"
        >
          <RefreshCw size={12} />
          Retry
        </button>
      </div>
    );
  }

  if (!summary) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-gray-400">
        <FileText size={48} className="mb-3 opacity-50" />
        <p className="text-sm">No summary available.</p>
      </div>
    );
  }

  return (
    <div className="space-y-4 p-4 max-w-3xl">
      {/* Summary */}
      <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
        <div className="flex items-center gap-2 mb-3">
          <Sparkles size={18} className="text-slack-yellow" />
          <h3 className="font-semibold text-gray-800">Channel Summary</h3>
          <span className="text-xs text-gray-400 ml-auto">
            Generated {new Date(summary.generated_at).toLocaleString()}
          </span>
        </div>
        <p className="text-sm text-gray-700 whitespace-pre-wrap">{summary.summary}</p>
      </div>

      {/* Key Points */}
      {summary.key_points.length > 0 && (
        <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
          <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
            <FileText size={14} className="text-slack-purple" />
            Key Points
          </h3>
          <ul className="space-y-1.5">
            {summary.key_points.map((point, idx) => (
              <li key={idx} className="flex items-start gap-2 text-sm text-gray-600">
                <span className="w-4 h-4 rounded-full bg-slack-purple/10 text-slack-purple text-[10px] font-bold flex items-center justify-center flex-shrink-0 mt-0.5">
                  {idx + 1}
                </span>
                <span>{point}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Action Items */}
      {summary.action_items.length > 0 && (
        <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
          <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
            <CheckCircle2 size={14} className="text-slack-green" />
            Action Items
          </h3>
          <ul className="space-y-1.5">
            {summary.action_items.map((item, idx) => (
              <li key={idx} className="flex items-start gap-2 text-sm text-gray-600">
                <CheckCircle2 size={14} className="text-slack-green flex-shrink-0 mt-0.5" />
                <span>{item}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Participants */}
      {summary.participants.length > 0 && (
        <div className="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
          <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
            <Users size={14} className="text-slack-blue" />
            Active Participants ({summary.participants.length})
          </h3>
          <div className="flex flex-wrap gap-2">
            {summary.participants.map((p, idx) => (
              <span
                key={idx}
                className="inline-flex items-center gap-1.5 px-2 py-1 rounded-full bg-gray-100 text-sm text-gray-600"
              >
                <span className="w-5 h-5 rounded-full bg-slack-blue text-white text-[10px] font-bold flex items-center justify-center">
                  {p[0]?.toUpperCase() || "U"}
                </span>
                {p}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Refresh */}
      <div className="flex justify-center">
        <button
          onClick={loadSummary}
          className="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm text-slack-purple hover:bg-slack-purple/10 transition-colors"
        >
          <RefreshCw size={14} />
          Refresh Summary
        </button>
      </div>
    </div>
  );
}

export default ChannelSummary;