import { useState, useEffect } from 'react';
import { getProjects, updateProject, type Project } from '../api';
import { Save, X, Pencil } from 'lucide-react';

export default function ProjectList() {
    const [projects, setProjects] = useState<Project[]>([]);
    const [loading, setLoading] = useState(true);
    const [editingId, setEditingId] = useState<number | null>(null);
    const [editForm, setEditForm] = useState({ name: '', repo_url: '', local_path: '', description: '' });
    const [saving, setSaving] = useState(false);

    const fetchProjects = async () => {
        setLoading(true);
        try {
            const res = await getProjects();
            setProjects(res.data.projects);
        } catch (err) {
            console.error(err);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => { fetchProjects(); }, []);

    const startEdit = (p: Project) => {
        setEditingId(p.id);
        setEditForm({
            name: p.name || '',
            repo_url: p.repo_url || '',
            local_path: p.local_path || '',
            description: p.description || '',
        });
    };

    const cancelEdit = () => {
        setEditingId(null);
    };

    const saveEdit = async (projectId: string) => {
        setSaving(true);
        try {
            await updateProject(projectId, editForm);
            setEditingId(null);
            await fetchProjects();
        } catch (err) {
            console.error('保存失败:', err);
        } finally {
            setSaving(false);
        }
    };

    const ConfigBadge = ({ value }: { value: string | null }) => (
        value ? (
            <span style={{ fontSize: '12px', color: 'var(--text-secondary)', wordBreak: 'break-all' }}>{value}</span>
        ) : (
            <span style={{ fontSize: '12px', color: 'var(--error)', fontWeight: 500 }}>未配置</span>
        )
    );

    if (loading) {
        return <div className="loading"><div className="spinner"></div></div>;
    }

    return (
        <div>
            <div className="page-header">
                <h1 className="page-title">项目管理</h1>
                <p className="page-subtitle">管理项目的仓库地址和本地路径，供 Repair Agent 使用</p>
            </div>

            {projects.length === 0 ? (
                <div className="empty-state">暂无项目，首次上报日志后会自动创建</div>
            ) : (
                <>
                    {/* Desktop table */}
                    <div className="table-container">
                        <div className="table-desktop">
                            <table>
                                <thead>
                                    <tr>
                                        <th>项目 ID</th>
                                        <th>名称</th>
                                        <th>仓库地址</th>
                                        <th>本地路径</th>
                                        <th>描述</th>
                                        <th>更新时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {projects.map((p) => (
                                        <tr key={p.id}>
                                            {editingId === p.id ? (
                                                <>
                                                    <td><strong>{p.project_id}</strong></td>
                                                    <td>
                                                        <input
                                                            type="text"
                                                            value={editForm.name}
                                                            onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                                                            placeholder="项目名称"
                                                            className="edit-input"
                                                        />
                                                    </td>
                                                    <td>
                                                        <input
                                                            type="text"
                                                            value={editForm.repo_url}
                                                            onChange={(e) => setEditForm({ ...editForm, repo_url: e.target.value })}
                                                            placeholder="https://gitea.example.com/..."
                                                            className="edit-input"
                                                        />
                                                    </td>
                                                    <td>
                                                        <input
                                                            type="text"
                                                            value={editForm.local_path}
                                                            onChange={(e) => setEditForm({ ...editForm, local_path: e.target.value })}
                                                            placeholder="/home/user/projects/..."
                                                            className="edit-input"
                                                        />
                                                    </td>
                                                    <td>
                                                        <input
                                                            type="text"
                                                            value={editForm.description}
                                                            onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
                                                            placeholder="项目描述"
                                                            className="edit-input"
                                                        />
                                                    </td>
                                                    <td className="cell-secondary">
                                                        {new Date(p.updated_at).toLocaleString()}
                                                    </td>
                                                    <td>
                                                        <div style={{ display: 'flex', gap: '6px' }}>
                                                            <button
                                                                className="btn-link"
                                                                onClick={() => saveEdit(p.project_id)}
                                                                disabled={saving}
                                                                style={{ color: 'var(--success)' }}
                                                            >
                                                                <Save size={14} />
                                                            </button>
                                                            <button
                                                                className="btn-link"
                                                                onClick={cancelEdit}
                                                                style={{ color: 'var(--text-tertiary)' }}
                                                            >
                                                                <X size={14} />
                                                            </button>
                                                        </div>
                                                    </td>
                                                </>
                                            ) : (
                                                <>
                                                    <td><strong>{p.project_id}</strong></td>
                                                    <td>{p.name || <span style={{ color: 'var(--text-tertiary)' }}>-</span>}</td>
                                                    <td><ConfigBadge value={p.repo_url} /></td>
                                                    <td><ConfigBadge value={p.local_path} /></td>
                                                    <td className="cell-secondary">{p.description || '-'}</td>
                                                    <td className="cell-secondary">
                                                        {new Date(p.updated_at).toLocaleString()}
                                                    </td>
                                                    <td>
                                                        <button className="btn-link" onClick={() => startEdit(p)}>
                                                            <Pencil size={14} /> 编辑
                                                        </button>
                                                    </td>
                                                </>
                                            )}
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>

                        {/* Mobile card list */}
                        <div className="mobile-card-list">
                            {projects.map((p) => (
                                <div key={p.id} className="mobile-card-item">
                                    {editingId === p.id ? (
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                                            <strong>{p.project_id}</strong>
                                            <input
                                                type="text"
                                                value={editForm.name}
                                                onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
                                                placeholder="项目名称"
                                                className="edit-input"
                                            />
                                            <input
                                                type="text"
                                                value={editForm.repo_url}
                                                onChange={(e) => setEditForm({ ...editForm, repo_url: e.target.value })}
                                                placeholder="仓库地址"
                                                className="edit-input"
                                            />
                                            <input
                                                type="text"
                                                value={editForm.local_path}
                                                onChange={(e) => setEditForm({ ...editForm, local_path: e.target.value })}
                                                placeholder="本地路径"
                                                className="edit-input"
                                            />
                                            <input
                                                type="text"
                                                value={editForm.description}
                                                onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
                                                placeholder="描述"
                                                className="edit-input"
                                            />
                                            <div style={{ display: 'flex', gap: '8px' }}>
                                                <button
                                                    className="btn-link"
                                                    onClick={() => saveEdit(p.project_id)}
                                                    disabled={saving}
                                                    style={{ color: 'var(--success)' }}
                                                >
                                                    <Save size={14} /> 保存
                                                </button>
                                                <button
                                                    className="btn-link"
                                                    onClick={cancelEdit}
                                                    style={{ color: 'var(--text-tertiary)' }}
                                                >
                                                    <X size={14} /> 取消
                                                </button>
                                            </div>
                                        </div>
                                    ) : (
                                        <>
                                            <div className="mobile-card-top">
                                                <strong>{p.project_id}</strong>
                                                <button className="btn-link" onClick={() => startEdit(p)}>
                                                    <Pencil size={14} />
                                                </button>
                                            </div>
                                            {p.name && <div style={{ fontSize: '13px' }}>{p.name}</div>}
                                            <div className="mobile-card-meta" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '4px', marginTop: '6px' }}>
                                                <div>仓库: <ConfigBadge value={p.repo_url} /></div>
                                                <div>路径: <ConfigBadge value={p.local_path} /></div>
                                            </div>
                                            {p.description && (
                                                <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{p.description}</div>
                                            )}
                                        </>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                </>
            )}
        </div>
    );
}