import React, { useState } from 'react';
import {
  GitBranch,
  GitCommit as GitCommitIcon,
  RotateCcw,
  CheckCircle2,
  RefreshCw,
  ExternalLink,
  Shield,
  Zap,
} from 'lucide-react';
import type { GitOpsStatus, GitCommit } from '../types/index.js';

interface GitOpsViewProps {
  status: GitOpsStatus | null;
  commits: GitCommit[];
  onRollback: (commitSha: string) => Promise<void>;
  onTriggerRebuild: () => void;
}

export const GitOpsView: React.FC<GitOpsViewProps> = ({
  status,
  commits,
  onRollback,
  onTriggerRebuild,
}) => {
  const [selectedChannel, setSelectedChannel] = useState<'stable' | 'beta' | 'nightly'>('stable');
  const [rollingBackSha, setRollingBackSha] = useState<string | null>(null);

  const handleRollback = async (sha: string) => {
    if (!confirm(`Are you sure you want to rollback appliance configuration to commit ${sha.slice(0, 7)}?`)) {
      return;
    }
    setRollingBackSha(sha);
    try {
      await onRollback(sha);
      onTriggerRebuild();
    } finally {
      setRollingBackSha(null);
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800 pb-4">
        <div>
          <h2 className="text-xl font-bold text-white tracking-tight">GitOps Engine & OS Updates</h2>
          <p className="text-xs text-slate-400 mt-0.5">
            Declarative infrastructure-as-code version control, disaster recovery, and automated updates
          </p>
        </div>

        <button
          onClick={onTriggerRebuild}
          className="flex items-center gap-1.5 px-3.5 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-xs font-semibold text-white shadow-sm transition"
        >
          <RefreshCw className="h-3.5 w-3.5" />
          <span>Synchronize & Rebuild</span>
        </button>
      </div>

      {/* GitOps Status Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800">
          <span className="text-xs text-slate-400 font-medium">Remote Synchronization</span>
          <div className="flex items-center gap-2 mt-2">
            <div className="h-2 w-2 rounded-full bg-emerald-400" />
            <span className="text-sm font-bold text-white font-mono">{status?.branch || 'main'}</span>
          </div>
          <div className="mt-3 text-xs text-slate-400 truncate font-mono">
            {status?.remoteUrl || 'ssh://git@git.lholz.de:2222/naxos/naxos-config.git'}
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800">
          <span className="text-xs text-slate-400 font-medium">Current Head Commit</span>
          <div className="flex items-center gap-2 mt-2">
            <GitCommitIcon className="h-4 w-4 text-emerald-400" />
            <span className="text-sm font-bold text-white font-mono">{status?.lastCommitSha?.slice(0, 7) || '5da58ae'}</span>
          </div>
          <div className="mt-3 text-xs text-slate-300 truncate">
            {status?.lastCommitMessage || 'feat(storage): updated tank/backup quota'}
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-slate-900/80 border border-slate-800">
          <span className="text-xs text-slate-400 font-medium">OS Update Channel</span>
          <div className="flex items-center gap-2 mt-2">
            <select
              value={selectedChannel}
              onChange={(e) => setSelectedChannel(e.target.value as any)}
              className="bg-slate-950 border border-slate-800 rounded-lg px-2.5 py-1 text-slate-200 text-xs font-semibold focus:outline-none focus:border-emerald-500"
            >
              <option value="stable">Stable (26.05)</option>
              <option value="beta">Beta Channel</option>
              <option value="nightly">Nightly Unstable</option>
            </select>
          </div>
          <div className="mt-3 text-[11px] text-emerald-400 flex items-center gap-1">
            <CheckCircle2 className="h-3.5 w-3.5" />
            <span>Appliance is up to date</span>
          </div>
        </div>
      </div>

      {/* Commit History & Rollback Table */}
      <div className="rounded-2xl bg-slate-900/80 border border-slate-800 overflow-hidden">
        <div className="p-4 border-b border-slate-800 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <GitBranch className="h-4 w-4 text-emerald-400" />
            <h3 className="text-sm font-semibold text-white">Declarative Configuration Audit Trail</h3>
          </div>
          <span className="text-xs text-slate-400">Total {commits.length} generations</span>
        </div>

        <div className="divide-y divide-slate-800">
          {commits.map((c, i) => (
            <div key={c.hash} className="p-4 flex flex-col md:flex-row md:items-center justify-between gap-3 hover:bg-slate-800/30 transition">
              <div>
                <div className="flex items-center gap-2">
                  <span className="font-mono text-xs text-emerald-400 font-semibold">{c.hash.slice(0, 7)}</span>
                  {i === 0 && (
                    <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 font-semibold font-mono">
                      ACTIVE GENERATION
                    </span>
                  )}
                  <span className="text-xs font-medium text-white">{c.message}</span>
                </div>
                <div className="flex items-center gap-3 mt-1 text-[11px] text-slate-500">
                  <span>Author: {c.author}</span>
                  <span>Date: {c.date}</span>
                </div>
              </div>

              {i !== 0 && (
                <button
                  onClick={() => handleRollback(c.hash)}
                  disabled={rollingBackSha === c.hash}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-rose-500/20 text-slate-300 hover:text-rose-300 text-xs font-medium border border-slate-700 transition shrink-0"
                >
                  <RotateCcw className="h-3 w-3" />
                  <span>{rollingBackSha === c.hash ? 'Reverting...' : 'Rollback to here'}</span>
                </button>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};