import { useState, useEffect, useCallback } from "react";
import { Plus, Trash2, Power, Edit3, Search, User } from "lucide-react";
import { resolveTwinIcon } from "../utils/twin-icons";
import type { AgentRoleData, AgentCapability } from "../../electron/preload";
import type { Company } from "../../shared/types";
import { PersonaTemplateGallery } from "./PersonaTemplateGallery";
import { AgentRoleEditor } from "./AgentRoleEditor";

type AgentRole = AgentRoleData;

const COMPANY_OPERATOR_TEMPLATE_NAMES = [
  "Company Planner",
  "Founder Office Operator",
  "Growth Operator",
  "Customer Ops Lead",
];

interface DigitalTwinsPanelProps {
  initialCompanyId?: string | null;
  onOpenAgents?: () => void;
}

export function DigitalTwinsPanel({
  initialCompanyId = null,
  onOpenAgents,
}: DigitalTwinsPanelProps) {
  const [roles, setRoles] = useState<AgentRole[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showInactive, setShowInactive] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [galleryOpen, setGalleryOpen] = useState(false);
  const [editingRole, setEditingRole] = useState<AgentRole | null>(null);
  const [isCreating, setIsCreating] = useState(false);
  const [selectedCompany, setSelectedCompany] = useState<Company | null>(null);

  const loadRoles = useCallback(async () => {
    try {
      setLoading(true);
      const loaded = await window.electronAPI.getAgentRoles(showInactive);
      setRoles(loaded);
      setError(null);
    } catch (err) {
      setError("Failed to load agent personas");
      console.error("Failed to load agent roles:", err);
    } finally {
      setLoading(false);
    }
  }, [showInactive]);

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

  useEffect(() => {
    let cancelled = false;

    async function loadCompanyContext() {
      if (!initialCompanyId) {
        setSelectedCompany(null);
        return;
      }
      try {
        const company = await window.electronAPI.getCompany(initialCompanyId);
        if (!cancelled) {
          setSelectedCompany(company ?? null);
        }
      } catch (err) {
        if (!cancelled) {
          console.error("Failed to load company context for agent personas:", err);
          setSelectedCompany(null);
        }
      }
    }

    void loadCompanyContext();

    return () => {
      cancelled = true;
    };
  }, [initialCompanyId]);

  const handleCreateBlank = () => {
    setEditingRole({
      id: "",
      name: "",
      companyId: selectedCompany?.id,
      displayName: "",
      description: "",
      icon: "Laptop",
      color: "#6366f1",
      capabilities: ["code"] as AgentCapability[],
      isSystem: false,
      isActive: true,
      sortOrder: 100,
      createdAt: Date.now(),
      updatedAt: Date.now(),
    });
    setIsCreating(true);
  };

  const handleEdit = (role: AgentRole) => {
    setEditingRole({ ...role });
    setIsCreating(false);
  };

  const handleSave = async (role: AgentRole) => {
    try {
      if (isCreating) {
        const created = await window.electronAPI.createAgentRole({
          name: role.name,
          roleKind: role.roleKind || "custom",
          sourceTemplateId: role.sourceTemplateId,
          sourceTemplateVersion: role.sourceTemplateVersion,
          companyId: role.companyId,
          displayName: role.displayName,
          description: role.description,
          icon: role.icon,
          color: role.color,
          personalityId: role.personalityId,
          modelKey: role.modelKey,
          providerType: role.providerType,
          systemPrompt: role.systemPrompt,
          capabilities: role.capabilities,
          toolRestrictions: role.toolRestrictions,
          autonomyLevel: role.autonomyLevel,
          soul: role.soul,
        });
        setRoles((prev) => [...prev, created]);
      } else {
        const updated = await window.electronAPI.updateAgentRole({
          id: role.id,
          roleKind: role.roleKind,
          sourceTemplateId: role.sourceTemplateId ?? null,
          sourceTemplateVersion: role.sourceTemplateVersion ?? null,
          companyId: role.companyId ?? null,
          displayName: role.displayName,
          description: role.description,
          icon: role.icon,
          color: role.color,
          personalityId: role.personalityId,
          modelKey: role.modelKey,
          providerType: role.providerType,
          systemPrompt: role.systemPrompt,
          capabilities: role.capabilities,
          toolRestrictions: role.toolRestrictions,
          isActive: role.isActive,
          sortOrder: role.sortOrder,
          autonomyLevel: role.autonomyLevel,
          soul: role.soul,
        });
        if (updated) {
          setRoles((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
        }
      }
      setEditingRole(null);
      setIsCreating(false);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save agent");
    }
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this agent persona?")) return;
    try {
      const success = await window.electronAPI.deleteAgentRole(id);
      if (success) {
        setRoles((prev) => prev.filter((r) => r.id !== id));
      } else {
        setError("Cannot delete system agent roles");
      }
    } catch  {
      setError("Failed to delete agent");
    }
  };

  const handleToggleActive = async (role: AgentRole) => {
    try {
      const updated = await window.electronAPI.updateAgentRole({
        id: role.id,
        isActive: !role.isActive,
      });
      if (updated) {
        setRoles((prev) => prev.map((r) => (r.id === updated.id ? updated : r)));
      }
    } catch  {
      setError("Failed to update agent status");
    }
  };

  const handleActivated = (agentRole: AgentRoleData) => {
    setRoles((prev) => [...prev, agentRole as AgentRole]);
    setGalleryOpen(false);
  };

  // Filter roles by search query
  const filteredRoles = roles.filter((r) => {
    if (!searchQuery) return true;
    const q = searchQuery.toLowerCase();
    return (
      r.displayName?.toLowerCase().includes(q) ||
      r.name?.toLowerCase().includes(q) ||
      r.description?.toLowerCase().includes(q)
    );
  });

  const activeRoles = filteredRoles.filter((r) => r.isActive);
  const inactiveRoles = filteredRoles.filter((r) => !r.isActive);

  const sortByActivity = (roles: AgentRole[]) =>
    [...roles].sort((a, b) => (a.sortOrder ?? 100) - (b.sortOrder ?? 100));

  const companyRoles = sortByActivity(
    selectedCompany ? activeRoles.filter((role) => role.companyId === selectedCompany.id) : [],
  );
  const companyInactiveRoles = selectedCompany
    ? inactiveRoles.filter((role) => role.companyId === selectedCompany.id)
    : [];
  const otherActiveRoles = sortByActivity(
    selectedCompany
      ? activeRoles.filter((role) => role.companyId !== selectedCompany.id)
      : activeRoles,
  );
  const otherInactiveRoles = selectedCompany
    ? inactiveRoles.filter((role) => role.companyId !== selectedCompany.id)
    : inactiveRoles;

  // Show editor if editing or creating
  if (editingRole) {
    return (
      <AgentRoleEditor
        role={editingRole}
        isCreating={isCreating}
        onSave={handleSave}
        onCancel={() => {
          setEditingRole(null);
          setIsCreating(false);
        }}
        error={error}
      />
    );
  }

  const renderTwinCard = (role: AgentRole, isInactive: boolean) => {
    return (
      <div key={role.id} className={`dt-card ${isInactive ? "dt-card-inactive" : ""}`}>
        <div className="dt-card-header">
          <div
            className={`dt-card-avatar ${isInactive ? "dt-avatar-inactive" : ""}`}
            style={{ backgroundColor: role.color }}
          >
            {role.icon ? (() => {
              const Icon = resolveTwinIcon(role.icon);
              return <Icon size={20} strokeWidth={2} />;
            })() : null}
          </div>
          <div className="dt-card-title">
            <span className="dt-card-name">{role.displayName || role.name}</span>
            {role.autonomyLevel && !isInactive && (
              <span className={`dt-autonomy-badge dt-autonomy-${role.autonomyLevel}`}>
                {role.autonomyLevel === "lead"
                  ? "LEAD"
                  : role.autonomyLevel === "specialist"
                    ? "SPC"
                    : "INT"}
              </span>
            )}
          </div>
          {!isInactive && (
            <div className="dt-status-area">
              <span className="dt-status-dot dt-status-idle" />
              <span className="dt-status-label">Preset</span>
            </div>
          )}
        </div>

        {role.description && <p className="dt-card-desc">{role.description}</p>}

        {role.companyId && (
          <div className="dt-card-meta-row">
            <span className="dt-company-badge">
              {selectedCompany?.id === role.companyId ? "Assigned to this company" : "Assigned to another company"}
            </span>
          </div>
        )}

        {role.capabilities && role.capabilities.length > 0 && (
          <div className="dt-card-caps">
            {role.capabilities.slice(0, 4).map((cap) => (
              <span key={cap} className="dt-cap-tag">
                {cap}
              </span>
            ))}
            {role.capabilities.length > 4 && (
              <span className="dt-cap-tag dt-cap-more">+{role.capabilities.length - 4}</span>
            )}
          </div>
        )}

        {/* Actions row */}
        <div className="dt-card-actions">
          <div className="dt-action-spacer" />

          <button className="dt-card-action" onClick={() => handleEdit(role)} title="Edit">
            <Edit3 size={13} strokeWidth={1.5} />
          </button>
          <button
            className="dt-card-action"
            onClick={() => handleToggleActive(role)}
            title={isInactive ? "Activate" : "Deactivate"}
          >
            <Power size={13} strokeWidth={1.5} />
          </button>
          {!role.isSystem && (
            <button
              className="dt-card-action dt-card-action-danger"
              onClick={() => handleDelete(role.id)}
              title="Delete"
            >
              <Trash2 size={13} strokeWidth={1.5} />
            </button>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="dt-panel">
      {/* Header */}
      <div className="dt-header">
        <div className="dt-header-top">
          <div className="dt-title-area">
            <h2>Agent Personas</h2>
          <span className="dt-count">
            {selectedCompany ? `${companyRoles.length} for ${selectedCompany.name}` : `${activeRoles.length} active`}
          </span>
          </div>
          <div className="dt-header-actions">
            <button className="dt-btn dt-btn-secondary" onClick={onOpenAgents}>
              <User size={14} strokeWidth={1.5} />
              Open Agents Hub
            </button>
            <button className="dt-btn dt-btn-secondary" onClick={handleCreateBlank}>
              <Plus size={14} strokeWidth={2} />
              New Agent
            </button>
            <button className="dt-btn dt-btn-primary" onClick={() => setGalleryOpen(true)}>
              <User size={14} strokeWidth={1.5} />
              From Template
            </button>
          </div>
        </div>
        <p className="dt-subtitle">
          Create digital twins as optional persona presets or build custom agents. Core automation
          lives in Mission Control and is intentionally separated from Twins. New managed agents
          now live in the Agents hub.
        </p>
        {selectedCompany ? (
          <div className="dt-company-context">
            <div className="dt-company-context-copy">
              <div className="dt-company-context-title">Company context: {selectedCompany.name}</div>
              <div className="dt-company-context-text">
                Start with operator personas for this company, then configure core automation
                separately in Mission Control if you want a generic operator to own it.
              </div>
              <div className="dt-company-context-tags">
                {COMPANY_OPERATOR_TEMPLATE_NAMES.map((name) => (
                  <span key={name} className="dt-company-context-tag">
                    {name}
                  </span>
                ))}
              </div>
            </div>
            <button className="dt-btn dt-btn-primary" onClick={() => setGalleryOpen(true)}>
              <User size={14} strokeWidth={1.5} />
              Operator Templates
            </button>
          </div>
        ) : null}
        <div className="dt-toolbar">
          <div className="dt-search-wrapper">
            <Search size={14} strokeWidth={1.5} />
            <input
              type="text"
              className="dt-search"
              placeholder="Search agents..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <label className="dt-toggle-inactive">
            <input
              type="checkbox"
              checked={showInactive}
              onChange={(e) => setShowInactive(e.target.checked)}
            />
            Show inactive
          </label>
        </div>
      </div>

      {/* Content */}
      <div className="dt-content">
        {loading && <div className="dt-loading">Loading agent personas...</div>}
        {error && <div className="dt-error">{error}</div>}

        {!loading && roles.length === 0 && (
          <div className="dt-empty">
            <div className="dt-empty-icon">
              <User size={40} strokeWidth={1} />
            </div>
            <h3>No agent personas yet</h3>
            <p>Create your first agent persona from a template, or build a custom agent from scratch.</p>
            <button className="dt-btn dt-btn-primary" onClick={() => setGalleryOpen(true)}>
              <User size={14} strokeWidth={1.5} />
              Browse Templates
            </button>
          </div>
        )}

        {!loading && selectedCompany && companyRoles.length > 0 && (
          <div className="dt-section">
            <h3 className="dt-section-title">Company Operators</h3>
            <div className="dt-grid">
              {companyRoles.map((role) => renderTwinCard(role, false))}
            </div>
          </div>
        )}

        {!loading && selectedCompany && companyRoles.length === 0 && (
          <div className="dt-empty dt-empty-company">
            <h3>No operators assigned to {selectedCompany.name}</h3>
            <p>
              Activate operator personas or assign an existing agent to this company from the
              Companies tab.
            </p>
            <button className="dt-btn dt-btn-primary" onClick={() => setGalleryOpen(true)}>
              <User size={14} strokeWidth={1.5} />
              Create Company Operator
            </button>
          </div>
        )}

        {!loading && otherActiveRoles.length > 0 && (
          <div className="dt-section">
            <h3 className="dt-section-title">{selectedCompany ? "Other Active Agents" : "Active Agents"}</h3>
            <div className="dt-grid">
              {otherActiveRoles.map((role) => renderTwinCard(role, false))}
            </div>
          </div>
        )}

        {!loading && showInactive && selectedCompany && companyInactiveRoles.length > 0 && (
          <div className="dt-section">
            <h3 className="dt-section-title">Inactive Company Operators</h3>
            <div className="dt-grid">
              {companyInactiveRoles.map((role) => renderTwinCard(role, true))}
            </div>
          </div>
        )}

        {!loading && showInactive && otherInactiveRoles.length > 0 && (
          <div className="dt-section">
            <h3 className="dt-section-title">{selectedCompany ? "Other Inactive Agents" : "Inactive Agents"}</h3>
            <div className="dt-grid">
              {otherInactiveRoles.map((role) => renderTwinCard(role, true))}
            </div>
          </div>
        )}
      </div>

      {/* Template Gallery Modal */}
      {galleryOpen && (
        <PersonaTemplateGallery
          onClose={() => setGalleryOpen(false)}
          onActivated={handleActivated}
          initialCategory={selectedCompany ? "operations" : "all"}
          companyId={selectedCompany?.id ?? null}
          companyName={selectedCompany?.name ?? null}
          recommendedTemplateNames={selectedCompany ? COMPANY_OPERATOR_TEMPLATE_NAMES : []}
        />
      )}

      <style>{`
        .dt-panel {
          display: flex;
          flex-direction: column;
          height: 100%;
          overflow: hidden;
        }

        .dt-header {
          padding: 20px 24px 12px;
          border-bottom: 1px solid var(--color-border-subtle);
          flex-shrink: 0;
        }

        .dt-header-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
        }

        .dt-title-area {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .dt-title-area h2 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: var(--color-text-primary);
        }

        .dt-count {
          font-size: 11px;
          padding: 2px 8px;
          border-radius: 10px;
          background: var(--color-bg-tertiary);
          color: var(--color-text-muted);
          font-weight: 500;
        }

        .dt-header-actions {
          display: flex;
          gap: 8px;
        }

        .dt-btn {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 6px 12px;
          border-radius: 6px;
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.15s;
          border: none;
        }

        .dt-btn-primary {
          background: var(--color-accent);
          color: white;
        }

        .dt-btn-primary:hover {
          background: var(--color-accent-hover);
        }

        .dt-btn-secondary {
          background: transparent;
          border: 1px solid var(--color-border);
          color: var(--color-text-secondary);
        }

        .dt-btn-secondary:hover {
          background: var(--color-bg-hover);
          color: var(--color-text-primary);
        }

        .dt-subtitle {
          margin: 0 0 12px;
          font-size: 12px;
          color: var(--color-text-muted);
          line-height: 1.4;
        }

        .dt-company-context {
          margin: 0 0 12px;
          padding: 12px 14px;
          border: 1px solid var(--color-border-subtle);
          border-radius: 10px;
          background: var(--color-bg-secondary);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
        }

        .dt-company-context-copy {
          display: flex;
          flex-direction: column;
          gap: 6px;
          min-width: 0;
        }

        .dt-company-context-title {
          font-size: 13px;
          font-weight: 600;
          color: var(--color-text-primary);
        }

        .dt-company-context-text {
          font-size: 12px;
          color: var(--color-text-secondary);
          line-height: 1.4;
        }

        .dt-company-context-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
        }

        .dt-company-context-tag {
          display: inline-flex;
          align-items: center;
          padding: 3px 8px;
          border-radius: 999px;
          font-size: 10px;
          font-weight: 500;
          color: var(--color-text-secondary);
          background: var(--color-bg-tertiary);
          border: 1px solid var(--color-border-subtle);
        }

        .dt-toolbar {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .dt-search-wrapper {
          display: flex;
          align-items: center;
          gap: 6px;
          background: var(--color-bg-input);
          border: 1px solid var(--color-border-subtle);
          border-radius: 6px;
          padding: 4px 10px;
          flex: 1;
          max-width: 280px;
          color: var(--color-text-muted);
        }

        .dt-search-wrapper:focus-within {
          border-color: var(--color-border);
        }

        .dt-search {
          background: none;
          border: none;
          outline: none;
          color: var(--color-text-primary);
          font-size: 12px;
          width: 100%;
        }

        .dt-toggle-inactive {
          display: flex;
          align-items: center;
          gap: 5px;
          font-size: 12px;
          color: var(--color-text-muted);
          cursor: pointer;
          white-space: nowrap;
        }

        .dt-toggle-inactive input {
          accent-color: var(--color-accent);
        }

        .dt-content {
          flex: 1;
          overflow-y: auto;
          padding: 16px 24px;
        }

        .dt-loading, .dt-error {
          text-align: center;
          padding: 40px 0;
          color: var(--color-text-muted);
          font-size: 13px;
        }

        .dt-error {
          color: var(--color-error);
        }

        .dt-empty {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 60px 20px;
          text-align: center;
        }

        .dt-empty-icon {
          color: var(--color-text-muted);
          opacity: 0.4;
          margin-bottom: 16px;
        }

        .dt-empty h3 {
          margin: 0 0 8px;
          font-size: 15px;
          font-weight: 600;
          color: var(--color-text-primary);
        }

        .dt-empty p {
          margin: 0 0 20px;
          font-size: 13px;
          color: var(--color-text-muted);
          max-width: 360px;
          line-height: 1.5;
        }

        .dt-section {
          margin-bottom: 24px;
        }

        .dt-section-title {
          font-size: 11px;
          font-weight: 600;
          color: var(--color-text-muted);
          text-transform: uppercase;
          letter-spacing: 0.5px;
          margin: 0 0 12px;
        }

        .dt-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
          gap: 10px;
        }

        .dt-card {
          background: transparent;
          border: 1px solid var(--color-border-subtle);
          border-radius: 8px;
          padding: 14px 16px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          transition: all 0.15s;
        }

        .dt-card:hover {
          border-color: var(--color-border);
          background: var(--color-bg-hover);
        }

        .dt-card-inactive {
          opacity: 0.55;
        }

        .dt-card-header {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .dt-card-avatar {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          flex-shrink: 0;
        }

        .dt-avatar-inactive {
          filter: grayscale(1);
          opacity: 0.6;
        }

        .dt-card-title {
          display: flex;
          align-items: center;
          gap: 6px;
          min-width: 0;
          flex: 1;
        }

        .dt-card-name {
          font-size: 13px;
          font-weight: 600;
          color: var(--color-text-primary);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .dt-autonomy-badge {
          font-size: 9px;
          padding: 1px 5px;
          border-radius: 3px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.3px;
          flex-shrink: 0;
        }

        .dt-autonomy-lead {
          background: rgba(239, 68, 68, 0.15);
          color: #ef4444;
        }

        .dt-autonomy-specialist {
          background: rgba(59, 130, 246, 0.15);
          color: #3b82f6;
        }

        .dt-autonomy-intern {
          background: rgba(34, 197, 94, 0.15);
          color: #22c55e;
        }

        /* Status indicator */
        .dt-status-area {
          display: flex;
          align-items: center;
          gap: 5px;
          flex-shrink: 0;
        }

        .dt-status-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          flex-shrink: 0;
        }

        .dt-status-running {
          background: #3b82f6;
          box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
          animation: dt-pulse 1.5s ease-in-out infinite;
        }

        .dt-status-sleeping {
          background: #22c55e;
        }

        .dt-status-idle {
          background: #f59e0b;
        }

        .dt-status-stopped {
          background: #6b7280;
        }

        @keyframes dt-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }

        .dt-status-label {
          font-size: 10px;
          color: var(--color-text-muted);
          font-weight: 500;
        }

        .dt-card-desc {
          font-size: 12px;
          color: var(--color-text-secondary);
          line-height: 1.4;
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .dt-card-meta-row {
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .dt-company-badge {
          display: inline-flex;
          align-items: center;
          padding: 2px 8px;
          border-radius: 999px;
          font-size: 10px;
          font-weight: 500;
          color: var(--color-text-secondary);
          background: var(--color-bg-tertiary);
          border: 1px solid var(--color-border-subtle);
        }

        .dt-card-caps {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
        }

        .dt-cap-tag {
          font-size: 10px;
          padding: 1px 6px;
          border-radius: 3px;
          background: var(--color-bg-tertiary);
          color: var(--color-text-muted);
        }

        .dt-cap-more {
          font-weight: 600;
        }

        /* Heartbeat info */
        .dt-heartbeat-info {
          display: flex;
          gap: 12px;
        }

        .dt-hb-detail {
          font-size: 10px;
          color: var(--color-text-muted);
        }

        /* Actions */
        .dt-card-actions {
          display: flex;
          gap: 4px;
          align-items: center;
          margin-top: auto;
          padding-top: 4px;
        }

        .dt-action-spacer {
          flex: 1;
        }

        .dt-card-action {
          background: transparent;
          border: 1px solid var(--color-border-subtle);
          color: var(--color-text-muted);
          padding: 4px 8px;
          border-radius: 4px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          transition: all 0.15s;
          font-size: 11px;
        }

        .dt-card-action:hover {
          background: var(--color-bg-tertiary);
          color: var(--color-text-primary);
          border-color: var(--color-border);
        }

        .dt-card-action:disabled {
          opacity: 0.4;
          cursor: not-allowed;
        }

        .dt-card-action:disabled:hover {
          background: transparent;
          color: var(--color-text-muted);
          border-color: var(--color-border-subtle);
        }

        .dt-action-start {
          color: #22c55e;
          border-color: rgba(34, 197, 94, 0.3);
        }

        .dt-action-start:hover {
          background: rgba(34, 197, 94, 0.1);
          color: #22c55e;
          border-color: rgba(34, 197, 94, 0.5);
        }

        .dt-action-stop {
          color: #ef4444;
          border-color: rgba(239, 68, 68, 0.3);
        }

        .dt-action-stop:hover {
          background: rgba(239, 68, 68, 0.1);
          color: #ef4444;
          border-color: rgba(239, 68, 68, 0.5);
        }

        .dt-action-wake {
          color: #f59e0b;
          border-color: rgba(245, 158, 11, 0.3);
        }

        .dt-action-wake:hover:not(:disabled) {
          background: rgba(245, 158, 11, 0.1);
          color: #f59e0b;
          border-color: rgba(245, 158, 11, 0.5);
        }

        .dt-card-action-danger:hover {
          color: var(--color-error);
          border-color: var(--color-error);
        }

        @media (max-width: 900px) {
          .dt-company-context,
          .dt-header-top,
          .dt-toolbar {
            flex-direction: column;
            align-items: stretch;
          }

          .dt-header-actions {
            justify-content: stretch;
          }

          .dt-header-actions .dt-btn,
          .dt-company-context .dt-btn {
            justify-content: center;
          }

          .dt-search-wrapper {
            max-width: none;
          }
        }
      `}</style>
    </div>
  );
}
