import { useState } from 'react';
import { Play, Trash2, ChevronDown, ChevronUp, History } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import type { CloudAgentConfig } from '../../../../shared/api-types';
import type { LocalAgentConfig } from './types';
import { SCHEDULE_OPTIONS, formatTs } from './types';
import { LocalAgentConfigPanel } from './LocalAgentConfigPanel';
import { CloudAgentConfigPanel } from './CloudAgentConfigPanel';
import { AgentRunHistorySheet } from './AgentRunHistorySheet';

export function AgentRow({
  agent,
  expanded,
  onToggleExpand,
  onToggleEnabled,
  onDelete,
  onRunNow,
  onOpenJourney,
}: {
  agent: (LocalAgentConfig | CloudAgentConfig) & { agentType: 'local' | 'cloud' };
  expanded: boolean;
  onToggleExpand: () => void;
  onToggleEnabled: (enabled: boolean) => void;
  onDelete: () => void;
  onRunNow: () => void;
  onOpenJourney: () => void;
}) {
  const [historyOpen, setHistoryOpen] = useState(false);
  const scheduleLabel = SCHEDULE_OPTIONS.find(s => s.value === agent.scheduleCron)?.label ?? agent.scheduleCron;
  const lastRunLabel = agent.lastRunAt ? formatTs(agent.lastRunAt) : 'Never';
  const kindLabel = agent.agentType === 'local' ? 'Local' : `Cloud · ${(agent as CloudAgentConfig).provider}`;

  return (
    <Card className="rounded-xl py-0 gap-0 overflow-hidden h-fit border-border/70 shadow-none">
      {/* Header row */}
      <div className="px-4 py-4 space-y-3">
        <div className="flex items-start justify-between gap-3">
          <div className="min-w-0">
            <p className="text-sm font-semibold truncate">{agent.name}</p>
            <p className="text-xs text-muted-foreground mt-1">{kindLabel}</p>
          </div>
          <Switch
            checked={agent.enabled}
            onCheckedChange={onToggleEnabled}
            size="sm"
          />
        </div>

        <div className="grid grid-cols-[auto_1fr] gap-x-2 gap-y-1 text-xs">
          <span className="text-muted-foreground">Schedule</span>
          <span className="text-foreground truncate">{scheduleLabel}</span>
          <span className="text-muted-foreground">Last run</span>
          <span className="text-foreground truncate">{lastRunLabel}</span>
          <span className="text-muted-foreground">Status</span>
          <span className="text-foreground">{agent.enabled ? 'Enabled' : 'Disabled'}</span>
        </div>

        <div className="flex items-center justify-between gap-2">
          <div className="flex items-center gap-1.5">
            <Button size="sm" variant="outline" onClick={onRunNow} className="h-8">
              <Play className="size-3.5 mr-1.5" />
              Run now
            </Button>
            <Button size="sm" variant="outline" onClick={() => setHistoryOpen(true)} className="h-8">
              <History className="size-3.5 mr-1.5" />
              History
            </Button>
          </div>
          <div className="flex items-center gap-1">
            <Button size="sm" variant="ghost" onClick={onDelete} title="Delete agent" className="h-8 w-8 p-0">
              <Trash2 className="size-3.5 text-muted-foreground" />
            </Button>
            <Button size="sm" variant="ghost" onClick={onToggleExpand} title={expanded ? 'Collapse' : 'Configure'} className="h-8 w-8 p-0">
              {expanded ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
            </Button>
          </div>
        </div>
      </div>

      {/* Expanded config */}
      {expanded && (
        <div className="border-t px-4 py-4 bg-muted/20">
          {agent.agentType === 'local' ? (
            <LocalAgentConfigPanel agent={agent as LocalAgentConfig & { agentType: 'local' }} onOpenJourney={onOpenJourney} />
          ) : (
            <CloudAgentConfigPanel agent={agent as CloudAgentConfig & { agentType: 'cloud' }} onOpenJourney={onOpenJourney} />
          )}
        </div>
      )}

      <AgentRunHistorySheet
        agentId={agent.id}
        agentName={agent.name}
        open={historyOpen}
        onOpenChange={setHistoryOpen}
      />
    </Card>
  );
}
