'use client';

import { useState } from 'react';
import Link from 'next/link';
import styles from './dms.module.css';
import SmartSearchModal from '@/components/dms/SmartSearchModal'; // We'll need to create this

export default function DMSDashboard() {
    const [stats] = useState({
        totalFiles: 1240,
        usedStorage: '4.2 GB',
        totalStorage: '10 GB',
        recentUploads: 5
    });

    const recentDocs = [
        { id: 1, name: 'Project_Alpha_proposal.pdf', type: 'PDF', size: '2.4 MB', date: '2024-11-20' },
        { id: 2, name: 'Invoice_Nov_2024.pdf', type: 'PDF', size: '1.1 MB', date: '2024-11-19' },
        { id: 3, name: 'Site_Images_Nov.zip', type: 'ZIP', size: '15 MB', date: '2024-11-18' },
        { id: 4, name: 'Meeting_Notes_Q3.docx', type: 'DOCX', size: '450 KB', date: '2024-11-15' },
    ];

    const [showSearch, setShowSearch] = useState(false);

    return (
        <div className={styles.container}>
            {showSearch && <SmartSearchModal onClose={() => setShowSearch(false)} />}

            {/* Header */}
            <div className={styles.header}>
                <div>
                    <h1>Documents</h1>
                    <p className={styles.subtitle}>Securely manage and organize your digital assets</p>
                </div>
                <div className={styles.actions}>
                    <Link href="/dashboard/documents/upload" className={styles.btnPrimary}>
                        + Upload New
                    </Link>
                </div>
            </div>

            {/* Stats Cards */}
            <div className={styles.statsGrid}>
                <div className={styles.statCard}>
                    <span className={styles.statIcon}>📂</span>
                    <div className={styles.statInfo}>
                        <h3>All Files</h3>
                        <p>{stats.totalFiles}</p>
                    </div>
                </div>
                <div className={styles.statCard}>
                    <span className={styles.statIcon}>☁️</span>
                    <div className={styles.statInfo}>
                        <h3>Storage Used</h3>
                        <p>{stats.usedStorage} <span className={styles.subStat}>/ {stats.totalStorage}</span></p>
                    </div>
                    {/* Simple Progress Bar */}
                    <div className={styles.progressBar}>
                        <div style={{ width: '42%' }}></div>
                    </div>
                </div>
                <div className={styles.statCard}>
                    <span className={styles.statIcon}>🕒</span>
                    <div className={styles.statInfo}>
                        <h3>Recent Uploads</h3>
                        <p>{stats.recentUploads} <span className={styles.subStat}>this week</span></p>
                    </div>
                </div>
            </div>

            {/* Recent Documents Table */}
            <div className={styles.section}>
                <div className={styles.sectionHeader}>
                    <h2>Recent Documents</h2>
                    <Link href="/dashboard/documents/all" className={styles.link}>View All</Link>
                </div>
                <div className={styles.tableContainer}>
                    <table className={styles.table}>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Size</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {recentDocs.map(doc => (
                                <tr key={doc.id}>
                                    <td>
                                        <div className={styles.fileName}>
                                            <span className={styles.fileIcon}>📄</span>
                                            {doc.name}
                                        </div>
                                    </td>
                                    <td>{doc.type}</td>
                                    <td>{doc.size}</td>
                                    <td>{doc.date}</td>
                                    <td>
                                        <button className={styles.iconBtn}>⋮</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Quick Actions Grid */}
            <h2 style={{ marginTop: '2rem', marginBottom: '1rem' }}>Quick Actions</h2>
            <div className={styles.quickActions}>
                <div className={styles.actionCard} onClick={() => setShowSearch(true)}>
                    <span className={styles.actionIcon}>🔍</span>
                    <h3>Smart Search</h3>
                    <p>Find documents by content or tags</p>
                </div>
                <div className={styles.actionCard}>
                    <span className={styles.actionIcon}>🏷️</span>
                    <h3>Manage Tags</h3>
                    <p>Organize files with custom labels</p>
                </div>
                <div className={styles.actionCard}>
                    <span className={styles.actionIcon}>🗑️</span>
                    <h3>Trash</h3>
                    <p>Recover deleted items</p>
                </div>
            </div>
        </div>
    );
}