'use client';
import React, { useState } from 'react';
import { Timeline, Spin, Tag, Empty } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import { getLeadTransferHistory } from '../service';
import { displayDate, displayTime } from '@/utills/helper';

interface TransferHistoryItem {
  id: number;
  lead_id: number;
  from_launch_name: string;
  to_launch_name: string;
  from_employee_name: string;
  to_employee_name: string;
  transferred_by_name: string;
  transfer_type: string;
  remark: string | null;
  created_at: string;
}

interface Props {
  leadId: number;
}

const TransferHistoryPanel: React.FC<Props> = ({ leadId }) => {
  const [history, setHistory] = useState<TransferHistoryItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [loaded, setLoaded] = useState(false);

  const loadHistory = async() => {
    if (loaded) return;
    setLoading(true);
    try {
      const response = await getLeadTransferHistory(leadId);
      setHistory(response?.data || []);
      setLoaded(true);
    } catch {
      // error already shown by service
    } finally {
      setLoading(false);
    }
  };

  // Trigger load on first render (panel is collapsed by default, loaded on expand)
  React.useEffect(() => {
    loadHistory();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [leadId]);

  if (loading) {
    return <Spin size="small" style={{ display: 'block', textAlign: 'center', padding: 16 }} />;
  }

  if (loaded && history.length === 0) {
    return <Empty description="No transfer history" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
  }

  return (
    <Timeline
      items={history.map((item) => ({
        dot: <SwapOutlined style={{ color: '#fa8c16' }} />,
        children: (
          <div key={item.id}>
            <div style={{ fontSize: 12, color: '#8c8c8c', marginBottom: 2 }}>
              {displayDate(item.created_at)} {displayTime(item.created_at)}
            </div>
            <div>
              Transferred from <strong>{item.from_employee_name} ({item.from_launch_name})</strong> → <strong>{item.to_employee_name} ({item.to_launch_name})</strong>
              {' '}by <strong>{item.transferred_by_name}</strong>
            </div>
            <Tag color="orange" style={{ marginTop: 4, fontSize: 11 }}>
              {item.transfer_type === 'self_transfer' ? 'Self Transfer' : 'Lead Transfer'}
            </Tag>
            {item.remark && (
              <div style={{ marginTop: 4, color: '#595959', fontSize: 13 }}>
                <em>Remark: {item.remark}</em>
              </div>
            )}
          </div>
        ),
      }))}
    />
  );
};

export default TransferHistoryPanel;