import {
  CheckCircle,
  Cpu,
  FileUp,
  KeyRound,
  Network,
  Plug,
  RefreshCw,
  ShieldCheck,
} from 'lucide-react';

import { Card } from '@/components/ui/Card';

const steps = [
  ['Connect Router', Plug],
  ['Upload Firmware', FileUp],
  ['Flash Firmware', Cpu],
  ['Wait & Reconnect', RefreshCw],
  ['Provision Router', Network],
  ['Get Public Key', KeyRound],
  ['Register Peer', ShieldCheck],
  ['Verify Connection', CheckCircle],
] as const;

export function ProvisioningWorkflow() {
  return (
    <Card className="h-full">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-white">
            Provisioning Workflow
          </h3>

          <p className="mt-1 text-sm text-slate-400">
            OpenWrt 23.05 production
            provisioning pipeline
          </p>
        </div>

        <span className="rounded-full border border-green-500/20 bg-green-500/10 px-3 py-1 text-xs text-green-300">
          Technician Mode
        </span>
      </div>

      <div className="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-8">
        {steps.map(([step, Icon], index) => (
          <div
            key={step}
            className="relative rounded-2xl border border-white/10 bg-white/[0.03] p-4 transition-all hover:border-blue-500/30 hover:bg-white/[0.05]"
          >
            <div className="flex items-center justify-between">
              <span className="text-xs text-slate-500">
                Step {index + 1}
              </span>

              <Icon
                className={`h-5 w-5 ${
                  index === 6
                    ? 'text-green-300'
                    : 'text-slate-400'
                }`}
              />
            </div>

            <p className="mt-4 text-sm font-semibold text-white">
              {step}
            </p>

            {index !== steps.length - 1 && (
              <div className="absolute -right-2 top-1/2 hidden h-px w-4 bg-white/10 xl:block" />
            )}
          </div>
        ))}
      </div>
    </Card>
  );
}