"use client";
import React, { useState } from "react";
import { SpotlightCard } from "@/components/SpotlightCard";
import { Ticket, ShieldAlert, Cpu } from "lucide-react";

export default function PortalTicketingPage() {
  return (
    <div className="relative min-h-screen pt-20 pb-16 overflow-hidden bg-orbit-bg-deep">
      <div className="pointer-events-none absolute inset-0 orbit-grid-mesh opacity-80" />
      
      <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 space-y-8">
        <div className="border-b border-slate-900 pb-6">
          <span className="font-mono text-[9px] font-bold text-orbit-cyan uppercase tracking-widest">MAINTENANCE SERVICE REGISTER</span>
          <h1 className="text-2xl font-black text-slate-900 dark:text-white mt-1">Active SLA Tickets</h1>
        </div>

        <div className="space-y-4">
          <SpotlightCard className="p-6 rounded-2xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Ticket className="h-4 w-4 text-orbit-cyan" />
                <span className="font-mono text-xs font-bold text-slate-800 dark:text-slate-200">TCK-4821-OBT</span>
              </div>
              <h3 className="text-sm font-bold text-slate-900 dark:text-white">Replace backup battery string at Ariana Zone 4</h3>
              <p className="text-xs text-slate-500 font-mono">Opened on: May 21, 2026 by Sami Mezri</p>
            </div>
            <div className="flex items-center gap-3 font-mono text-[10px]">
              <span className="rounded border border-orbit-cyan/20 bg-orbit-cyan/5 px-2.5 py-1 text-orbit-cyan font-bold">IN PROGRESS</span>
              <span className="text-slate-500">SLA: 1-hour</span>
            </div>
          </SpotlightCard>

          <SpotlightCard className="p-6 rounded-2xl flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <Ticket className="h-4 w-4 text-slate-500" />
                <span className="font-mono text-xs font-bold text-slate-600 dark:text-slate-400">TCK-4210-OBT</span>
              </div>
              <h3 className="text-sm font-bold text-slate-900 dark:text-white">Recalibrate Modbus transceiver on Stamping Press 3</h3>
              <p className="text-xs text-slate-500 font-mono">Opened on: May 12, 2026 by Hassan Aloui</p>
            </div>
            <div className="flex items-center gap-3 font-mono text-[10px]">
              <span className="rounded border border-emerald-500/20 bg-emerald-950/20 px-2.5 py-1 text-emerald-400 font-bold">COMPLETED</span>
              <span className="text-slate-500">SLA: 4-hour</span>
            </div>
          </SpotlightCard>
        </div>
      </div>
    </div>
  );
}