import { useState, useEffect } from 'react';
import { useParams, Link } from 'react-router-dom';
import { getRepairReportDetail, type RepairReport } from '../api';

function RepairDetail() {
    const { id } = useParams<{ id: string }>();
    const [report, setReport] = useState<RepairReport | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        if (id) {
            fetchDetail(parseInt(id));
        }
    }, [id]);

    const fetchDetail = async (reportId: number) => {
        try {
            const res = await getRepairReportDetail(reportId);
            setReport(res.data);
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    };

    if (loading) return <div className="loading">Loading...</div>;
    if (!report) return <div className="error">Report not found</div>;

    return (
        <div className="bug-detail-page">
            <div className="header">
                <div className="breadcrumb">
                    <Link to="/repairs">Repair Reports</Link> / #{report.id}
                </div>
                <div className="title-row">
                    <h1>Repair Report #{report.id}</h1>
                    <span className={`status-badge ${report.status}`}>{report.status}</span>
                </div>
            </div>

            <div className="detail-grid" style={{ gridTemplateColumns: '1fr' }}>
                <div className="card">
                    <h2>Basic Info</h2>
                    <div className="info-row">
                        <span>Project:</span> <strong>{report.project_id}</strong>
                    </div>
                    <div className="info-row">
                        <span>Bug ID:</span> <Link to={`/bugs/${report.error_log_id}`}>#{report.error_log_id}</Link>
                    </div>
                    <div className="info-row">
                        <span>Created At:</span> {new Date(report.created_at).toLocaleString()}
                    </div>
                    <div className="info-row">
                        <span>Test Result:</span>
                        <span style={{ color: report.test_passed ? '#10b981' : '#ef4444', fontWeight: 'bold', marginLeft: '8px' }}>
                            {report.test_passed ? 'PASS' : 'FAIL'}
                        </span>
                    </div>
                </div>

                <div className="card">
                    <h2>🤖 AI Analysis</h2>
                    <div className="stack-trace">
                        <pre style={{ whiteSpace: 'pre-wrap' }}>{report.ai_analysis}</pre>
                    </div>
                </div>

                <div className="card">
                    <h2>📝 Code Changes</h2>
                    <div className="stack-trace">
                        <pre>{report.code_diff || 'No changes recorded'}</pre>
                    </div>
                </div>

                <div className="card">
                    <h2>🧪 Test Output</h2>
                    <div className="stack-trace">
                        <pre>{report.test_output}</pre>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default RepairDetail;