import { useState, useEffect } from 'react';
import {
    Cloud, CloudOff, RefreshCw, Download, AlertTriangle,
    CheckCircle, XCircle, Clock, MapPin, ArrowUpDown,
    FileText, Loader2, ExternalLink, Filter
} from 'lucide-react';
import { metrcApi, MetrcLocation, MetrcDiscrepancy, MetrcReportResponse, MetrcAuditResponse } from '../lib/metrcApi';
import { PageHeader, EmptyState, CardSkeleton } from '../components/ui/LinearPrimitives';

const SEVERITY_CONFIG = {
    CRITICAL: { color: 'text-red-600 bg-red-100 dark:bg-red-900/30', label: 'Critical' },
    HIGH: { color: 'text-orange-600 bg-orange-100 dark:bg-orange-900/30', label: 'High' },
    MEDIUM: { color: 'text-yellow-600 bg-yellow-100 dark:bg-yellow-900/30', label: 'Medium' },
    LOW: { color: 'text-blue-600 bg-blue-100 dark:bg-blue-900/30', label: 'Low' }
};

const DISCREPANCY_TYPE_LABELS = {
    MISSING_IN_METRC: 'Missing in METRC',
    MISSING_LOCALLY: 'Missing Locally',
    LOCATION_MISMATCH: 'Location Mismatch',
    STATUS_MISMATCH: 'Status Mismatch'
};

export default function MetrcDashboardPage() {
    const [loading, setLoading] = useState(true);
    const [syncing, setSyncing] = useState(false);
    const [report, setReport] = useState<MetrcReportResponse | null>(null);
    const [audit, setAudit] = useState<MetrcAuditResponse | null>(null);
    const [activeTab, setActiveTab] = useState<'overview' | 'plants' | 'audit'>('overview');
    const [searchTerm, setSearchTerm] = useState('');
    const [lastSync, setLastSync] = useState<Date | null>(null);

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

    async function loadData() {
        setLoading(true);
        try {
            const [reportData, auditData] = await Promise.all([
                metrcApi.getReport(),
                metrcApi.getAuditReport()
            ]);
            setReport(reportData);
            setAudit(auditData);
        } catch (error) {
            console.error('Failed to load METRC data:', error);
        } finally {
            setLoading(false);
        }
    }

    async function handleSync() {
        setSyncing(true);
        try {
            const result = await metrcApi.syncAll();
            if (result.success) {
                setLastSync(new Date());
                await loadData();
            }
        } catch (error) {
            console.error('Sync failed:', error);
        } finally {
            setSyncing(false);
        }
    }

    async function handleExportCsv() {
        try {
            const csv = await metrcApi.exportCsv();
            metrcApi.downloadCsv(csv);
        } catch (error) {
            console.error('Export failed:', error);
        }
    }

    const filteredPlants = report?.plants.filter(p =>
        searchTerm === '' ||
        p.tagNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
        p.room.toLowerCase().includes(searchTerm.toLowerCase())
    ) || [];

    // METRC connection status (simulated - would check actual API in production)
    const metrcEnabled = false; // Set via env var in production
    const connectionStatus = metrcEnabled ? 'connected' : 'demo';

    return (
        <div className="space-y-6 pb-20 animate-in">
            <PageHeader
                title="METRC Integration"
                subtitle="California Track-and-Trace Compliance"
                actions={
                    <div className="flex gap-2">
                        <button
                            onClick={handleExportCsv}
                            className="btn btn-ghost"
                            title="Export CSV for manual METRC upload"
                        >
                            <Download size={16} />
                            <span className="hidden sm:inline">Export</span>
                        </button>
                        <button
                            onClick={handleSync}
                            disabled={syncing}
                            className="btn btn-primary"
                        >
                            {syncing ? (
                                <Loader2 size={16} className="animate-spin" />
                            ) : (
                                <RefreshCw size={16} />
                            )}
                            <span className="hidden sm:inline">Sync</span>
                        </button>
                    </div>
                }
            />

            {/* Connection Status Banner */}
            <div className={`card p-4 ${connectionStatus === 'demo' ? 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800' : 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800'}`}>
                <div className="flex items-center gap-3">
                    {connectionStatus === 'demo' ? (
                        <>
                            <CloudOff className="text-amber-600 dark:text-amber-400" size={24} />
                            <div className="flex-1">
                                <p className="font-medium text-amber-800 dark:text-amber-200">Demo Mode</p>
                                <p className="text-sm text-amber-600 dark:text-amber-400">
                                    METRC API not connected. Data shown is for demonstration purposes.
                                </p>
                            </div>
                            <a
                                href="https://api-ca.metrc.com/Documentation"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="btn btn-ghost text-amber-700 dark:text-amber-300 text-sm"
                            >
                                <ExternalLink size={14} />
                                API Docs
                            </a>
                        </>
                    ) : (
                        <>
                            <Cloud className="text-emerald-600 dark:text-emerald-400" size={24} />
                            <div className="flex-1">
                                <p className="font-medium text-emerald-800 dark:text-emerald-200">Connected to METRC</p>
                                <p className="text-sm text-emerald-600 dark:text-emerald-400">
                                    Last sync: {lastSync ? lastSync.toLocaleString() : 'Never'}
                                </p>
                            </div>
                            <CheckCircle className="text-emerald-600" size={20} />
                        </>
                    )}
                </div>
            </div>

            {/* Tab Navigation */}
            <div className="flex gap-1 p-1 bg-secondary rounded-lg">
                {[
                    { id: 'overview', label: 'Overview' },
                    { id: 'plants', label: 'Plant Locations' },
                    { id: 'audit', label: 'Audit Trail' }
                ].map(tab => (
                    <button
                        key={tab.id}
                        onClick={() => setActiveTab(tab.id as any)}
                        className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors ${activeTab === tab.id
                                ? 'bg-primary text-primary shadow-sm'
                                : 'text-secondary hover:text-primary'
                            }`}
                    >
                        {tab.label}
                    </button>
                ))}
            </div>

            {loading ? (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {Array.from({ length: 4 }).map((_, i) => <CardSkeleton key={i} />)}
                </div>
            ) : (
                <>
                    {/* Overview Tab */}
                    {activeTab === 'overview' && (
                        <div className="space-y-6">
                            {/* Stats Grid */}
                            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
                                <div className="card p-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                                            <MapPin className="text-emerald-600 dark:text-emerald-400" size={20} />
                                        </div>
                                        <div>
                                            <p className="text-2xl font-bold text-primary">{report?.plantCount || 0}</p>
                                            <p className="text-xs text-tertiary">Total Plants</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="card p-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                                            <ArrowUpDown className="text-blue-600 dark:text-blue-400" size={20} />
                                        </div>
                                        <div>
                                            <p className="text-2xl font-bold text-primary">{audit?.summary.totalMoves || 0}</p>
                                            <p className="text-xs text-tertiary">Plant Moves (30d)</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="card p-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                                            <CheckCircle className="text-green-600 dark:text-green-400" size={20} />
                                        </div>
                                        <div>
                                            <p className="text-2xl font-bold text-primary">100%</p>
                                            <p className="text-xs text-tertiary">Sync Rate</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="card p-4">
                                    <div className="flex items-center gap-3">
                                        <div className="w-10 h-10 rounded-lg bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
                                            <AlertTriangle className="text-amber-600 dark:text-amber-400" size={20} />
                                        </div>
                                        <div>
                                            <p className="text-2xl font-bold text-primary">0</p>
                                            <p className="text-xs text-tertiary">Discrepancies</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Quick Actions */}
                            <div className="card p-4">
                                <h3 className="font-medium text-primary mb-4">Quick Actions</h3>
                                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                                    <button className="btn btn-ghost justify-start h-auto py-3" onClick={handleExportCsv}>
                                        <Download size={18} className="text-accent" />
                                        <div className="text-left">
                                            <p className="font-medium">Export CSV</p>
                                            <p className="text-xs text-tertiary">For manual METRC upload</p>
                                        </div>
                                    </button>

                                    <button className="btn btn-ghost justify-start h-auto py-3" onClick={handleSync}>
                                        <RefreshCw size={18} className="text-accent" />
                                        <div className="text-left">
                                            <p className="font-medium">Sync All Plants</p>
                                            <p className="text-xs text-tertiary">Update all locations</p>
                                        </div>
                                    </button>

                                    <button className="btn btn-ghost justify-start h-auto py-3" onClick={() => setActiveTab('audit')}>
                                        <FileText size={18} className="text-accent" />
                                        <div className="text-left">
                                            <p className="font-medium">View Audit</p>
                                            <p className="text-xs text-tertiary">Compliance report</p>
                                        </div>
                                    </button>

                                    <a
                                        href="https://ca.metrc.com"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="btn btn-ghost justify-start h-auto py-3"
                                    >
                                        <ExternalLink size={18} className="text-accent" />
                                        <div className="text-left">
                                            <p className="font-medium">Open METRC</p>
                                            <p className="text-xs text-tertiary">State portal</p>
                                        </div>
                                    </a>
                                </div>
                            </div>

                            {/* Recent Moves */}
                            {audit && audit.recentMoves.length > 0 && (
                                <div className="card">
                                    <div className="p-4 border-b border-subtle">
                                        <h3 className="font-medium text-primary">Recent Plant Moves</h3>
                                        <p className="text-xs text-tertiary">Location changes requiring METRC update</p>
                                    </div>
                                    <div className="divide-y divide-subtle">
                                        {audit.recentMoves.slice(0, 5).map((move, i) => (
                                            <div key={i} className="p-4 flex items-center gap-4">
                                                <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                                                    <ArrowUpDown size={18} className="text-blue-600 dark:text-blue-400" />
                                                </div>
                                                <div className="flex-1 min-w-0">
                                                    <p className="font-medium text-primary text-sm">{move.plantTag}</p>
                                                    <p className="text-xs text-tertiary truncate">
                                                        {move.from} → {move.to}
                                                    </p>
                                                </div>
                                                <div className="text-right">
                                                    <p className="text-xs text-tertiary">
                                                        {new Date(move.movedAt).toLocaleDateString()}
                                                    </p>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    )}

                    {/* Plants Tab */}
                    {activeTab === 'plants' && (
                        <div className="space-y-4">
                            {/* Search */}
                            <div className="flex gap-3">
                                <div className="relative flex-1">
                                    <Filter className="absolute left-3 top-1/2 -translate-y-1/2 text-tertiary" size={16} />
                                    <input
                                        type="text"
                                        placeholder="Search by tag or room..."
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                        className="input w-full pl-9"
                                    />
                                </div>
                            </div>

                            {/* Plant List */}
                            {filteredPlants.length === 0 ? (
                                <EmptyState
                                    icon={MapPin}
                                    title="No plants found"
                                    description="No plant location data available."
                                />
                            ) : (
                                <div className="card overflow-hidden">
                                    <div className="overflow-x-auto">
                                        <table className="w-full text-sm">
                                            <thead className="bg-secondary">
                                                <tr>
                                                    <th className="text-left p-3 font-medium text-secondary">Tag</th>
                                                    <th className="text-left p-3 font-medium text-secondary">METRC Location</th>
                                                    <th className="text-left p-3 font-medium text-secondary">Room</th>
                                                    <th className="text-left p-3 font-medium text-secondary">Section</th>
                                                    <th className="text-left p-3 font-medium text-secondary">Position</th>
                                                    <th className="text-center p-3 font-medium text-secondary">Status</th>
                                                </tr>
                                            </thead>
                                            <tbody className="divide-y divide-subtle">
                                                {filteredPlants.slice(0, 50).map((plant) => (
                                                    <tr key={plant.plantId} className="hover:bg-secondary/50">
                                                        <td className="p-3 font-mono text-xs">{plant.tagNumber}</td>
                                                        <td className="p-3 font-mono text-xs text-accent">{plant.location}</td>
                                                        <td className="p-3">{plant.room}</td>
                                                        <td className="p-3">{plant.section || '-'}</td>
                                                        <td className="p-3">{plant.position || '-'}</td>
                                                        <td className="p-3 text-center">
                                                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
                                                                <CheckCircle size={10} />
                                                                Synced
                                                            </span>
                                                        </td>
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                    {filteredPlants.length > 50 && (
                                        <div className="p-4 bg-secondary text-center text-sm text-tertiary">
                                            Showing 50 of {filteredPlants.length} plants
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>
                    )}

                    {/* Audit Tab */}
                    {activeTab === 'audit' && audit && (
                        <div className="space-y-6">
                            {/* Audit Summary */}
                            <div className="card p-4">
                                <div className="flex items-center justify-between mb-4">
                                    <div>
                                        <h3 className="font-medium text-primary">METRC Compliance Audit</h3>
                                        <p className="text-xs text-tertiary">
                                            {new Date(audit.dateRange.start).toLocaleDateString()} - {new Date(audit.dateRange.end).toLocaleDateString()}
                                        </p>
                                    </div>
                                    <span className="badge badge-success">
                                        <CheckCircle size={12} />
                                        Compliant
                                    </span>
                                </div>

                                <div className="grid grid-cols-3 gap-4 text-center">
                                    <div className="p-3 bg-secondary rounded-lg">
                                        <p className="text-2xl font-bold text-primary">{audit.summary.totalPlants}</p>
                                        <p className="text-xs text-tertiary">Total Plants</p>
                                    </div>
                                    <div className="p-3 bg-secondary rounded-lg">
                                        <p className="text-2xl font-bold text-primary">{audit.summary.totalMoves}</p>
                                        <p className="text-xs text-tertiary">Location Changes</p>
                                    </div>
                                    <div className="p-3 bg-secondary rounded-lg">
                                        <p className="text-2xl font-bold text-primary">{audit.summary.uniquePlantsMoved}</p>
                                        <p className="text-xs text-tertiary">Plants Moved</p>
                                    </div>
                                </div>
                            </div>

                            {/* Recent Moves Table */}
                            <div className="card overflow-hidden">
                                <div className="p-4 border-b border-subtle">
                                    <h3 className="font-medium text-primary">Location Change History</h3>
                                </div>
                                {audit.recentMoves.length === 0 ? (
                                    <div className="p-8 text-center text-tertiary">
                                        <Clock size={32} className="mx-auto mb-2 opacity-50" />
                                        <p>No location changes in this period</p>
                                    </div>
                                ) : (
                                    <div className="overflow-x-auto">
                                        <table className="w-full text-sm">
                                            <thead className="bg-secondary">
                                                <tr>
                                                    <th className="text-left p-3 font-medium text-secondary">Plant Tag</th>
                                                    <th className="text-left p-3 font-medium text-secondary">From</th>
                                                    <th className="text-left p-3 font-medium text-secondary">To</th>
                                                    <th className="text-left p-3 font-medium text-secondary">Date</th>
                                                    <th className="text-left p-3 font-medium text-secondary">Reason</th>
                                                </tr>
                                            </thead>
                                            <tbody className="divide-y divide-subtle">
                                                {audit.recentMoves.map((move, i) => (
                                                    <tr key={i} className="hover:bg-secondary/50">
                                                        <td className="p-3 font-mono text-xs">{move.plantTag}</td>
                                                        <td className="p-3 text-tertiary">{move.from}</td>
                                                        <td className="p-3 text-accent">{move.to}</td>
                                                        <td className="p-3">
                                                            {new Date(move.movedAt).toLocaleDateString()}
                                                        </td>
                                                        <td className="p-3 text-tertiary">{move.reason || '-'}</td>
                                                    </tr>
                                                ))}
                                            </tbody>
                                        </table>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}
                </>
            )}
        </div>
    );
}
