import React, { useState, useEffect } from 'react';
import { Card, Button, Typography, Table, Tag, Alert, Space, Switch, Spin, notification, Tooltip, Input, Statistic, Divider } from 'antd';
import { SafetyCertificateOutlined, SyncOutlined, DownloadOutlined, ReloadOutlined, InfoCircleOutlined, CheckCircleTwoTone, ExclamationCircleTwoTone, FileSearchOutlined } from '@ant-design/icons';
import Layout from '../layout/Layout';

const { Title, Text } = Typography;
const { Search } = Input;

const styles = {
    container: {
        padding: '24px',
        background: '#f8fafc',
        minHeight: 'calc(100vh - 64px)',
        background: '#fff',
    },
    pageTitle: {
        marginBottom: '8px',
        color: '#2c3e50',
        fontSize: '24px',
        fontWeight: '600',
        display: 'flex',
        alignItems: 'center',
        gap: 12
    },
    subtitle: {
        color: '#888',
        marginBottom: 16
    },
    card: {
        border: '1px solid #e8e8e8',
        borderRadius: 8,
        marginBottom: 24,
        background: '#fff',
        boxShadow: '0 2px 8px #f0f1f2'
    },
    table: {
        marginTop: '16px'
    },
    actionBar: {
        marginBottom: 16,
        display: 'flex',
        gap: 12,
        flexWrap: 'wrap',
        alignItems: 'center'
    },
    statusCard: {
        background: '#f6ffed',
        border: '1px solid #b7eb8f',
        borderRadius: 8,
        marginBottom: 24,
        padding: 16,
        display: 'flex',
        alignItems: 'center',
        gap: 24
    },
    statusIcon: {
        fontSize: 36
    },
    search: {
        maxWidth: 320,
        marginLeft: 'auto'
    }
};

const API_BASE = window.wpApiSettings?.root + 'safe-sites/v1/site-integrity';

const CodeSigner = () => {
    const [siteFiles, setSiteFiles] = useState([]);
    const [siteLoading, setSiteLoading] = useState(false);
    const [siteError, setSiteError] = useState(null);
    const [search, setSearch] = useState('');
    const [enabled, setEnabled] = useState(true); // Placeholder

    // Fetch site file list from backend
    const fetchSiteFiles = async () => {
        setSiteLoading(true);
        setSiteError(null);
        try {
            const resp = await fetch(`${API_BASE}/status`, {
                headers: { 'X-WP-Nonce': window.wpApiSettings.nonce }
            });
            if (!resp.ok) throw new Error('Failed to fetch site file list');
            const data = await resp.json();
            setSiteFiles(data);
        } catch (err) {
            setSiteError(err.message);
        } finally {
            setSiteLoading(false);
        }
    };

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

    // Re-sign all site files
    const handleResignAll = async () => {
        setSiteLoading(true);
        setSiteError(null);
        try {
            const resp = await fetch(`${API_BASE}/sign`, {
                method: 'POST',
                headers: { 'X-WP-Nonce': window.wpApiSettings.nonce }
            });
            const data = await resp.json();
            if (!resp.ok || !data.success) throw new Error(data.message || 'Failed to re-sign site files');
            notification.success({ message: 'Re-sign Complete', description: data.message });
            await fetchSiteFiles();
        } catch (err) {
            setSiteError(err.message);
            notification.error({ message: 'Re-sign Failed', description: err.message });
        } finally {
            setSiteLoading(false);
        }
    };

    // Verify all site files
    const handleVerifyAll = async () => {
        setSiteLoading(true);
        setSiteError(null);
        try {
            const resp = await fetch(`${API_BASE}/verify`, {
                headers: { 'X-WP-Nonce': window.wpApiSettings.nonce }
            });
            if (!resp.ok) throw new Error('Failed to verify site files');
            const data = await resp.json();
            notification.success({ message: 'Verification Complete', description: 'Site files have been verified.' });
            await fetchSiteFiles();
        } catch (err) {
            setSiteError(err.message);
            notification.error({ message: 'Verification Failed', description: err.message });
        } finally {
            setSiteLoading(false);
        }
    };

    // Re-sign individual file
    const handleResignFile = async (file) => {
        try {
            const resp = await fetch(`${API_BASE}/resign-file`, {
                method: 'POST',
                headers: { 
                    'X-WP-Nonce': window.wpApiSettings.nonce,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ file })
            });
            const data = await resp.json();
            if (!resp.ok) throw new Error(data.message || 'Failed to re-sign file');
            notification.success({ message: 'File Re-signed', description: data.message });
            await fetchSiteFiles(); // Refresh the list
        } catch (err) {
            notification.error({ message: 'Re-sign Failed', description: err.message });
        }
    };

    // Table and summary logic
    const filteredSiteFiles = siteFiles.filter(f => (f.file || '').toLowerCase().includes(search.toLowerCase()));
    const statusOrder = { 'Tampered': 0, 'Missing': 1, 'Verified': 2 };
    const sortedSiteFiles = [...filteredSiteFiles].sort((a, b) => {
        return (statusOrder[a.status] ?? 99) - (statusOrder[b.status] ?? 99);
    });
    const verifiedCount = siteFiles.filter(f => f.status === 'Verified').length;
    const tamperedCount = siteFiles.filter(f => f.status === 'Tampered').length;
    const missingCount = siteFiles.filter(f => f.status === 'Missing').length;
    const allVerified = siteFiles.length > 0 && tamperedCount === 0 && missingCount === 0;

    return (
        <Layout>
            <div style={styles.container}>
                <div style={styles.pageTitle}>
                    <SafetyCertificateOutlined style={{ color: '#1890ff', fontSize: 32 }} />
                    Site Integrity
                </div>
                <div style={styles.subtitle}>
                    <Text type="secondary">
                        Full-site file integrity: detect changes in all WordPress core, plugin, and theme files.
                    </Text>
                </div>
                <Alert
                    type="info"
                    showIcon
                    icon={<InfoCircleOutlined />}
                    message={<b>What is Site Integrity?</b>}
                    description={<span>Site integrity ensures all your WordPress files are unchanged and safe. If a file is changed, added, or deleted, you’ll know instantly. <a href="https://en.wikipedia.org/wiki/Code_signing" target="_blank" rel="noopener noreferrer">Learn more</a>.</span>}
                    style={{ marginBottom: 24 }}
                />
                <div style={styles.statusCard}>
                    {allVerified ? (
                        <CheckCircleTwoTone twoToneColor="#52c41a" style={styles.statusIcon} />
                    ) : (
                        <ExclamationCircleTwoTone twoToneColor="#faad14" style={styles.statusIcon} />
                    )}
                    <div>
                        <Statistic title="Verified" value={verifiedCount} valueStyle={{ color: '#52c41a' }} />
                    </div>
                    <div>
                        <Statistic title="Tampered" value={tamperedCount} valueStyle={{ color: '#ff4d4f' }} />
                    </div>
                    <div>
                        <Statistic title="Missing" value={missingCount} valueStyle={{ color: '#faad14' }} />
                    </div>
                    <div style={{ marginLeft: 32 }}>
                        {allVerified ? (
                            <Text strong style={{ color: '#52c41a', fontSize: 18 }}>All files verified and safe.</Text>
                        ) : (
                            <Text strong style={{ color: '#faad14', fontSize: 18 }}>Attention: Some files are tampered or missing!</Text>
                        )}
                    </div>
                </div>
                <div style={styles.actionBar}>
                    <Button icon={<ReloadOutlined />} type="primary" loading={siteLoading} onClick={handleResignAll}>Re-sign All Site Files</Button>
                    <Button icon={<SyncOutlined />} loading={siteLoading} onClick={handleVerifyAll}>Verify Site Files Now</Button>
                    <Switch checked={enabled} onChange={setEnabled} disabled style={{ marginLeft: 16 }} />
                    <Text type="secondary" style={{ marginLeft: 8 }}>Code Signing Enabled</Text>
                    <Search
                        placeholder="Search file path..."
                        allowClear
                        onChange={e => setSearch(e.target.value)}
                        style={styles.search}
                    />
                </div>
                <Divider style={{ margin: '16px 0' }} />
                <Card style={styles.card}>
                    <div style={styles.table}>
                        {siteLoading ? <Spin /> : (
                            <Table
                                columns={[
                                    { title: <span><FileSearchOutlined /> File Path</span>, dataIndex: 'file', key: 'file', render: (text) => <span style={{ fontFamily: 'monospace' }}>{text}</span> },
                                    { title: 'Last Verified', dataIndex: 'lastVerified', key: 'lastVerified' },
                                    { title: 'Status', dataIndex: 'status', key: 'status', render: (status) => (
                                        <Tag color={status === 'Verified' ? 'green' : status === 'Tampered' ? 'red' : status === 'Missing' ? 'orange' : 'default'} style={{ fontWeight: 500 }}>{status}</Tag>
                                    ) },
                                    {
                                        title: 'Actions',
                                        key: 'actions',
                                        render: (_, record) => (
                                            <Space>
                                                <Tooltip title="Re-sign File">
                                                    <Button
                                                        type="link"
                                                        icon={<ReloadOutlined />}
                                                        onClick={() => handleResignFile(record.file)}
                                                        loading={siteLoading}
                                                    />
                                                </Tooltip>
                                            </Space>
                                        )
                                    }
                                ]}
                                dataSource={sortedSiteFiles}
                                pagination={{ pageSize: 10 }}
                                rowKey="file"
                                rowClassName={record =>
                                    record.status === 'Tampered' ? 'row-tampered' : record.status === 'Missing' ? 'row-missing' : ''
                                }
                                bordered
                                size="middle"
                                style={{ background: '#fff' }}
                            />
                        )}
                    </div>
                </Card>
                {siteError && <Alert message="Error" description={siteError} type="error" showIcon style={{ marginTop: 24 }} />}
                <style>{`
                    .row-tampered td { background: #fff1f0 !important; }
                    .row-missing td { background: #fffbe6 !important; }
                `}</style>
            </div>
        </Layout>
    );
};

export default CodeSigner;